Today I learned about FontSource
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
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/.