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

https://fontdrop.info

Font sources

Paid fonts:

• MyFonts.

Free fonts:

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

Mixed:

• Variable Fonts.
• Axis-Praxis.