Introduction to css

I am not really stuck, but i can’t understand what is happening:

.hero {
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;

So in the lines above you see how there is a font family added , trebuchet MS. but then there is another one, helvetica. why is that? is that because it is refering to a div? and how does the fallback apply? does Trebuchet MS apply to the whole div? why use Helvetica then?

I hope this is clear

The font-family list consists of at least two fonts, a Named font, and a generic family…

.hero {
    font-family: Arial, sans-serif;

The second in the list is called the fallback. The generic family is always written last in the list, which can be any length. When writing for multiple platforms we should select fonts that are common to each platform. In the example given in the opening post we could say that Trebuchet MS is common on Windows platforms, but possibly not present on Macs, which most likely do have Helvetica.

If the user is on a Windows machine, the Trebuchet font will render, but on a Mac, the Helvetica font will render. In the case where neither are present on the platform, the browser will fall back to the generic family and use the font specified in the local settings.


thank you!
so we do this in case its not legible, can we have multiple fallbacks then?

1 Like

Yes, we can have as many as we believe necessary. The order the list is written is important. Consider whether the font is likely to exist or not

<- least likely, somewhat likely, more likely, most likely, generic family ->
1 Like

This topic was automatically closed after 7 days. New replies are no longer allowed.