CODEWITHSUNDEEP
cssfontsfallback
Laura Nijhuis
Laura Nijhuis

Reputation: 71

How to apply a fallback font?

body {
font-family: 'Ubuntu', sans-serif;
}

body {
font-family: sans-serif; 
}

This is my CSS now. I've read that if you put your fallback font second, it'll only be used on devices your first font doesn't work on.

However, on my laptop, it chooses to show the fallback font (It does read the first font when the fallback is out of my CSS). How do I apply a fallback font without it -ruining- my page?

Upvotes: 7

Views: 15622

Answers (3)

Turnip
Turnip

Reputation: 36742

Remove the second block.

You are already defining sans-serif as a fallback. If you wish to add another font, Arial for example, just add it to the comma separated list:

body {
    font-family: Ubuntu, Arial, sans-serif;
}

In this example, if Ubuntu is not installed, Arial will be used. If Arial is not installed, the systems default sans-serif font will be used.

What you are doing in your example is overriding the first style block with the second which is why sans-serif is always used and the first block is ignored.

Upvotes: 10

Roy
Roy

Reputation: 8089

That's because you have to provide them in one single line of CSS, like this:

body {
    font-family: Ubuntu, Arial, 'Your font', sans-serif;
}

It's the order of fonts that decides what font to use. Stating body for a second time will override the first one. Read more about font-family at MDN.

Upvotes: 1

Johannes
Johannes

Reputation: 67798

Your second body/font-familyrule overwrites the first one, so the browser won't ever fetch the fonts listed in the first rule.

Just remove the second rule and add the fallback font to your first rule, as second in your list of fonts ('Ubuntu', Arial, sans-serif;).

Upvotes: 1

Related Questions