CODEWITHSUNDEEP
cssfonts
William
William

Reputation: 3395

Understanding Font Families

I am trying to decide on the fonts that I want to use for my website.

Why is it that when people specify a font-family they give a list of fonts? Is there a way to specify just a single font to be used? Are different fonts from the list used depending on the browser that the user is using in order to visit the site?

This is how I have seen others do it:

body {
    font: 14px Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
    color: rgba(51,51,51,1);
}

Is there a reason not to do it like this?

body {
    font: 14px Cambria;
    color: rgba(51,51,51,1);
}

Upvotes: 0

Views: 478

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

There are two reasons for specifying a list of fonts as the font-family value.

First, your primary font might not be installed in the user’s system. For example, Cambria exists in relative new versions of Windows only. The font list in the example is not particularly good, because in most cases where Cambria is not available, it falls back to Times New Roman, which is the common browser default anyway and does not work that well on typical screens.

Second, there might be characters in the text that are not supported by the primary font. For example, if the text contains “℀” (U+2100 ACCOUNT OF), none of the fonts listed has it – so a browser-dependent fallback font will be used, often causing typographic mismatch. (So if such characters may appear, the list should be longer.) Some browsers (some versions of IE) may even fail to render a character at all unless you give them a helping hand by using a suitable font list.

Nowadays people often use downloadable fonts (web fonts) via @font-face and expect them to be used in all browsers, so that no other font needs to be listed. However, even downloadable fonts may fail: font loading might fail (network problems), or settings in a browser might prevent the use of downloadable fonts. This is why fallback fonts are a good idea even when using downloadable fonts.

With a downloadable font as the primary font, there is yet another reason for fallback font: the download may take time, and while waiting for the font, the browser renders text using a fallback font. When the font has been downloaded, the browser changes to it. To reduce the somewhat unpleasant “flash” effect here, you can try to specify a fallback font, or alternate fallback fonts, that sufficiently resemble the downloadable font.

Upvotes: 2

brbcoding
brbcoding

Reputation: 13586

Those extra fonts are fallbacks. If the client's machine doesn't have the first font, it'll look for the second, third, etc...

Is there a reason not to do it like this? body { font: 14px Cambria; color: rgba(51,51,51,1); }

If you want to use a specific font, or one close to it, you will have to include the fallback fonts. If you don't mind that the browser uses the default system font, then it doesn't matter if you include them or not.

Upvotes: 1

John Conde
John Conde

Reputation: 219804

They fallback fonts. If the first font listed isn't available on an operating system, the next one is used. If that isn't available the next one after that is used. Etc. The last one is usually a generic font that is available on all systems (i.e. serif).

Upvotes: 3

Related Questions