Today I learned about FontSource

  • Written on: Mo Jan 2021
  • Last update: Mo Jan 2021

Using Google Fonts locally

Today I discovered that you can import Google fonts locally through a npm package called @fontsource. This package allows you to install only the required fonts you need by suffixing the package name with the font name.

It's usefull when you need the font available right away and not awaits for the request like in my SocialSplash project where it needs to be available when I generate the screenshot.

Per example, if you need to import locally the Robotofont, you can install the @fontsource/roboto package.

npm install @fontsource/roboto

Then you can import this font in your app simply by importing the CSS files. Note that you can import specific font weights like so:

import '@fontsource/roboto/400.css'
import '@fontsource/roboto/500.css'

Per this example, I've imported both 400 and 500 weights for Roboto, then you could just normally use it in your CSS.

font-family: 'Roboto', sans-serif;

You can view the available fonts for this dependency and it's usage at https://fontsource.github.io/search-directory/.