The Typefaces project is now deprecated.
@DecliningLotus created FontSource which provides the same functionality as Typefaces but with automated releases & richer support for importing specific weights, styles, or language subsets.
To start using Fontsource, replace in your package.json any instances of "typeface-" with "@fontsource/".
Then change imports from e.g. "import 'typeface-roboto'" to "import '@fontsource/roboto/latin.css'".
Typeface packages will continue working indefinitely so no immediate changes are necessary.
NPM packages for Open Source typefaces — making it easier to self-host webfonts.
https://www.bricolage.io/typefaces-easiest-way-to-self-host-fonts/
Each typeface package ships with all the necessary font files and css to self-host an open source typeface.
All Google Fonts have been added as well as a small but growing list of other open source fonts. Open an issue if you want a font added!
Couldn’t be easier. This is how you’d add Open Sans.
npm install --save typeface-open-sansThen in your app or site’s entry file.
require("typeface-open-sans")And that’s it! You’re now self-hosting Open Sans!
It should take < 5 minutes to swap out Google Fonts.
Typeface assumes you’re using webpack with loaders setup for loading css and font files (you can use Typeface with other setups but webpack makes things really really simple). Assuming your webpack configuration is setup correctly you then just need to require the typeface in the entry file for your project.
Many tools built with webpack such as
Gatsby and Create React
App are already
setup to work with Typefaces. Gatsby by default also embeds your CSS in
your <head> for even faster loading.
If you’re not using webpack or equivalent tool that allows you to require css, then you’ll need to manually integrate the index.css and font files from the package into your build system.
The easiest way to find out if your favorite typeface is supported is by searching on NPM or in the packages directory in this repo.
I’d love to see every open source font on NPM! Open an issue if a favorite typeface of yours is missing. I’ve programmatically published all fonts from Google Fonts and am planning on doing the same with fonts hosted on FontSquirrel through their API.
require('open-sans/greek.css')?