Fonts

Browser Support

Font file types to use are WOFF2 and WOFF.

Note: Don't bother with TTF, SVG, or EOT unless you need very deep browser support for old IE and iOS.

Font Code

CSS

@font-face {
  font-family: 'Open Sans';
  src:  url('/fonts/open-sans/opensans.woff2') format('woff2'),
        url('/fonts/open-sans/opensans.woff') format('woff');
}

Using the font to style elements:

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

Sass/SCSS

$open-sans: 'Open Sans';
$open-sans-path: '/fonts/open-sans/';
@font-face {
  font-family: $open-sans;
  src:  url('#{$open-sans-path}opensans.woff2') format('woff2'),
        url('#{$open-sans-path}opensans.woff') format('woff');
}
// Global variable (avoid using $open-sans across your Sass code, abstract it out so it is easy to change)
$font-family--primary: 'Open Sans', sans-serif;

Using the font to style elements in Sass:

body {
  font-family: $font-family--primary;
}

More about using @font-face: https://css-tricks.com/snippets/css/using-font-face/{:target="_blank"}.

Performance And Webfonts

File Sizes

File sizes for webfonts can be large, so be careful to only include a few fonts, and try to limit yourself to 6 total (which will give you two families with regular, italic, and bold for each).

You can limit your file sizes by limiting the character set.

System Fonts

Consider using system fonts — you'll have no files to download and increase the performance of your site.

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif

• Using UI System Fonts In Web Design: A Quick Practical Guide{:target="_blank"}.
• Implementing system fonts on Booking.com — A lesson learned.{:target="_blank"}.
• System Font Stack{:target="_blank"}.

Font Services

Google Fonts

Google Fonts{:target="_blank"}

The preferred method for using Google Fonts is by linking the stylesheet via the <link> tag:

<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Typekit

Typekit{:target="_blank"}

Variable Fonts

• How to use variable fonts in the real world{:target="_blank"}
• One File, Many Options: Using Variable Fonts on the Web{:target="_blank"}

Webfonts And IIS

You'll need to have IIS configured with MIME types for the font files you're using, otherwise you'll get 404 errors.

Instead of messing with IIS, you can also add the following declarations to the web.config file of your project:

<system.webServer> 
  <staticContent> 
    <remove fileExtension=".eot" /> 
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" /> 
    <remove fileExtension=".ttf" /> 
    <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" /> 
    <remove fileExtension=".woff" /> 
    <mimeMap fileExtension=".woff" mimeType="application/font-woff" /> 
    <remove fileExtension=".woff2" /> 
    <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" /> 
    <remove fileExtension=".svg" /> 
    <mimeMap fileExtension=".svg" mimeType="image/svg+xml" /> 
  </staticContent> 
</system.webServer>

Resources

• Transfonter{:target="_blank"}
• FontDrop!{:target="_blank"}
• glyphhanger{:target="_blank"}