CHAPTER 10. FONT FAMILIES 110
(b) Images do not scale well. Raster graphics (gif, jpg, png, etc.,) become
pixelated when they are enlarged.
(c) Image creation must be integrated with content development. But image
is style, and ideally should be done separately.
However, despite these small problems, creating images is very popular,
especially for things like image-based submit buttons.
10.6 Web Fonts
A web font can be automatically downloaded to your user’s computer if they
don’t already have it. This works on every modern browser.
Google provides a large but limited collection of fonts you can use freely.
Fonts.com provides a gigantic collection of fonts you can pay to use.
10.6.1 Google Web Fonts (Free)
http://www.google.com/fontsis a source for webpage fonts. (I like using
their “poster” tab to view their fonts.)
They have hundreds of font families available (613 in Dec 2012, 617 in Feb
2013, 632 in Feb 2014, 671 in Feb 2015). The fonts they provide are open
source and free of charge.
In your HTML, you “source” the font like this, but replace the XXX with
the name of the font.
<link rel=stylesheet type=text/css
href='http://fonts.googleapis.com/css?family=XXX'>
This line should come very early in your
section. By putting it early(or even first), it gives the browser more time to fetch the font in case the
user does not already have it.
Once the font has been downloaded and cached by the browser, it does not
have to download again, making future page loads faster.
In your CSS, you specify the font stack like this, but replace the XXX with
the name of the font.