Self-host Open Source fonts in neatly bundled NPM packages.

  • By fontsource
  • Last update: Jan 2, 2023
  • Comments: 17

Fontsource

Generic badge codecov Monthly Downloads Total Downloads License GitHub stars

An updating monorepo full of self-hostable Open Source fonts bundled into individual NPM packages!

Our full documentation and search directory can be found here. https://fontsource.org/

Alternatively, you can see the list of supported fonts in Markdown format here.

  • Self-hosting brings significant performance gains as loading fonts from hosted services, such as Google Fonts, lead to an extra (render blocking) network request. To provide perspective, for simple websites it has been seen to double visual load times. Benchmarks can be found here and here.

  • Fonts remain version locked. Google often pushes updates to their fonts without notice, which may interfere with your live production projects. Manage your fonts like any other NPM dependency.

  • Commit to privacy. Google does track the usage of their fonts and for those who are extremely privacy concerned, self-hosting is an alternative.

  • Your fonts load offline. On top of benefiting PWAs, often there may be situations, like working in an airplane or train, leaving you stranded without access to your online hosted fonts. Have the ability to keep working under any circumstance.

  • Support for fonts outside the Google Font ecosystem. This repository is constantly evolving with other Open Source fonts. Feel free to contribute!

API

Check out the documentation here.

Migrating from previous versions

See CHANGELOG.md for more details.

Adding New Fonts

For Open Source fonts that are not automatically updated by the Google ecosystem, we have a generic packager that builds CSS files for the project.

Make a request by creating an issue! If you wish to submit a PR yourself, check out the documentation on packaging the fonts yourself here.

Licensing

It is important to always read the license for every font that you use. Most of the fonts in the collection use the SIL Open Font License, v1.1. Some fonts use the Apache 2 license. The Ubuntu fonts use the Ubuntu Font License v1.0.

You can find their specific licenses on each package README.md.

Other Notes

Feel free to star and contribute new ideas to this repository that aim to improve the performance of font loading, as well as expanding the existing library we already have. Any suggestions or ideas can be voiced via an issue.

Vercel Banner

Github

https://github.com/fontsource/fontsource

Comments(17)

  • 1

    Vercel/Nextjs for some reason removes the fonts when using Webpack 5

    Describe the bug The fonts are not downloaded (or are being removed during build) when using Next.js with Webpack deployed to Vercel.

    To Reproduce Steps to reproduce the behavior:

    1. Go to https://fontsource.org/
    2. Its using the Arial font instead of Inter font.

    Expected behavior It should be using the Inter font.

    Screenshots image

    Additional context I'm actually reporting this bug because my application also has this problem and I can only "fix" it by rolling back to Webpack 4. And it was only a coincidence that I checked the doc website and saw that you also use Webpack 5 deployed on Vercel and had the same problem.

  • 2

    Sass files with font path variable

    Fontsource's .css files assume the font files are located at ./files/, which dictates where you must store them on your production. Build processes like Webpack can take care of this, but I rarely use complicated build tools like that, as the complexity quickly outweighs the benefits for less Javascript-centric contexts like Wordpress themes or static site generators

    An easy solution would be including nearly identical .scss files alongside the existing .css files. The only change would be adding a !default path variable at the top, like so:

    $font-file-path: './files' !default;
    
    /* montserrat-latin-400-normal*/
    @font-face {
      font-family: 'Montserrat';
      font-style: normal;
      font-display: swap;
      font-weight: 400;
      src:
        local('Montserrat Regular'),
        local('Montserrat-Regular'), 
        url('#{$font-file-path}/montserrat-latin-400-normal.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('#{$font-file-path}/montserrat-latin-400-normal.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    

    This would allow the path to be overridden when imported, adding a lot of flexibility in how Fontsource's fonts can be used without additional complexity.

    Additionally, it's easy to imagine more Sass variables that would enable powerful case-by-case customization that builds on Fontsource's generally reasonable defaults. (A short list: setting a different value for font-display, disabling use of local() fonts, setting a unicode-range based on the content in a build.)

  • 3

    Update Overpass Following Significant bugfix

    After a two year old, significant issue was originally identified, they've finally merged the fix in: https://github.com/RedHatOfficial/Overpass/pull/84

    This issue has been a big problem for our organization. Just requesting that @fontsource/overpass is updated with the new versions of these files.

  • 4

    fix(montserrat): use distinct variable names

    While I was trying to debug #424 I noticed that the default values of the variable font interfere with the default values of the normal font. Therefore I created this PR which makes sure all variable names are unique.

    A quick search revealed that there are about 200 more fontFaceVariable() definitions which probably also cause naming conflicts. Do we need to update all those manually?

  • 5

    Noto Sans font files missing

    Describe the bug i try to build a project with fontsource. but it tell me ./node_modules/@fontsource/noto-sans-jp/japanese-400.css Error: Can't resolve './files/noto-sans-jp-japanese-400-normal.woff2' in '/srv/demo/umami/node_modules/@fontsource/noto-sans-jp' at runMicrotasks ()

    To Reproduce

    git clone https://github.com/mikecao/umami.git
    cd umami
    npm i
    npm run build
    

    Expected behavior build pass

    Screenshots If applicable, add screenshots to help explain your problem.

    Additional context "@fontsource/inter": "^4.5.0", "@fontsource/noto-sans-jp": "^4.5.0", "@fontsource/noto-sans-sc": "^4.5.0", "@fontsource/noto-sans-tc": "^4.5.0",

  • 6

    Add a fallback for the font preview

    I added the "Fallback Outline" font that I have been working on as the fallback for the font preview. I set the preview to load the WOFF file with "all" in the subset field. The only problem is that there are not any WOFF2 files with "all" subsets. I was also wondering if there were actually WOFF files with an "all" subset in every single font. If this works, we can close https://github.com/fontsource/fontsource/issues/208.

  • 7

    Where did all the fonts go?

    I used to be able to clone this repo, which would include the woff2 files in the subfolder for each font, so I could just upload them and use them (outside the npm world). Now the files/ folder just has an empty file-list.json: e.g.

    https://github.com/fontsource/fontsource/tree/main/fonts/google/abel/files

    I'm wondering how to download the generated fonts now? I see there were some changes to the folder structure. I used to be on this commit which seems to be gone now:

    commit 2d39275d5f24236241ab79f3d835cd2141bd629c (grafted, HEAD -> main)
    Author: fontsource-bot <[email protected]>
    Date:   Sun Jan 30 00:42:46 2022 +0000
    
  • 8

    Add fallback family to the code sample

    Otherwise the default Times New Roman serif font will be used before the Open Sans loads.

    Generic fallback font family is considered as a good practice. It usually make font switch less obvious for users, so it’s good to have it in the code sample as a reminder.

  • 9

    Fontsource Search Directory

    Search Directory

    As this project has grown quite rapidly recently and isn't slowing down, I've been considering it to be appropriate for an official Fontsource search directory to be developed similar to https://google-webfonts-helper.herokuapp.com/fonts and https://fonts.google.com as we grow to be an Open Source hub for fonts NOT specific to Google.

    Data

    In preparation for something like this, all packages have a metadata.json file that contains all sorts of useful defining information that could be read and used by the directory. Examples such as here and here show that we can differentiate whether it is a Google Font or another type, etc.

    Of course, if there are better solutions to this, feel free to share your thoughts about that!

    Contribution

    I don't necessarily have the time to work on this project solo, however, I'd love to see if there are any others in this community who'd wish to help work on it instead! It'd be great to have a designer to initially mockup the directory to set a modern minimalistic theme before we begin development on it directly in a separate repo in this org.

    Let us know if you're interested in helping out! There are tons of technical challenges to overcome with this from the base framework we'll be utilising to controlling bandwidth. It's a bit of a large undertaking but hopefully fun to take on in the end.

  • 10

    Variable fonts

    Introduction: https://web.dev/variable-fonts/

    Not sure whether the service supports this, yet.

    We have found that fonts provided in the packages produced by this project are not variable, even when those same fonts are available as variable fonts from Google Fonts.

    Here is the upstream issue: https://github.com/majodev/google-webfonts-helper/issues/97

  • 11

    Preview Fonts More Easily

    Is your feature request related to a problem? Please describe. Searching for a font on your website feels unnecessarily difficult. No need to reinvent the wheel here, just copy what practically all other fonts-websites are doing.

    Describe the solution you'd like I want to be able to quickly scroll trough all available fonts, while having sensible filtering options to easily get what I'm looking for (e.g. type, weight, variable, etc.).

    Describe alternatives you've considered Google

    Additional context NEIN!

  • 12

    Font Request: Titillium Web Variable Font

    Font Name

    Titillium Web Variable Fonts

    Link to font source

    https://github.com/eliheuer/titillium-web-vf

    Link to font license

    https://github.com/eliheuer/titillium-web-vf/blob/master/OFL.txt

    Additional context

    No response

  • 13

    Added $type parameter to fontFaceVariableCustom mixin

    Added $type parameter to the fontFaceVariableCustom mixin, so you are able to use it for "full" and not only "wghtOnly". This issue is also reported here: #419

    SassError: No argument named $type.

  • 14

    Font Request: Optician Sans

    Font Name

    Optician Sans

    Link to font source

    https://github.com/anewtypeofinterference/Optician-Sans

    Link to font license

    SIL Open Font License, Version 1.1

    https://github.com/anewtypeofinterference/Optician-Sans/blob/master/LICENSE.md

    Additional context

    Thanks for packaging all these fonts! Your project makes my work better.

  • 15

    Font Request: Hubot Sans

    Font Name

    Hubot Sans

    Link to font source

    https://github.com/github/hubot-sans

    Link to font license

    https://github.com/github/hubot-sans/blob/main/LICENSE

    Additional context

    No response

  • 16

    Font Request: Mona Sans

    Font Name

    Mona Sans

    Link to font source

    https://github.com/github/mona-sans

    Link to font license

    https://github.com/github/mona-sans/blob/main/LICENSE

    Additional context

    No response

  • 17

    Font Request: RIT Rachana

    Font Name

    RIT Rachana

    Link to font source

    https://gitlab.com/rit-fonts/RIT-Rachana

    Link to font license

    https://gitlab.com/rit-fonts/RIT-Rachana/-/blob/master/LICENSE.txt

    Additional context

    No response