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

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.

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

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.

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?

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",

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.

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

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.

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.

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

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