Self-hosted open source fonts and icons via NPM with fontsource

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…