Search code examples
cssfontsfont-face

In CSS is there any need for backup fonts when applying custom fonts to a webpage?

In CSS why is a backup font recommended if I am uploading a custom font for use with the webpage?

I thought the backup fonts were only needed in case the client doesn't have the 1st/2nd/3rd..etc choice installed.

For example if you have this code:

@font-face {
    font-family: MyCustomFont;
    src: url('../fonts/MyCustomFont.ttf');
}

Why is this necessary?

body {
    font-family: MyCustomFont, Arial, Helvetica, sans-serif;
}
Solution

  • It's not necessary to specify a font stack, but it helps to degrade gracefully in obscure cases when a browser is unable to use the font somehow, e.g. if the HTTP request for the font file times out, the font file itself becomes corrupted or otherwise unusable, the browser doesn't support any of the given font formats, among others.

    You should do your best to ensure the custom font gets downloaded and used properly, of course. But things can and do happen that are out of your control sometimes, so it doesn't hurt to still have something nice to fall back to. That's why they're called backup or fallback fonts :)