fonts.com blog

Fonts.com Web Fonts is Live

by Steve Lee

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.

Tags: ,

8 Responses to “Fonts.com Web Fonts is Live”

  1. Erwin Heiser says:

    Looks promising but the actual system to deploy the fonts feels very counter-intuitive.
    I’d rather write those styles in my own stylesheets then add selectors through a web interface.

  2. Steve Lee steve says:

    Good point.

  3. Lukas Rueegg says:

    That would really be a big step forward. But as Erwin already said, it must be possible just to add the fonts in a own stylesheet without a Javascript include. @font-face is a technology which works without Javascript so I don’t see any reason to use Javascript then…

  4. Tony Grant says:

    How much will it cost after the free beta?

  5. LA says:

    free for now…but will it remain free? i’m using cufon right now which is open-source and free, and seems to work quite well. i’m afraid that if i start using this, i will be boxed into paying for a service later on. can you shed any light on the long-term strategy? will this be a pay-for service? if so, can you estimate a monthly/annual cost to developers?

  6. billc108 says:

    I was told that after the beta period you’ll have two choices — pay based on bandwidth used (no actual dollar figure per bandwidth was given) or include a link (or maybe an ad) for webfonts.fonts.com and get them for free.

    I’d say use the beta now and see what your actual cost will be based on your use during beta. Then you can decide whether to pony up or find something on an open source webfonts site that’s close enough to your desired font.

    At worst you can not pay for the webfonts and your site will degrade gracefully to whatever you’ve spec’ed for your secondary fonts — which is something you should have anyway, as I suspect there will be some people on old browsers and nonconformists on offbeat browsers with names like Jumping Platypus who won’t be able to view the webfonts anyway…

  7. Jase Wells says:

    I like that there’s finally a way to use Helvetica Neue on websites! (Sure, there are some similar typefaces, but none that I’ve found with good Light/Thin weights.)

    Trouble is, your JavaScript way of loading webfonts is annoying because people briefly see the normal, unstyled text before it changes to your chosen webfont — depending on how quickly your browser runs the JS and inserts the CSS style tag into your document. Of course, people don’t notice this on your own site because your pages include the CSS directly instead of having JS dynamically add it at run-time.

    Having the option to include the @font-face directive yourself would be better, and allow us to specify local() font names to save an http request when the browser has the chosen font already installed. Maybe that is an option when you self-host the font files — can we self-host as part of the beta?

    So, this service is promising, but I wish you’d just let us buy webtype licenses for the typefaces (like fontspring.com) and skip the extra hoops of doing it through a hosted service.

  8. Steve Lee steve says:

    We welcome our customers to host the font by themselves, you can contact our sales directly for the self hosting license, but here are few things you need to consider before going to the route of hosting fonts yourselves.

    First of all, you need to decide you want to be a designer/publisher or a web programmer? Hosting fonts is more complicated than just put the fonts in the server. It is not the same as hosting a picture. You already know it is not easy to host video nicely that everyone can just click and watch instantly, that’s why we have Youtube. Other than massive capacity, hosting fonts is probably more difficult than video.
    Here are the things you need to do to host the font.

    1. Technologies need to in place: to serve the right font format to right browsers, there are TTF, EOT, WOFF, SVG to respective browsers.

    2. Font protection: I think you don’t want other people freely using your bandwidth simply by referring to your fonts from other web sites. Most foundries EULA ask to protect their IP, just like any other software, can you just put the whole package of Photoshop or Office in your web site for other people to down load? You will be liable for piracy by 3rd parties.

    3. Do you want to implement and invest in industrial strength delivery system like Akamai? So the fonts will be delivery instantly? Same logic for putting video in YouTube than host the video in your own server.

    4. We are fixing bugs daily, browsers are changing regulary and introduce bugs at the same time, are you willing to invest your time and resource to fix bugs regularly?

    About the JavaScript, I posted my answer in our support portal here is it again.
    The delay of @font-face rendering or the display of system fonts first then changing into web fonts is because the browser is waiting for the web font delivery to be completed. It depends on how fast the client machine ( office or home) internet access speed since we host our web fonts on the super fast delivery system like Akamai. So hosting the web fonts yourself will not solve the problem.
    We will provide the non-JavaScript method later on when we launch commercially, you can link directly the CSS file. The non-JavaScript method will help avoiding conflict with other JavaScript in the HTML pages. But it will not solve the speed/display problem mentioned.
    Downloading web font is not different than downloading pictures or video, we are used to wait, that’s why we like fast internet access speed. If have reasonable fast internet access speed you will not notice any delay of the web fonts.

Great type makes sites stand out