Fonts.com Web Fonts is Live

We are very excited to introduce Fonts.com Web Fonts – a service you can try for free as of today. We have been working hard to design a service that will allow Web designers to focus on the design of their sites and spend less time contending with workflow complications and design compromises. The disadvantages of displaying text in graphics or other technologies are numerous and have frustrated designers since the early days of the Web. One must invest in and learn how to use image processing software, learn how or work with IT to host these images, and create a process for managing and updating these assets. At the end of this lengthy process, the designer is left with a Web site with text that is difficult for visitors and search engines to access.

Now we can have the best of both worlds. We are no longer confined to handful of 'Web safe' fonts – and the text on our site remains just the way we want it: scalable, search engine friendly and easy to edit. Our service puts thousands of fonts at your fingertips. The workflow is intuitive. Select the fonts you like, assign them to CSS selectors and add one line of code to your HTML page. You can change the fonts anytime, without touching the code again. I've enjoyed demonstrating this for others. They seem to have an epiphany when the fonts change before their eyes.

Here I will try to show you how you can use a free Fonts.com Web Fonts account to use Web fonts a Web page. In this case, I'm using my blog on blogspot.com.

After logging in to webfonts.fonts.com, I create a project named 'blog.' Next, I add the domain of my site: http://photo-steve-ca.blogspot.com to it so our service knows where to serve the fonts.

I add some fonts to my project which I then need to associate with the CSS Selectors used in my blog. If you're not already familiar with CSS selector tags, this article may be helpful. To find out what selectors are used in my blog, I open the 'Template' of the blog and I can see that H1, H2, H3 and some other common tags were used. So I add the names of these selectors to my project on the 'Work on style sheet' tab. Next, I assign the fonts that I wanted to use to each selectors and click on 'Save changes and update style sheet'. (Figure 1)

Figure 1

To allow Fonts.com Web Fonts to serve fonts to my blog, I need to paste just one line of code into my HTML. The line of code can be found on the 'Publish' tab. I copy the code (Figure 2)

Figure 2

and paste into the blog template right after the tag (Figure 3)

Figure 3

and save the template by clicking "SAVE TEMPLATE CHANGES." That's it. The fonts I chose were selected to show a dramatic difference (see figures 4 and 5). In real life, you'll want to leverage your typographic expertise and design consideration when picking fonts.

Figure 4

Figure 5

If you want to add more or change your Web fonts simply add additional fonts to your project and change the fonts assigned to your selectors. Save the project again and you're done.

We look forward to your feedback on our service. I believe this is just the beginning of a small revolution. Today the first Web sites are using Web fonts. Tomorrow, we expect to see this technology in consumer electronic devices and beyond.