Self-hosted open source fonts and icons via NPM with fontsource
2 min readJan 10, 2023
Self-hosting Google fonts is a must nowadays due to GDPR, but self-hosting fonts and icons brings a lot of benefits to your web applications:
- Reuse of current HTTP connections for the same domain instead of fetching fonts from Google
- Versioned fonts that stay the same. Did you know that Google updates fonts from time to time behind the scenes and you didn’t notice, but your users?
- GDPR compliance
- Offline support for PWA(Progressive web apps)
- Simple installation and usage for different open source fonts and icons
Let's look at an example that adds the Roboto font to our website project. As a basis we use the latest version from html5boilerplate.com. Download a copy and run the following commands:
npm install
npm install @fontsource/roboto --save-dev
Next step is to import the font in the css/main.css file and define it in the html tag like this:
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
@import '@fontsource/roboto';
html {
color: #000000;
font-size: 1em;
line-height: 1.4…