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 <body> 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.
We gathered plenty of feedback from our users during the beta – valuable insights that have helped shape the direction of the product. It’s clear the community loves the concept of in-app font trialing. We also received plenty of suggestions for things to work on. Enhancements found in the latest build include a cleaner, more intuitive UI, a revert button that allows you to return to your default text after applying a font, integration of the new Fonts.com shopping cart, and a revamped, stable architecture. Best of all, FontGazer remains free. Download your copy today and stay tuned for more enhancements to come.
