DEV Community

loading...

Discussion on: What's the most efficient way to load custom fonts on the web

Collapse
wuz profile image
Conlin Durbin

unicode-range and variable fonts are probably the fastest ways to do it!

I have this file on my personal site, which loads the Recursive font in two sections - the first is a tiny subset needed for English (the language I primarily write in). There is a great explanation of unicode-range here.

@font-face {
  font-family: 'Recursive';
  src: url('/fonts/recursive-0020_007F.woff2') format('woff2');
  unicode-range: U+0020-007F; /* The bare minimum for the English Language */
}

@font-face {
  font-family: 'Recursive';
  src: url('/fonts/recursive.woff2') format('woff2');
  unicode-range: U+00A0-00FF, U+0100-017F; /* additional glyphs */
}
Enter fullscreen mode Exit fullscreen mode

The other big win is using variable fonts - they limit the amount of code needed to deliver a wide range of fonts by encoding how the font changes at different widths, slants, and styles directly in the font file. Recursive is what I use, but there are a good number of other variable fonts out there!

recursive.design/
v-fonts.com/

Collapse
ben profile image
Ben Halpern Author

Thank you this is a really good reply! I did not know about unicode-range.

Collapse
wuz profile image
Conlin Durbin

Yeah, it's a great tool, but I don't see a ton of people working with it, but it's sooo good.