Discussion on "A Practical Guide to Self-Hosting Web Fonts"

Tristan Guest · 2022-05-09T22:45:13.774Z

**Note**: If you're using Next.js 13, check out the font optimization updates that have shipped since this article was written. While spinning up my last project, I did what many of us do when considering font design: pick an appealing web-ready font...

Discussion on "A Practical Guide to Self-Hosting Web Fonts" | Hashnode

Victor Eke

Software developer specializing in front-end development and open-source, currently pursuing a bachelors degree in computer science.

May 13, 2022

Thanks for writing this amazing article Tristan Guest. I do have a few questions though. How will one specify different weights for a font downloaded from googlefonts?

Let's say I download the Inter font with different weights: 300, 400, and 600, and add them to a font folder. How will these weights be included in the @font-face property?

Tristan Guest

Software Developer | Oceanographer

May 14, 2022

Hi Victor Eke , I'd achieve this with multiple @font-face declarations. font-weight does accept two arguments (specifying a range), but that only applies if the src field URL points to a variable font file.

As far as I know, there's no way around needing a separate @font-face declaration for each hosted font file. Something like:

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("/fonts/inter-v11-latin-regular.woff2") format("woff2"),
    url("/fonts/inter-v11-latin-regular.woff") format("woff");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  src: local(""), url("/fonts/inter-v11-latin-900.woff2") format("woff2"),
    url("/fonts/inter-v11-latin-900.woff") format("woff");
}

Victor Eke

Software developer specializing in front-end development and open-source, currently pursuing a bachelors degree in computer science.

May 15, 2022

Wow, I never knew this. Thank you so much. 🎉 Tristan Guest

Search Hashnode

A Practical Guide to Self-Hosting Web Fonts

Responses(7)