**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...
Markdown supported · ⌘↵ to post
What a well written, and thorough post.
So great to see such a rarely-seen level of effort!
Nice work!
Interesting article this would be a good alternative. So used to just using google fonts.
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?
Thanks for this incredibly informative article. 😎 It's amazing how complicated web fonts can be. This material is a must-know for people in website development.
Bruce Wells
OO PHP Developer
Great article. Thanks for sharing this knowledge. It is so important to give back, it just makes everything so much better. I never knew fonts were so involved.