How to apply a fallback font?

Question

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 1

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.