Font Face & Google Web Fonts

A new technology has arrived with CSS3 to enable web designers to use a much wider variety of fonts in their web pages. With pre-CSS3 web design a designer was restricted to using fonts that they could be sure were installed on their viewers' machines. Hence the use of font families and web-safe fonts. The only alternative, if you really wanted to use a specific font in your web design, was to make a graphic of the text using the font and then insert the graphic into the page.

Font Face

The font-face stye rule rule allows you to specify your own font family definition and have the font dynamically downloaded from the web so that it can be used to display text in your pages on any machine. The basic format for the rule is shown in the following example:

@font-face
{
 font-family: 'Architects Daughter', cursive;
 src: url('http://www.miceheight.org/fonts/ad.woff');
}

This rule specifies a new font family called Architects Daughter (the font used for the headings on this page), with the fall back option of any cursive font. The src attribute specifies the url where the browser can download the font. You can then use this font, just as you would normally in your page. However, Dreamweaver, will not list the font in its font family drop down unless you explicitly add it yourself. Personally, I don't bother with this, I just edit the code directly to specify the required font.

The next question then, is where I can I get downloadable fonts for my web pages. And the answer, unsurprisingly, is Google...

Google Web Fonts

In fact Google provide a comprehensive web font service which includes a vast selection of fonts available through a graphical browser, and automated code generation which can then be pasted directly into your page header.

Once you have selected the fonts you wish to use on your page, you can then review your selection, and then Google will generate a link to a stylesheet that you can then include in the head of your page. You can then refer to the font directly by name in any of your style rules. If you check out the head of this page you will see a link to a stylesheet hosted by Google at fonts.googleapis.com and if you look at the stylesheet itself, you will see that Google have automatically generated the necessary font-face rules and placed them in the stylesheet. Then, further down the head of this page, you'll find a style rule that defines the h1, h2 and h3 tags as using the Architects Daughter font.

If you want more information, then the sixrevisions site has a good guide to the Google font API.

You may notice a slight lag is displaying text that is rendered using a downloaded font. This is because, of course, the font has to be downloaded before it can be used.

References

The W3Schools page on the topic:

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Back Back to main text formatting page