Netlify Web Fonts

Super early version of a longer-term project aimed to facilitate re-usable font loading across multiple Netlify properties.

The fonts listed here must be either open licensed (e.g. SIL) or Netlify must have purchased an enterprise-level license.

Usage

npm install @netlify/marketing-web-fonts

Use the web font files in dist/. Review real PRs that implemented this code:

• Next.js (on Jamstack Explorers)

Choose your subset (you probably want Latin):

• ascii: Smallest, fastest to load, but the riskiest! English-only (boo)
• latin: A nice compromise. You probably want this.
• full: Everything!
• I’ll generate a custom subset for you by request! Open an issue!
  • If you want to generate your own look in the generate.sh file. It requires fonttools.

Pacaembu

Contains wght axis from 100–1000

• ascii: 95 characters: 17KB with hinting, 15KB without
• latin: 218 characters: 30KB with hinting, 29KB without
• full: 476 characters: 65KB with hinting, 63KB without

Mulish Regular and Mulish Italic

Contains wght axis from 200–900

• ascii: 95 characters: 18KB with hinting, 13KB without
• latin: 232 characters: 29KB with hinting, 22KB without
• full: 677 characters: 51KB with hinting, 40KB without

If you want to see the full list of characters in a font file, drop it onto WakamaiFondue to see a list of the characters available.

Do I want the -hint or -nohint versions?

Read more at this blog post: Developing a Robust Font Loading Strategy for CSS-Tricks. TL;DR if you have a mostly MacOS audience or an audience that has high DPI displays, use the -nohint version. For more compatibility (and larger file size) use the -hint version.

Copy and paste some code

This example uses Latin subset without hinting. Use preload if the font is used prominently in your design. For brand-level typefaces or those used in very prominent headings we’ll usually want to preload them.

Pacaembu

<link rel="preload" href="/fonts/pacaembuvar-latin-nohint.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: Pacaembu;
  src: url(/fonts/pacaembuvar-latin-nohint.woff2) format("woff2");
  font-weight: 100 1000;
  font-display: swap;
  unicode-range: U+0-FF,U+131,U+152,U+153,U+2BB,U+2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}

Use unicode-range: U+20-7E; for US-ASCII.

For usage, we want to apply stylistic alternates to each element.

h1 {
  font-family: Pacaembu, sans-serif;
  font-feature-settings: "salt" 1;
}

When the font-feature-settings descriptor is better supported in @font-face, we’ll want to move this code.

Mulish

Careful here, don’t preload too much!

<link rel="preload" href="/fonts/mulishvar-latin-nohint.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/mulishvar-italic-latin-nohint.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: Mulish;
  src: url(/fonts/mulishvar-latin-nohint.woff2) format("woff2");
  font-weight: 200 900;
  font-display: swap;
  unicode-range: U+0-FF,U+131,U+152,U+153,U+2BB,U+2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face {
  font-family: Mulish;
  src: url(/fonts/mulishvar-italic-latin-nohint.woff2) format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0-FF,U+131,U+152,U+153,U+2BB,U+2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}

Roadmap

• [ ] Select a font loading strategy, copy and paste code