Embedding fonts the Google Way

For a while I toyed with the idea of using embedded fonts to liven up my web pages. I would read articles on how to do it and get discouraged. Some browsers needed one kind of font, some another—it was too much bother.

Then Google came out with a font embedding system that is dead easy. You can get started with them at the Google Font API page.

For completeness, I must add other sources for embeddable fonts. One is Font Squirrel. It uses a different technique involving the CSS @font-face declaration. With Font Squirrel, you download the font and put it on your server. TypeKit sells access to embeddable fonts, which are on their server network. TypeKit has many more fonts than the free sources do. The price structure on TypeKit is very reasonable.

The How To

Google’s tools are the easiest to use. Here’s how you would use Google fonts.

  1. Pick a font you like from the Webfonts page.
    font choices
  2. Click a font you like. You see it in various sizes. Click the Tab that says “Get the Code”
  3. There are two code snippets. The first you paste into the head of your HTML document. Make it the first thing in the head. (I’ll get to why in a minute.) I wanted to try the Cantarell, so I pasted this code into my web page.
    link in head to embedded font
  4. The second code snippet goes into your CSS file. I changed it up a bit to include three sizes of headings and default to sans-serif rather than the serif in their example code. Here’s how my CSS looked.
    CSS rule for embedded font
  5. Upload the HTML and the CSS to your server and take a look at your page. (You may need to refresh the page.) Here’s how Cantarell looks on my web site.
    browser display of embedded font

The Caveats

The Google fonts work with most browsers, but with limits. One limit is that you need a pretty up to the minute version of any browser to see the magic. That means don’t remove that old font rule in your stylesheet, just put the new one calling a font from Google after your original rule. If the browser doesn’t know the embedded font magic, it will still show your original font.

The other limit is download time. If you have a lot of users with dial up, mobile users or users with slow connections of some other kind, you may want to stay away from the idea for a while longer. It’s whiz-bang fast with cable or DSL, but that may not be who your web page targets.

It works in Google Chrome versions 4.249.4+. Chrome renders the rest of the page, but until the web font has loaded, it displays a blank space in place of the text that uses the font. This may cause a problem with slow connections. Apple Safari versions 3.1+ work. Like Chrome, Safari renders the rest of the page, but until the web font has loaded, it displays a blank space in place of the text that uses the font. The same thing applies in Internet Explorer versions 6+. The reason the LINK element you paste into the document head must go first is because of Internet Explorer. If it isn’t the first thing there, the whole page may not render.

The fonts work in Mozilla Firefox version: 3.5+. In Firefox, the first display is the text in the default font. Firefox then re-renders text in the web font once it has loaded. So, the user sees something, but it may change appearance unexpectedly when the connection speed is slow.

For Opera versions 10.5+, Google mentions no problems. Imagine that.

In one of those interesting coincidences, A List Apart published Web Fonts at the Crossing today, which gives the insatiably curious the whole story on web fonts.

8 thoughts on “Embedding fonts the Google Way

  1. What does one do to get Internet Explorer to render the page?!!
    The link to the Font I use is the very first line in the section and still it will not display in IE!

  2. I downloaded IE 8 and still it won’t render!? Personally I’m completely disenchanted with the way MS do not cooperate with popular innovation that is not of their own making.

  3. Dear Virginia, this is almost certainly not the place to ask a question, but not having found another, here goes…
    I have a “floating image link”, embedded by Comm100 on my site (http://bespoke-webwork.com), which you’ll see should you pay a visit. I’ve asked them for the code, as I want to emulate what it does, to a degree, in order to advertise my Bilingual Website service. Unfortunately, my contact at Comm100 was not instrumental in the setup of the feature and cannot help me. Do you perhaps know of such code already in existence and freely available?

    • Popups like that are usually done with JavaScript. If you view the source of your main page, you see some onload functions that probably contain the code you’re looking for. I’m not a JavaScript person, so that’s about the extent of what I can tell you.

  4. My apologies, for not letting you know, but I have solved the problem, as you presumed by using JavaScript – Many thanks for your time and attention – as regards my original query, I am studying WEFT by Microsoft – “…if the mountain won’t come to Mohammed…”

Leave a Reply