How to apply a fallback font?

css fonts fallback
Laura Nijhuis picture Laura Nijhuis · Jan 20, 2017 · Viewed 10.2k times · Source 
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?

Answer

Turnip picture Turnip · Jan 20, 2017

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.

Related questions

How to add some non-standard font to a website?

Is there a way to add some custom font on a website without using images, Flash or some other graphics? For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. …

Read More
CSS Font Border?

With all the new CSS3 border stuff going on (-webkit, ...) is it now possible to add a border to your font? (Like the solid white border around the blue Twitter logo). If not, are there any not-too-ugly hacks that will …

Read More
How to import Google Web Font in CSS file?

I'm working with a CMS which I only have access to the CSS file. So, I can't include anything thing in the HEAD of the document. I was wondering if there was a way to import the web font from …

Read More