FAQ: CSS Typography - Fallback Fonts

I was struggling with this as well but I think I understand now. When it says class=“bold text” it’s not one class called “bold text” they are 2 separate classes strung together with spaces “bold” and “text” like the explanation from the cheat sheet below. In this case, when you are using “.garmaond .sample. text” it applies to all the classes within “.garamond .sample” that contain the class attribute “.text” so it covers all 3 groups “bold text”. “regular text” and “italic text”. You will see that if you change the CSS selector to “.garamond . sample .bold” only the selector “bold text” will be affected by the CSS.

HTML attributes with multiple values

Some HTML attributes can have multiple attribute values. Multiple attribute values are separated by a space between each attribute.

Hope that helps!

1 Like

That makes sense, thanks! I was incorrectly operating under the assumption that the entire string was one class.

How does one choose which fallback fonts to use for a website? Are there some guidelines for this? And how many fallback fonts is ideal?

Different platforms have different font sets. Ideally our text will render with the font we want, foremost, then gradually fall back onto our next best choice, then the next which might be common to all, then the generic family as the last choice since every platform will have a default font to that family.

What if we don’t want to use the available font sets that come on different platforms e.g. we would like to create our own font sets using some fancy font from Google fonts for example ?

One would still be advised to fallback to standard fonts, followed by generic family.

I believe you use quotations marks if a family name matches a generic family name. The family name should be quoted to indicate that it is not generic.

The only time we need to use quotes is when the family name contains white space.

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

What is the maximum number of fallback fonts allowed on a single element?

There is no maximum, but there is a sensible limit.

most desired, 
next most desired, 
suitable substitute, 
suitable base font, 
generic family
1 Like

Thank you, and is it good practice to always incorporate this 5-font limit to all of our code?

The only thing I would deduce as best practice is to use fallback fonts. Any other constraints would be arbitrary, governed by the design itself. Many designs begin with specifications such as colors, typefaces, imagery, layout, etc. From there it’s a matter of realizing the design.

Soooo i have 2 questions that i couldn’t find the answer to.
First of all why in the example of the lesson the Garamond and Times fonts have quotes on them like so: “Garamond”, “Times” ? because i have seen that it works without them and why doesn’t the serif font have quotes in the example ?
Second of all, in the exercises it tells us to create the selector .garamond .sample .text which surprisingly actually works to style the examples shown for the Garamond typeface on the webpage despite the fact of there actually not existing any .text class. Please explain to me how this is possible because i am lost right now.

Quotes are optional when there is no white space in the name. They do not cause any issues if used when not needed.

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

We would not use quotes on the generic family since that is not a name, proper. But even in that case quotes might have no effect (needs testing).

Try this,

p {
    font-family: 'serif';

The default is usually Times, so if this is ignored, the system will substitute in that font. To see if it is ignored, try this,

p {
    font-family: 'sans-serif';

The default is usually Arial, but if it is ignored then the default serif font will display.

Those are classnames which identify selector rules for their respective class.

.garamond {
    font-family: Garamond, serif;

Some elements in the page may have that class…

 <article class="garamond">

1 Like

Thank you, mtf! I had this same question. That’s an interesting property! I can see how it can be useful to mix-and-match words from class names when defining style.

1 Like

I don’t think they’re actually required. However, it isn’t wrong to wrap fonts which consist of one word in quotation marks. It’s just a matter of preference. Whatever option you choose, you must stay consistent throughout your stylesheet

Any organization we look at we will not find quotes on single font names. It’s just not the convention, and requires a tonne of extra typing that is superfluous. Don’t use quotes when you do not have to. We only use them when there is white space in the font name.

1 Like