- Share This Post
- Pin It
- 2
- 9
-
Sparkle (0)
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.
- Pick a font you like from the Webfonts page.
- Click a font you like. You see it in various sizes. Click the Tab that says "Get the Code."
- 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 Cantarell, so I pasted this code into my web page.
- 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.
- 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.
The Caveats
The Google fonts work with most browsers, but with limits. You mostly need a pretty up-to-the-minute version of any browser to see the magic. 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 the people 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.
--
Virginia DeBolt
BlogHer Contributing Editor|Web Teacher|First 50 Words
