fontsource / fontsource

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

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.

• Self-hosting fonts can significantly improve website performance by eliminating the extra latency caused by additional DNS resolution and TCP connection establishment that is required when using a CDN like Google Fonts. This can help to prevent doubled visual load times for simple websites, as benchmarked 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. This feature is beneficial for Progressive Web Apps and situations where you have limited or no access to the internet.

• 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

Always make sure to read the license for each font 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.

fontsource's Issues

Font Request: Manrope

Font Name
Manrope

Link to font source
https://github.com/sharanda/manrope

Link to font license
https://github.com/sharanda/manrope/blob/master/OFL.txt

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:
majodev/google-webfonts-helper#97

Archivo font not functional in React: Chrome & Firefox

Describe the bug
Following the docs for fontsource-archivo attempting to load the index.css,

Firefox encounters a sanitizer error

downloadable font: rejected by sanitizer (font-family: "Archivo" style:normal weight:400 stretch:100 src index:0) source: http://localhost:3000/files/archivo-latin-400-normal.woff2

Chrome fails to load the fonts:

To Reproduce
Steps to reproduce the behavior:

1. add import "fontsource-archivo/index.css" in your entry file
2. Add 'Archivo' as the first entry in your font stack
3. Open in either Chrome or firefox

Expected behavior
Font loads as expected

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

Additional context
Typescript, React, Jss

Cooper Hewitt

Cooper Hewitt

Link to font source
This was on Typefaces, but the font files seem to be missing now: https://github.com/KyleAMathews/typefaces/tree/master/packages/cooper-hewitt

You can get the font files from an older version: https://unpkg.com/browse/[email protected]/

Link to font license
SIL OFL
https://github.com/KyleAMathews/typefaces/blob/master/packages/cooper-hewitt/SIL%20Open%20Font%20License.txt

Additional context
Until this is on Fontsource, then the instructions from the Typefaces README are broken:

To start using Fontsource, replace in your package.json any instances of "typeface-cooper-hewitt" with "fontsource-cooper-hewitt".

October Crow

Font Name
October Crow by Chad Savage, SinisterVisions.

Link to font source
Pretty well distributed as a free font around the web, here is a few sources:

• DaFont
• 1001Fonts
• FontMeme
• wfonts

Link to font license
No format license, but I contacted the author about this. (see Additional content). Within the font's .zip the following declaration is made:

October Crow Font by Chad Savage
http://www.sinisterfonts.com

Created 2010, hand-lettered while watching The Crow on Devil's Night 2010. Turned into a PC font on Halloween, 2010.

This is a free font, and I mean FREE. Use it however you want, for whatever you want. If you make something cool with it, I'd love to see it - email me at [email protected] and tell me about it. If you offer it for download on your own font site, PLEASE include this Read Me. That's not too much to ask, is it?

This font is intended for specialty and graphic uses. It will look just awful if used in a paragraph format.

For more free fonts and other downloadable goodies, visit http://www.sinisterfonts.com.

FOR INSTRUCTIONS ON HOW TO INSTALL/USE THIS FONT, visit http://www.sinisterfonts.com, or just look it up on Google. Seriously. Don't email me and ask - this information is easily found with a 20-second search.

Additional context
I contact the owner/author of October Crow via email on 12/28/2020 regarding the license issue. A transcript of his reply can be seen below.

My email to him:

Good day,

I love your October Crow font, its absolutely spooky, and awesome.

I'm emailing you because I'm busy with a fan project for Phasmophobia (a
Steam game about ghost hunting) and I was hoping I could use your font
as part of a small webapp. I have read your message regarding "This is a
free font, and I mean FREE" (from here
https://blogfonts.com/october-crow.font ), and as much as I want to
simply use it there is a small licensing issue I just need to clear up.

The way I can host your font will need to go through an Open Source font
package called fontsource found here:
https://github.com/fontsource/fontsource.

How it works is you submit a request to add open-sourced/free fonts to
be added to their repository of web font which can then be loaded into
any webapp that uses React; which nowadays is pretty much everything
that has a JavaScript frontend. Now, to get the font accepted I need to
give a license agreement that legally declared it is as free and anyone
can use it as is. Examples of this is SIL OFL, Apache 2, MIT, or Ubuntu
Font licensed fonts. These fontsource guys are very strict about this:
https://github.com/fontsource/fontsource#licensing

Is it possible you have some formal license declaration on your website
I can send them so that October Crow can be added to the Open Source
font repo?

And if all if this unappealing, well thanks for reading and making an
awesome font regardless ☺

Regards,

JC Bailey

PS: You can see a demo of my fan project here:
https://thelunararmy.gitlab.io/react-phasmo-ghostid/ (i'm cheating a
little an using a .png currently)

His reply to me:

Hi, JC -

I'm afraid I don't have any licenses for the fonts (one of the many reasons they're free - so I don't have to monkey with that end of things). The website (SinisterFonts.com) and ReadMe files that accompany each font declare them 100% free. That's what I got.

Chad

Proof:

Customizable font-display value

As far as I can tell, all fonts have a setting of font-display: swap; which cannot be changed. For my applications I would prefer font-display: fallback, which has the following properties: a very short blocking period and a short swap period, after which the font is not swapped anymore, because if the font does not load it is not the end of the world (in my case), while a late swap might impact user experience in a bad way.

https://calendar.perfplanet.com/2020/a-font-display-setting-for-slow-connections/ also has some interesting insights about why font-display: fallback or font-display: optional can be better settings for slow connections. Ideally there would be a way to select the desired font-display strategy, as different applications might have different requirements.

Thanks for the great package! It is a huge step up from typeface-inter, which I used before.

fontsource-open-sans-condensed is missing a default export file `index.css`

Describe the bug
Switching from the typefaces package to this one.

There is no default index.css file in the open-sans-condensed package, even though its package.json specifies an entry point of "main": "index.css".

To Reproduce
Steps to reproduce the behavior:

1. Add "fontsource-open-sans": "^3.0.9", and "fontsource-open-sans-condensed": "^3.0.9", to package.json
2. Run yarn install
3. Add import 'fontsource-open-sans'; and import 'fontsource-open-sans-condensed'; to React's index.js
4. Open-Sans loads correctly, but Open-Sans-Condensed fails to load with the error Module not found: Can't resolve 'fontsource-open-sans-condensed'

Expected behavior
That there would be a default export for the open-sans-condensed package, like there is for the open-sans package, so that folks could keep their import statements consistent.

If this is intentional, or due to a technical limitation, please let me know. If not, I would appreciate a fixed version at some point in the future.

Screenshots

Additional context
Not that I can think of.

Font Request: Aileron

Font Name
Aileron

Link to font source
https://github.com/reinhart1010/aileron

Link to font license
https://github.com/reinhart1010/aileron/blob/master/LICENSE

Additional context
Aileron was part of typeface, would be nice to get it here so we can migrate.

Jetbrains Mono - 400, 500, 700 specific stylesheets give an error

Describe the bug
I'm not able to load the 400, 500, and 700 weights specifically via their respective stylesheets in JavaScript. I've used this same technique to load specific font weights from Inter (open source) and Sora (google font) via fontsource.

To Reproduce
Steps to reproduce the behavior:

1. install fontsource-jetbrains-mono (I'm using yarn if that matters)

2. Add stylesheets to JavaScript:

import 'fontsource-jetbrains-mono/400.css'
import 'fontsource-jetbrains-mono/500.css'
import 'fontsource-jetbrains-mono/700.css'

3. Console error:
   Module not found: Error: Can't resolve 'fontsource-jetbrains-mono/400.css'
Module not found: Error: Can't resolve 'fontsource-jetbrains-mono/500.css'
Module not found: Error: Can't resolve 'fontsource-jetbrains-mono/700.css'

Expected behavior
I expected those weights to load based on the Fontsource page here that says they are available.

If I do a generic import (import 'fontsource-jetbrains-mono') there is no error.

PostCSS Plugin Integration

Inspired and derived from Font Magician, I feel that it would be great for us to have our own flavour that directly supports Fontsource self-hosted fonts. The intent is to provide an alternative installation method for those who do not use a bundler like Webpack or compiler like Sass (Tailwind users especially).

This is a continuation of #121, but I decided to make this issue to focus on PostCSS specifically whilst leaving the original issue open-ended to other base solutions.

Checklist:

• Create a new /plugins directory for maintaining the integration (room for other separate packages could be included such as react-preload #83)
• Develop plugin to emulate full functionality of other installation methods
• Add options to customize values e.g. font-display, customFontFilePaths
• Publish under @fontsource/plugin-postcss

Anyone is welcome to provide input or take on this if they are interested. It personally will take me a while to catch up on this aspect of Fontsource since I'm a little busy currently but also other things need a bit more attention within the repo imo.

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

Montserrat tabular figures not working

Describe the bug
I'm trying to use Montserrat with tabular figures (font-variant-numeric: tabular-nums) but it does not seem to work.
According to JulietaUla/Montserrat#101 this should be supported in the Montserrat font.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://jsfiddle.net/marceloverdijk/mvwg8Lnj/
2. Click on Run

Expected behavior
Second table should have tabular nums (so every num uses the same width) but does not have it.

Screenshots

Additional context
I also used my local installed Montserrat font in the @fontface definition like:

  src:
    local('Montserrat Regular '),
    local('Montserrat-Regular'),

and it that case it does work.

Not sure if this is a bug for fontsource.
What source is fontsource using for this font? I understand e.g. Google Font also does not support the tabular figures.

Integrate with Fontship

I am the primary developer of Fontship, a font building package that aims to simplify the build and release process for font projects and enable more collaborative workflows specifically benefiting open source font projects. I've been developing it under the auspices of The League of Moveable Type because that was their font collection was the initial impetus for the work. I was trying to package their fonts into distro packages and frustrated at how different the build and release systems for each font were.

I've since joined up with The League in the capacity of cleaning up their repositories and developing Fontship. So far I've helped update and release new packaging for Raleway and League Spartan. Very shortly now League Mono will join that list, with the rest of the foundry's library to follow. Another open source font I've been publishing through Fontship is Libertinus.

I think we should probably have a talk about how to integrate Fontship with Fontsource. Clearly this is of mutial interest. First I see that The League on your list of open source foundries that you support even outside of being available on Google Fonts (some are, some are not). That's great! A few of them are out of date, but I'm glad to see packages anyway. Of course updating them would be in order, but I'd also like to see closer integration.

A couple of issues I see need airing out:

• At first glance at least Fontsource appears to rely on upstream font projects committing font build artifacts to their Git repositories. This is a serious anti-pattern that I consider anathema, is finally starting to be discouraged by Google Fonts (one of the primary early drivers of this terrible workflow), and isn't even too kosher by GitHub TOS.

• Second I would like to specifically enable font project owners to publish their own NPM packages. I don't have an issue with a third party publishing them under an obvious namespace such as fontsource is doing, so that isn't a criticism of the project, just stating my goal that font projects themselves would be able to publish "theirfont-webfont" or similar packages in addition to you also maybe publishing "fontsource-theirfont" packages.

• Versioning is an issue. I'm not too keen on the NPM packages being a miss-match for the actual font versions. I'm a firm SemVer supporter, but the font ecosystem is kind of limited by the OFF/M$OT specs that specify a two segment version string. For Fontship I am mandating the use of OpenFV compatible versioning. This is a lot better than many current font projects do, but still doesn't make to SemVer very consistently.

There are two open issues on Fontship relevant to this, theleagueof/fontship#88 and theleagueof/fontship#77. Fontship already generates various formats including webfont (WOFF & WOFF2) builds by default. What we don't do yet is generate any CSS templates to ease use as a webfont. I would be interested in hearing your suggestions on how that should be done, and also on generating NPM packaging.

In my head at least an ideal solution would be a fontship make npm or similar target that would generate a package ready to publish to NPM. This target could be run from CI jobs (as currently can be done for other distribution packaging) and automatically published to NPM for tagged releases. I would expect that any repository that was laid out to be Fontship ready would also be very easy to generate Fontsource packages from because they will be so normalized, but you will need to use releases not repository tracked binary files.

Stop generating 'normal' CSS files

Specification

As an attempt to reduce unnecessary file generation and clutter, as well as follow closer to the import style of Google's Font API, I'm suggesting to completely remove all -normal files in favour of solely keeping them in weight-specific files. The current behaviour for -italic files will remain.

Current:

import fontsource-roboto/400.css // Contains normal AND italics
import fontsource-roboto/400-normal.css // Only normal style
import fontsource-roboto/400-italic.css  // Only italic style

New:

import fontsource-roboto/400.css // Contains only normal style
import fontsource-roboto/400-normal.css // No longer exists
import fontsource-roboto/400-italic.css // Only italic style

Reason

Since the italics style is a very niche selection, it doesn't make sense for it to be included in the default main imports unless specified. Removing the need for specific files for normal style will reduce the file count by a huge margin, reducing the complexity of each package.

For example, Noto Sans JP has 39 CSS files, of which 18 of them are -normal files.

I'd want to implement this breaking change when we have other more impactful breaking changes that we could possibly add. This is just an idea for the future.

Preload Fonts

Using fontsource, how can one preload a font as to prevent a flash of faux-text?

import React from "react";
import { Helmet } from "react-helmet";
import "fontsource-inter";

export default function App() {
  return (
    <Helmet>
      <link
        rel="preload"
        as="font"
        href={/* ? */} // <----------
        type="font/woff2"
      />
    </Helmet>
  );
}

This issue is similar to another issue faced by typeface.

Replace import methods for Webpack users

Specification

The current import methods can be argued to be a little unclean and excessive looking like:

import "fontsource-roboto/400-italic.css"
import "fontsource-roboto/500.css"
import "fontsource-roboto/900.css"

Instead, by changing the main file to an index.js redirect file, we could change imports for Webpack users to look like this:

import { 400i, 500, 900 } from "fontsource-roboto"

I'm not sure if this above example works with CSS loader in Webpack, but this is a fleeting idea for now.

This could be further utilised if the complexity of the project grows in reference to #64 and #83, otherwise, we'd have to define imports for these features with another messy filepath import.

Reason

The change could clean up how messy imports may look if using many weights and styles, whilst setting up a foundation for extra potential components and features for the future that adds to the imports.

It does not change anything for anyone manually importing via filepath or otherwise as many non-Webpack users are dependent on that method, but simply offers another alternative import method for Webpack users.

This is, however, a breaking change as the default import for fontsource-<package> would lead to an index.js instead of typically 400.css.

This would also indirectly resolve #68.

Default Variables for Sass Mixins

Continuing on from #64. Suggestion and quoted content attributed to @cbirdsong.

The proposal suggests that the mixins should include default variables to reduce repetitive code and become more manageable.
e.g. $fontsourceDisplay: swap !default; or $fontsourceWeight: 400 !default;.

For defaults, relying on the mixin arguments is fine for things that are likely to change each time you call the mixin, but it seems really unlikely you'd change font-display, file path and character set for each individual typeface. That feels like an advanced feature and it's good the mixin allows for it, but it introduces a lot of repetition.

I imagine the far more common scenario is someone deciding "we're using font-display: optional; and keeping our compiled files in /dist/", and those people have to repeat those instructions to each "@include fontFace` over and over again. Compare these two code blocks:

@use "@fontsource/open-sans/scss/mixins" as OpenSans;
@use "@fontsource/barlow-condensed/scss/mixins" as Barlow;

@include OpenSans.fontFace($fontDir: "/dist/node_modules/@fontsource/open-sans/files", $display: optional);
@include OpenSans.fontFace($fontDir: "/dist/node_modules/@fontsource/open-sans/files", $display: optional, $style: italic);

@include OpenSans.fontFace($fontDir: "/dist/node_modules/@fontsource/open-sans/files", $display: optional, $weight: 700);
@include OpenSans.fontFace($fontDir: "/dist/node_modules/@fontsource/open-sans/files",  $display: optional, $weight: 700,  $style: "italic");

@include Barlow.fontFace($fontDir: "/dist/node_modules/@fontsource/barlow-condensed/files", $display: optional, $weight: 600);
@include Barlow.fontFace($fontDir: "/dist/node_modules/@fontsource/barlow-condensed/files",  $display: optional, $weight: 600,  $style: "italic");

@use "@fontsource/open-sans/scss/mixins" as OpenSans;
@use "@fontsource/barlow-condensed/scss/mixins" as Barlow;

$fontsourceDir: "/dist/node_modules/@fontsource/"
$fontsourceDisplay: optional;

@include OpenSans.fontFace($weight: 400, $style: normal);
@include OpenSans.fontFace($weight: 400, $style: italic);

@include OpenSans.fontFace($weight: 700, $style: normal);
@include OpenSans.fontFace($weight: 700, $style: "italic");

@include Barlow.fontFace($weight: 600, $style: normal);
@include Barlow.fontFace($weight: 600,  $style: "italic");

The second way leads to much more maintainable code than the first. You can understand what typefaces are being loaded at a glance*, adding another weight is a simple copy/paste, and modifying the file path requires editing only a single line.

Importing variable fonts with Sass

(Continuing from #64)

I've not figured out a great way to load a variable font with the current Sass mixin. Here's what I've got in a project right now:

@use "@fontsource/raleway/scss/mixins" as Raleway;

$font-file-path: "/wp-content/themes/a-cool-theme/node_modules/";

$fontId: "raleway";
$style: normal;
@include Raleway.fontFaceCustom(
	$style: normal,
	$weight: 100 900,
	$woff2Path: $font-file-path + "@fontsource/#{$fontId}/files/#{$fontId}-latin-variable-wghtOnly-#{$style}.woff2",
	$woffPath: null,
	$unicodeRange: true
);
$style: italic;
@include Raleway.fontFaceCustom(
	$style: italic,
	$weight: 100 900,
	$woff2Path: $font-file-path + "@fontsource/#{$fontId}/files/#{$fontId}-latin-variable-wghtOnly-#{$style}.woff2",
	$woffPath: null,
	$unicodeRange: true
);
//repeat with new $fontId for other faces

The issues with using fontFaceCustom:

• You have to manually construct the path variable. $fontId and $style have to be declared outside the @include so they can be used in the path variables, and $style again inside the mixin so it can be used by the mixin.
• There is no way to avoid including a url() format("woff"). (null produces url("") format("woff").) I thought about Including a single non-variable .woff weight as a fallback, but I assume older browsers will stop parsing the @font-face as soon as they hit the the multi-value font-weight.

Fonts are not loading when a subset is imported to css

Hi,

Not sure if this is a bug, but I spent a whole day trying to figure what the problem was.

I use fontsource in a Gatsby project like this:

@import "~fontsource-montserrat/400.css"
@import "~fontsource-montserrat/500.css"
@import "~fontsource-montserrat/600.css"

But if I choose a subset as shown below, the fonts do not load on build:

@import "~fontsource-montserrat/latin-ext-400.css"
@import "~fontsource-montserrat/latin-ext-500.css"
@import "~fontsource-montserrat/latin-ext-600.css"

For example, in 400.css files, latin-ext part is seen like this:

/* montserrat-latin-ext-400-italic*/
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url('./files/montserrat-latin-ext-400-italic.woff2') format('woff2'), url('./files/montserrat-all-400-italic.woff') format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

But in latin-ext-400.css it is different:

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

In the one that is working 2 things are different.

1- No local() test first
2- woff format file is -all- instead of -latin-ext-

This may be a bug, or something with my setup. I didn't have a chance to test on another machine. Opening this so that others won't lose hair if it happens to them. :)

Add Material Icons fonts

Is your feature request related to a problem? Please describe.

When querying fonts.google.com, font families "Material Icons" and "Material Icons Outlined" don't appear, but Google does host them:

https://fonts.googleapis.com/icon?family=Material+Icons
https://fonts.googleapis.com/icon?family=Material+Icons+Outlined

https://fonts.googleapis.com/css2?family=Material+Icons
https://fonts.googleapis.com/css2?family=Material+Icons+Outlined

Describe the solution you'd like

Packages fontsource-material-icons and fontsource-material-icons-outlined

Describe alternatives you've considered

The icons do exist elsewhere: https://github.com/material-icons/material-icons

Variable fonts: some files or file references are missing

Describe the bug
Some files are missing, or referenced wrongly.

To Reproduce
Steps to reproduce the behavior:

1. Install fontsource-public-sans

2. Import fontsource-public-sans/variable-full.css

3. Build project

4. See error

    ./node_modules/fontsource-public-sans/variable-full.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ref--5-oneOf-5-2!./node_modules/fontsource-public-sans/variable-full.css)
    Error: Can't resolve './files/public-sans-latin-variable-full-italic.woff2' in '<...>/node_modules/fontsource-public-sans'
   

Expected behavior
File is found, font loads.

Additional context
The published package has these files containing variable in their name in its files directory:

• public-sans-latin-ext-variable-wghtOnly-italic.woff2
• public-sans-latin-ext-variable-wghtOnly-normal.woff2
• public-sans-latin-variable-wghtOnly-italic.woff2
• public-sans-latin-variable-wghtOnly-normal.woff2

Yet the variable-full.css file is referencing

• ./files/public-sans-latin-variable-full-italic.woff2
• ./files/public-sans-latin-ext-variable-full-italic.woff2
• ./files/public-sans-latin-variable-full-normal.woff2
• ./files/public-sans-latin-ext-variable-full-normal.woff2

This problem appears to exist in other variable fonts too, such as fontsource-work-sans.

Font Request: FG Virgil

Font Name
FG Virgil

Link to font source
http://www.eaglefonts.com/fg-virgil-ttf-131249.htm

Link to font license
Unknown, but hopefully acceptable for this repo

Additional context
Font is used by great excalidraw app :)

Supporting non-open source fonts

Is your feature request related to a problem? Please describe.
I have a use case where a client has provided proprietary fonts, but I'd like to use one single approach to self-hosting fonts.

Describe the solution you'd like
Is there a way I can leverage the functions offered through font-source but perhaps a parameter or mode to point it to a local folder rather than the standard import? or similar?

Font Request: Metropolis

Font Name
Metropolis

Link to font source
https://github.com/chrismsimpson/Metropolis

Link to font license
Unlicensed

importing to material-ui using webpack

Describe the bug
I don't understand why the material-ui website redirected me to this, there was no way to make this package work,

To Reproduce

entrypoint: 
import 'fontsource-exo'

webpack.config.js
module.exports = {

  entry     : './src/main.tsx',
  module    : { rules: [ 
    { test: /\.(ts|tsx)$/, use: [ { loader: 'ts-loader', options: { transpileOnly: true } } ]},

    {
      test: /\.css$/i,
      use: ['style-loader', 'css-loader'],
    },
    {
      test: /\.(woff|woff2|ttf|eot)$/,
      use: 'file-loader?name=fonts/[name].[ext]!static'
     },
     {
      test: /\.(woff|woff2|ttf|eot)$/,
      use: [
        {
          loader: 'file-loader',
        },
      ],
    },

  ] },
  resolve   : { extensions: [".js", ".jsx", ".json", ".ts", ".tsx"] },
  mode      : 'development',
  devtool   : "inline-source-map",
  devServer : { contentBase: './dist'},
  plugins   : [ new (require('html-webpack-plugin'))({ template : 'dist/index.html'})]
}

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

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

Additional context

downloadable font: rejected by sanitizer (font-family: "Exo" style:normal weight:400 stretch:100 src index:0) source: http://localhost:8080/fonts/exo-latin-400-normal.woff2!static
downloadable font: rejected by sanitizer (font-family: "Exo" style:normal weight:400 stretch:100 src index:1) source: http://localhost:8080/fonts/exo-all-400-normal.woff!static

export default __webpack_public_path__ + "6c08c76589e8e6138328e75baca124c4.woff2";

[Google Fonts] Add Montserrat

Font Name
Montserrat

Link to font source
https://fonts.google.com/specimen/Montserrat?query=montserrat

Link to font license
Open Font License

NPM packages out of date

fontsource- namespaced packages have a wide range of published versions on NPM, most ranging from 3.0.0-3.0.11. I've yet to see published versions in the 3.1.* range.

I first noticed this attempting to install [email protected], but the most recently published version is 3.0.5, from four months ago.

I'm eager to see the 3.1.2 package versions since the (hopefully) contain the variable binaries (many, many thanks for those btw). 🙏

Use local font first if present on users system

Hey guys thanks for the awesome work hosting all these fonts! I was wondering would it make sense to defer to a user's local system font if present, i.e. changing the @font-face definition to something like:

src: ('Open Sans')

This way we could save the user having to download the font? What do you guys think? Thanks!

Update documentation with @use for Sass implementation

Continuing from #64.

Node Sass/libsass has been deprecated in favour of Dart Sass. That means we should update our documentation accordingly to match the latest standards expected by this project. We should refer to @use instead of @import. Of course, there should be a section for those using older software and have no other option than to use @import.

Example code:

@use "@fontsource/open-sans/scss/mixins" as OpenSans;
@use "@fontsource/barlow-condensed/scss/mixins" as Barlow;

$fontsourceDir: "/dist/node_modules/@fontsource/"
$fontsourceDisplay: optional;

@include OpenSans.fontFace($weight: 400, $style: normal);
@include Barlow.fontFace($weight: 400, $style: normal);

Obligatory mention to @cbirdsong.

Scoped Packages

This is changing the Fontsource package names from fontsource-<font name> to the scoped @fontsource/<font name>, which means everyone would have to redownload the renamed package from NPM.

After randomly reading the Emotion 11 blog post, I saw it's somewhat acceptable to just rename packages and migrate them to new namespaces on a breaking change. However, Fontsource is on another scale as it has almost 1100 packages that would have to migrate over to the new namespace.

Why?

The only benefits associated with this is:

• We never have to worry about package name conflicts as we have our own namespace. No other random developer can upload a package under the fontsource scope. While I believe it is still possible to contact NPM support to gain rights to a taken package name that blatantly uses our upload format, it isn't guaranteed to work and is messy, to say the least.

• Possible impersonators may upload under the fontsource name which could be an entry point for one of those famous NPM package malware stories. If it is under @fontsource, you know it is authentic.

• All packages would be stored in the same scoped folder in node_modules, which may make it easier for developers in some niche cases.

Cons:

• Breaking change to migrate. It is controversial to displace so many developers for a minor change such as this.

I'd love to hear some opinions and whether this should be included in the next breaking change update or not. In the long term, I agree this may be the best solution moving forward and I'm inclined to approve this, but I'm more than open to change my mind here.

documentation request: how to force load of static version of font that can be variable (if possible)

Some text on a website of mine with fontsource-exo-2 broke recently due to this rendering bug. The only mitigation given in that issue is not using a variable font, but it's not clear to me how to load the static version, if that's even possible. Some clarity around this (even just a sentence or two) in the docs would be great!

Font Request: PlusJakartaSans

Font Name
PlusJakarta Sans

Link to font source
https://github.com/tokotype/PlusJakartaSans

Link to font license
https://github.com/tokotype/PlusJakartaSans/blob/master/LICENSE.md

Additional context
designed by https://tokotype.com

Add individual links to search directory for each font

Adding links to the search directory would be useful for easy acsess for those wanting to see a preview or information about the font. We can take advantage of the search directories url hash which has the search directory url, then a # symbol, then the id of the font. Fontsource search directory automatically sets the url when you click on a font.

For example, on Roboto's README.md we could have:

Fontsource Roboto

The CSS and web font files to easily self-host the “Roboto” font. Please visit the main Fontsource monorepo to view more details on this package. To preview the font, open it with the fontsource search directory.

Charis Font

First and foremost, thanks for making this awesome library! It's a fantastic alternative to Google Fonts for the reasons you mentioned in the README.

Font Name
Charis

Link to font source
https://software.sil.org/charis/

Link to font license
SIL License (on the linked page above at the bottom)

Additional context
We use this font for rendering PDFs for legal documents at @NeonLaw (https://github.com/NeonLaw/codebase/issues/903).

Changelog Management

Fontsource goes through many types of different updates, however, developers may sometimes remain confused whether an update is associated with an update from the font source itself, or if it is a change in how the repository is creating libraries either through a feature addition or bug fix.

I'm quite frankly lost on choosing the best method to maintain changelogs for every library Fontsource publishes.

There are quite a few monorepo integrations for semantic-release:

• atlassian/lerna-semantic-release
• dhoulb/multi-semantic-release
• pmowrer/semantic-release-monorepo

There are a bunch more, but I believe all these solutions feel over-engineered and unreliable to implement into our build chain.

My current thought process is to create our own solution that hooks into our code directly to determine whether it is a direct source update or a change from Fontsource itself (retrieving those specific update details via a manually, possibly automated, maintained changelog in the main repo) and generate the individual changelog for each library alongside all the other files that are built with each build.

If anyone has any better ideas, I'd love to hear them. Else I might tackle this issue in a few weeks and see what we end up with.

Breaks gatsby-plugin-preload-fonts when used as drop in replacement for typeface modules

Describe the bug
I stumbed across this project today as a recommended drop in replacement for typeface modules when used with gatsby. However after replacing it, it did break usage with gatsby-plugin-preload-fonts

To Reproduce
in gatsby-browser:
import "fontsource-rubik";
import "fontsource-roboto-mono";

install gatsby-plugin-preload-fonts and run it following README instructions.

Run webpagetest.org or similar to see 404 when loading fonts (like this: https://www.webpagetest.org/result/201212_DiYE_759e9dc71bfb287e699a16690c9c6c70/)

Expected behavior
fontsource works as drop in replacement for typeface

Screenshots

Additional context
Also the font files appear to be bigger than from typeface. They were around 12-17kb consistently now they appear to be above 30kb?

Rebuild all non-Google fonts to follow v3 format

Problem

When 3.0.x was released, there were breaking changes that changed how we imported fonts, from fontsource-<package>/<subset>-<weight>-<style>.css to fontsource-<package>/<weight>-<style>.css since it was no longer necessary to specify subsets with the new unicode-range feature.

Unfortunately, the non-Google fonts that were manually added did not follow through with the update and still follows the old subset import method, primarily because they do not have any unicode-range data for us to use.

This has led to confusion from the lack of consistency to cause situations such as #91.

Solution

To resolve this, all these fonts should be repackaged with the default subset used when there isn't any subset specified in the import, irrespective of whether it has unicode-range data or not. That will need changes made to the generic packager and rebuild scripts.

Some binaries missing file extensions

e.g. https://github.com/fontsource/fontsource/blob/master/packages/inter/files/inter-latin-variable-full-oblique

I assume this is also meant to be woff2 but it was published without a file extension.

Inter: Italics missing

Describe the bug

The Inter font does not have the italic styles. The <weight>.css and <weight>-normal.css files are identical.

Expected behavior

There should be an italic variant. Would also be nice if you could support the variable font. 🎉

Comic Mono

Font Name
Comic Mono

Link to font source
https://github.com/dtinth/comic-mono-font

Link to font license
https://github.com/dtinth/comic-mono-font/blob/master/LICENSE
MIT

Additional context
Comic Mono is a fork of Comic Shanns with updated metrics.

Thank-you!

Hey @DecliningLotus - I just wanted to say this is a great resource and thank-you for the work on it. I have noticed the problems with typeface that you have also noted. Thanks for the work into this. Feel free to close this issue once you see it. Just wanted to note the effort you have put into this!

I am using it on my project gatsby-theme-catalyst now for one theme and will transition some of the other fonts/projects I have to this.

Keep it up!

Usage with Webpack + CSS + PostCSS (No SASS)

Is your feature request related to a problem? Please describe.

I have a project that does not use SASS. Instead, we prefer to use CSS with PostCSS. I think this is a really cool project that has been missing in my arsenal of frontend development. However, there is no clear guide on how to use this package with PostCSS.

Describe the solution you'd like

Here is my best attempt at integrating this package into a Webpack + CSS + PostCSS project:

Requirements

• wepback
• style-loader
• css-loader
• [email protected]
• [email protected]
• [email protected]
• [email protected]

Note: I added postcss* versions because the version matching is pretty fragile.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader', options: { importLoaders: 1, modules: true } },
          { loader: 'postcss-loader' },
        ],
      },
    ],
  },
};

postcss.config.js

module.exports = {
  plugins: [
    'postcss-import',
    ['postcss-url', { url: 'inline' }],
  ],
};

This particular solution will inline the fonts with the CSS payload. There is a way to extract the CSS + fonts into their own files but that is beyond the scope of this guide.

some.css

@import "fontsource-open-sans/400.css";
@import "fontsource-open-sans/600.css";

:root {
  --font-family: 'Open Sans', sans-serif;
}

Describe alternatives you've considered

Another helpful guide would be to extract the CSS and/or fonts into their own asset with Webpack.

Font request: Source Han / Noto CJK (Full version)

Font Name
Ensure it is an Open Source downloadable font.

• Sans: Noto Sans CJK / Source Han Sans
• Serif: Noto Serif CJK / Source Han Serif

Names on both sides of slash refers to the same font, which is branded differently by Adobe and Google.

Link to font source
Preferably Github, however, main website is also acceptable.

• Sans: https://github.com/adobe-fonts/source-han-sans/tree/release/
• Serif: https://github.com/adobe-fonts/source-han-serif/tree/release/

Link to font license
Accepted licenses are SIL OFL, Apache 2, MIT and Ubuntu Font License 1.0.

SIL OFL 1.1

• Sans: https://github.com/adobe-fonts/source-han-sans/blob/release/LICENSE.txt
• Serif: https://github.com/adobe-fonts/source-han-serif/blob/release/LICENSE.txt

Additional context
Add any other context here.

The current fonts served by Google, namely (noto-sans-sc/tc/hk/jp/kr and noto-serif-sc/tc/jp/kr) are subset to only the commonly used characters of each region, which are not suitable for a multi-lingual use case. Also, it trims off a lot of useful OpenType features for advanced typesettings (see #39).

However, despite the proposal mentioned in #39, Source Han / Noto CJK is not included in the google/fonts GitHub repository. I’m therefore opening a separate issue to request including these typefaces.

Font Request: FiraGO 1.000

Font Name
Ensure it is an Open Source downloadable font.

FiraGO, current latest version is 1.000.

Link to font source
Preferably Github, however, main website is also acceptable.

GitHub: https://github.com/bBoxType/FiraGO
Demo: https://bboxtype.com/typefaces/FiraGO/

Link to font license
Accepted licenses are SIL OFL, Apache 2, MIT and Ubuntu Font License 1.0.

SIL OFL 1.1: https://github.com/bBoxType/FiraGO/blob/master/OFL.txt

Additional context
Add any other context here.

N/A

Include SASS/SCSS files in output packages

Similar to #64

Is your feature request related to a problem? Please describe.
I am currently using roboto-fontface and would like to replace it with fontsource-roboto (+ fontsource-roboto-condensed, & fontsource-roboto-slab). However, the fontsource packages don't include SCSS files for easy inclusion into my project (though it's not terribly hard to work around).

Describe the solution you'd like
I would like to able to do something like this:

$roboto-font-path: './fonts'; /* if there're paths or parameters to be customized */
@import 'fontsource-roboto'; /* or @use */

Describe alternatives you've considered
I actually haven't thought much about this and am not a CSS expert by any means. It just seems like some of the benefits of using pre-processors are probably going to waste. What I currently do to make this work is:

1. @import 'fonts/foo/index.css'; (often needing to replace index with 700.css or all-700.css or duplicate to get additional weights, etc.) in my app's SCSS
2. Copy files from node_modules/fontsource-foo/... into my app's assets folder under fonts/foo

Font request Noto Mono

Font Name
Noto Mono

Link to font source
Homepage: https://www.google.com/get/noto/#mono-mono

Repository: https://github.com/googlefonts/noto-fonts

Font files inside the repository: https://github.com/googlefonts/noto-fonts/tree/master/hinted/ttf/NotoSansMono

Link to font license
https://github.com/googlefonts/noto-fonts/blob/master/LICENSE
It's a SIL Open Font License

Additional context
The Noto font is already available in Sans and Serif, but not Monospace. There are very few monospace fonts available, this would be a great addition.

Adding Tests

This project has no tests. Bluntly speaking, I have no clue how to go about implementing the base framework for something like this, so it would be amazing to have someone help out on this!

The complications of this repo is the fact that it is a monorepo and has a lot of automatically generated CSS code that is hard to check for. It's not something I want to naively implement myself as I'm a complete beginner in this territory.

That way, we can implement a CI/CD workflow that adds checks to the PRs that come into the project, which should guarantee stable releases for the many that depend on this project.

Edit: I'm undertaking this currently with major refactors in the works.

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.

Consider proving full-featured fonts as alternatives to their trimmed counterparts

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Google Fonts strip off a lot of useful OpenType features when offering fonts on their servers. Their configuration is currently only whitelisting a few features that only meets the bare minimum standard for a decent typesetting. Many commonly used features for finer typesetting occasions – like old-style/lining figures, small capitals, etc – are all missing from their trimmed version. This is also one of the reasons I am inclining to other alternative services or self hosting over Google Fonts for projects demand better quality typography.

References

Whitelisted features [ref]:

    _layout_features_groups = {
        # Default shaper
        'common': ['rvrn', 'ccmp', 'liga', 'locl', 'mark', 'mkmk', 'rlig'],
        'fractions': ['frac', 'numr', 'dnom'],
        'horizontal': ['calt', 'clig', 'curs', 'kern', 'rclt'],
        'vertical': ['valt', 'vert', 'vkrn', 'vpal', 'vrt2'],
        'ltr': ['ltra', 'ltrm'],
        'rtl': ['rtla', 'rtlm'],
        # Complex shapers
        'arabic': ['init', 'medi', 'fina', 'isol', 'med2', 'fin2', 'fin3',
                   'cswh', 'mset', 'stch'],
        'hangul': ['ljmo', 'vjmo', 'tjmo'],
        'tibetan': ['abvs', 'blws', 'abvm', 'blwm'],
        'indic': ['nukt', 'akhn', 'rphf', 'rkrf', 'pref', 'blwf', 'half',
                  'abvf', 'pstf', 'cfar', 'vatu', 'cjct', 'init', 'pres',
                  'abvs', 'blws', 'psts', 'haln', 'dist', 'abvm', 'blwm'],
    }

• google/fonts#1335
• Andrew Brampton struggling with old-style figures with Google Font

Describe the solution you'd like
A clear and concise description of what you want to happen.

Include an alternative option to import the full-featured (i.e. original) font instead of their trimmed counterparts. The original fonts are available at https://github.com/google/fonts in the directory format of license/font/files. If font size / package size is a concern, these original fonts can also be packed into a different package separate from the trimmed ones.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Those original fonts can also be collected manually from their respective foundries, although a huge amount of manpower might be needed.

Additional context
Add any other context or screenshots about the feature request here.

Some type foundries and cloud hosting services (Adobe Fonts) etc also offer a wider range of OpenType features to choose from (or sometimes even the original files) than Google Fonts.

Standardise index.css to include all font faces

Is your feature request related to a problem? Please describe.
Please see issue #99, this issue is a continuation of the discussion there into a seperate feature request so that pull request can be closed.

Describe the solution you'd like
Would you consider the idea of changing the index.css? Instead of only containing the 400 font replacing it with all available font-faces for that particular font. This would avoid any breaking change, and would standardise the index.css across all fonts. This obviously would increase import size but users looking to decrease package size will look through the docs and implement one of the subset css files. This would allow users that are new to the project to get started faster and users with size constraints to use the project to its full potential. IMHO (ease of use through standardisation) >> (small code size)

Describe alternatives you've considered
Issue #99 is a manual implementation for a single font but only implements weight 300. As discussed this need to be fixed programmatically rather than manual file writing.

Additional context
N/A. I am willing to help with this and other issues if @DecliningLotus is happy. Admittedly JS is not my strongpoint as I am primarilly a Python and C++ programmer but willing to help!