KyleAMathews/typefaces


NPM packages for Open Source typefaces

Language: CSS

Keywords: font, font-family, typeface, typography


Typefaces

NPM packages for Open Source typefaces — making it easier to self-host webfonts.

https://www.bricolage.io/typefaces-easiest-way-to-self-host-fonts/

Why

  • Self-hosting is significantly faster. Loading a typeface from Google Fonts or other hosted font service adds an extra (blocking) network request. In my testing, I’ve found replacing Google Fonts with a self-hosted font can improve a site’s speedindex by ~300 miliseconds on desktop and 1+ seconds on 3g. This is a big deal.
  • Your fonts load offline. It’s annoying to start working on a web project on the train or airplane and see your interface screwed up because you can’t access Google fonts. I remember once being in this situation and doing everything possible to avoid reloading a project as I knew I’d lose the fonts and be forced to stop working.
  • Go beyond Google Fonts. Some of my favorite typefaces aren’t on Google Fonts like Clear Sans, Cooper Hewitt, and Aleo.
  • All web(site|app) dependencies should be managed through NPM whenever possible. Tis the modern way.

What

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!

How

Couldn’t be easier. This is how you’d add Open Sans.

npm install --save typeface-open-sans

Then 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.

Alternatives without Webpack

Adding other fonts

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.

Other ideas to explore

  • Add subsetted version of every font.
  • Initially I’ve just added support for the Latin version of fonts. Would love to hear ideas for how to support other languages. Perhaps additional css files e.g. require('open-sans/greek.css')?
  • Ship fallback css helpers — figuring out your fallback css isn’t particularly easy. Perhaps there’s a way to automate this. E.g. if you’re using typeface X at fontsize Y with fallback font Z, here’s a function to generate the fallback css.
  • Explore futher optimizations for loading fonts. https://www.zachleat.com/web/comprehensive-webfonts/ has a long list. Most require painful per-project scripting. What if the best strategies could be automated?

Project Statistics

Sourcerank 16
Repository Size 11.6 MB
Stars 1,726
Forks 56
Watchers 24
Open issues 65
Dependencies 504
Contributors 8
Tags 75
Created
Last updated
Last pushed

Top Contributors See all

Kyle Mathews Mikael Brevik Ken Powers Pierrick Rouxel John Collins Ned Zimmerman Ilya Radchenko Floriel Fedry

Packages Referencing this Repo

typeface-noto-sans-sc
Noto Sans SC typeface
Latest release 0.0.71 - Published - 1.73K stars
typeface-noto-serif-tc
Noto Serif TC typeface
Latest release 0.0.75 - Updated - 1.73K stars
typeface-major-mono-display
Major Mono Display typeface
Latest release 0.0.71 - Published - 1.73K stars
typeface-charm
Charm typeface
Latest release 0.0.71 - Published - 1.73K stars
typeface-metropolis
Metropolis typeface
Latest release 0.0.74 - Updated - 1.73K stars
typeface-d-din
D-DIN typeface
Latest release 0.0.67 - Published - 1.73K stars
typeface-spacegrotesk
Space Text typeface
Latest release 0.0.66 - Published - 1.73K stars
typeface-sawarabi-mincho
Sawarabi Mincho typeface
Latest release 0.0.65 - Published - 1.73K stars
typeface-srisakdi
Srisakdi typeface
Latest release 0.0.65 - Published - 1.73K stars
typeface-noto-serif-kr
Noto Serif KR typeface
Latest release 0.0.75 - Updated - 1.73K stars
typeface-noto-serif-jp
Noto Serif JP typeface
Latest release 0.0.75 - Updated - 1.73K stars
typeface-notable
Notable typeface
Latest release 0.0.63 - Published - 1.73K stars
typeface-noto-sans-kr
Noto Sans KR typeface
Latest release 0.0.63 - Published - 1.73K stars
typeface-niramit
Niramit typeface
Latest release 0.0.63 - Published - 1.73K stars
typeface-kosugi-maru
Kosugi Maru typeface
Latest release 0.0.61 - Published - 1.73K stars
typeface-bai-jamjuree
Bai Jamjuree typeface
Latest release 0.0.61 - Published - 1.73K stars
typeface-chakra-petch
Chakra Petch typeface
Latest release 0.0.61 - Published - 1.73K stars
typeface-charmonman
Charmonman typeface
Latest release 0.0.61 - Published - 1.73K stars
typeface-fahkwang
Fahkwang typeface
Latest release 0.0.61 - Published - 1.73K stars
typeface-jua
Jua typeface
Latest release 0.0.61 - Updated - 1.73K stars

Recent Tags See all

v1.1.1 August 29, 2019
v0.0.77 August 22, 2019
v0.0.76 July 17, 2019
v0.0.75 July 17, 2019
v0.0.74 May 29, 2019
v0.0.73 February 28, 2019
v0.0.72 February 28, 2019
v0.0.71 December 23, 2018
v0.0.68 October 08, 2018
v0.0.67 October 07, 2018
v0.0.66 October 07, 2018
v0.0.65 September 30, 2018
v0.0.65 September 30, 2018
v0.0.64 September 30, 2018
v0.0.62 September 30, 2018

Something wrong with this page? Make a suggestion

Last synced: 2019-07-17 21:02:13 UTC

Login to resync this repository