How does the font-family property work in CSS?

Question

How does the font-family property work in CSS? Why is more than one font used? Isn't only one font used at a time by the browser?

Endoergic

Answer 1

The font-family property holds several font names to provide a "fallback" system.

The browser tries each font family in the order that they are listed; if the browser does not support the first font, it tries the next font, and so on, down the list. That's why it's important that at least the last font in the list be a generic font family that is guaranteed to be universally available. There is no guarantee that the fonts you have loaded on your computer when you design the web page will be loaded on your visitor's computers—fonts are generally handled client-side, rather than server-side.

A common declaration might look like this:

font-family:Georgia,"Times New Roman",serif;

The "Georgia" font will be used if it is available. If not, the browser will attempt to fall back to "Times New Roman". If it can't find that font either, it will use a generic serif font.

For more technical information, I suggest reading the Fonts specification from the W3C.

Stoller

Important to note too that if the font contains a whitesapce, a quote must be used, hence Times New Roman is quoted – Execute

It isn't absolutely necessary. The parsing rules are listed in the specification that I linked. But I agree that they are too complex to worry about—just wrap the string in quotes. – Stoller

Answer 2

To expand on what cody said:

When you look at a web page through a browser, your browser looks at the css and sees what fonts to use. Then it checks this list against the list of fonts that your computer has installed; the first one that matches is the one that gets used. Fonts are client-side, not server-side, and if you don't have the font that the css specifies, your browser falls back either to the next font specified or a default font.

Merkley