Fontsource
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/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:
Arial
font instead ofInter
font.Expected behavior It should be using the
Inter
font.Screenshots
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.
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: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.)
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.
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?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
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",
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.
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 emptyfile-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:
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.
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.
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
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!
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
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.
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.
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
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
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