Web fonts: @font-face, variable fonts, loading, and fallbacks

Here’s how you can reference the font in your CSS styles:

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont.woff2') format('woff2'),
         url('fonts/MyCustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

If you provide the browser with a list of multiple font files to download, the browser will choose the first font file it’s able to use. That’s why the format you list first should be the preferred format — that is, WOFF2 — with the older formats listed after that. Browsers that don’t understand one format will then fall back to the next format in the list.

How to use it:

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

Common weight name mapping

Formats

All major browsers support WOFF/WOFF2 (Web Open Font Format versions 1 and 2).

If you need to work with legacy browsers, you should provide EOT (Embedded Open Type), TTF (TrueType Font), and SVG web fonts for download.

Fallback font

Usually I use the sans-serif font as a fallback for web.

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

Get detailed info about a font file

open_in_new https://fontdrop.info

Font sources

Paid fonts:

• open_in_new MyFonts .

Free fonts:

• open_in_new Google Fonts .
• open_in_new Font Squirrel .
• open_in_new DaFont .
• open_in_new Everything Fonts .

Mixed:

• open_in_new Variable Fonts .
• open_in_new Axis-Praxis .