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;
}

You can list several formats in one src (comma-separated). The browser picks the first one it can use, so put the preferred format first (typically WOFF2), then older fallbacks. Overview: open_in_new Using OTF fonts on web browsers .

How to use it:

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

Format examples

For broad modern support, prefer WOFF (all major desktop browsers) with TTF as a fallback for older Safari / Android / iOS.

OTF

@font-face {
    font-family: GraublauWeb;
    src: url('path/GraublauWeb.otf') format('opentype');
}

@font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    src: url('path/GraublauWebBold.otf') format('opentype');
}

WOFF

@font-face {
    font-family: GraublauWeb;
    src: url('path/GraublauWebBold.woff') format('woff');
}

TTF

@font-face {
    font-family: GraublauWeb;
    src: url('path/GraublauWebBold.ttf') format('truetype');
}

Converters: open_in_new onlinefontconverter.com .

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.

Flexible font sizes

Common units for type size: em, ex, pt, px, %.

The browser default size is usually 16px. Set a relative base on body:

body {
  font-size: 100%;
}

That locks the base to the browser default. Then size everything else in em relative to that base.

When implementing a design, take absolute sizes (px) from the mockup and convert them to relative units (em).

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 .