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

Stefan Pöltl
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…

--

--