Replace Typefaces with Fontsource

[ayuhito]

Summary

In reference to #24385 which contains all the details regarding this issue, what additional discussion should precede for this documentation update?

What are everyone's thoughts towards the change and what concerns would anyone hold to the PR?

Motivation

I personally loved the idea of using Typefaces for my projects, however, it lacks many of newer Google Fonts and existing ones have been outdated. That is evident from the number of issues and PRs. I would've loved to contribute, but it's been clear that the project isn't maintained anymore so I decided to rebuild the whole project.

Fontsource aims to replace the project by setting up an automatic update schedule to keep Google Fonts up to date, adds the much-needed options to choose subsets, weights and styles for greater performance capability/language support and embrace newer alternative Open Source fonts. With far clearer documentation to boot, I would say this is a very viable improvement to the Gatsby ecosystem from a performance and QOL perspective for typography.

Documentation

The section considered to be adjusted can be found here: https://www.gatsbyjs.org/docs/recipes/styling-css/#using-google-fonts

[herecydev]

My biggest concern with a change like this is the very problem of maintenance that you've pointed out isn't addressed. If you stop supporting Fontsource in a few months, what happens then?

I do think it's problematic if Typefaces is going a bit stale, but I think that needs to be addressed with better automation and potentially opening up the core maintainers if the burden of managing it is becoming a problem. I just don't see endless rewrites as a better methodology

[Neilblaze]

@DecliningLotus please review PR #24726

[ayuhito]

@herecydev, I actually agree with the opening up to more core maintainers part for Typefaces.

We may actually see that being addressed soon in one form or the other since it isn’t ideal to migrate an entire community over to another repo which follows the same project vision, however, I’m not too concrete on the details regarding that since not much has been discussed.

I’m not going to be pushing this issue too much until I get clarity on that other venture.

@Neilblaze I would recommend closing that since it is a duplicate PR of #24385.

[marcysutton]

Hey there, thanks for the issue and discussion. I agree that it would be good to recommend something for working with Google fonts that's been kept up to date. We're going to chat about our options internally, and we'll update you when we know more.

[ayuhito]

Just leaving a note that I’m open to integrate Fontsource into the Typefaces project as an active maintainer. It would be great to go through all those issues and clean up the maintenance backlog.

I’ve got tons planned including preload support, a search directory (built with Gatsby <3) and more - I’ve left that on hiatus for the time being until we sort this out.

Edit: Willingness to integrate with Typefaces is no longer the case. Fontsource has matured as a repository and has many users from the Material UI community since it is part of their official documentation, as well as having breaking changes in comparison to Typefaces. I'd rather let users migrate away at this point.

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[jsejcksn]

Maintainers: Are you open to reconsidering the remote resource strategy entirely? I don't know that the current implementation of maintaining proxied caches are sustainable strategies.

Fonts are a specific type of resource that I'll focus on here, with Google Fonts as the example, but this idea can be extrapolated to other font sources and other types of resources.

I'll share two strategy ideas:

---

Let's say you want to load a few variants of Roboto:

https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap

The workbox documentation explains:

The Google Fonts service consists of two parts:

• The stylesheet with the @font-face definitions, which link to the font files.
• The static, revisioned font files.

Strategy 1: Using service workers with original sources

When using a service worker (e.g. gatsby-plugin-offline), a technique like SWR works great: cache the resources from their actual locations, serve cached, and re-fetch if necessary.

Unless the user's connection to your site's CDN is faster than Google Fonts, caching from Google Fonts will be advantageous. Plus, if the user has visited another website which uses any of the same fonts, they will already be in cache and instantly available on first load.

The fonts have a cache-control policy of a year (cache-control: public, max-age=31536000) and the stylesheets have a policy of 24 hours (cache-control: private, max-age=86400, stale-while-revalidate=604800).

Strategy 2: Fetch the remote resources at build time (e.g. via a plugin)

Essentially, this is the Typefaces/Fontsource package as a plugin: Create a plugin for web fonts, allowing the user to provide a link to one or more stylesheets.

1. Download the stylesheet
2. Parse the font resource addresses from the stylesheet
3. Download the font resources
4. Re-write the addresses in the stylesheet to point to the local font resources
5. Bundle with app during build

I think this strategy is more sustainable than the npm cache strategies, but it loses all the shared cache benefits provided in strategy 1.

---

These are initial thoughts. Apologies if I overlooked something. Please provide feedback!

[ayuhito]

I apologise if I get anything incorrect with what I say below. Feel free to correct me if I'm wrong.

---

Strategy 1: Using service workers with original sources

I feel that this solution excludes those who do not wish to use gatsby-plugin-offline or service workers in their project.

Plus, if the user has visited another website which uses any of the same fonts, they will already be in cache and instantly available on first load.

At least to my understanding, that benefit does not exist due to double-keyed caching implemented in most modern browsers such as Chromium and Safari. More on this here.

---

Strategy 2: Fetch the remote resources at build time (e.g. via a plugin)

I think this strategy is more sustainable than the npm cache strategies

@jsejcksn, I'm a little unsure of what you mean by "sustainable" in this context.

As a separate repository, Fontsource is framework agnostic, meaning it works with most React frameworks - Gatsby, CRA and Next.js being key tested figures. The libraries also works with Vue and I haven't necessarily checked with Angular, but it probably may work there too. I don't think it's a good move to lock and restrict these sort of things onto Gatsby solely by developing it into a plugin.

Not to mention for both strategies you do lose one of the key benefits of locally hosted fonts - version control. Google pushes updates to their fonts without notice and some changes can cause mass outrage such as google/fonts#1307. Treat your fonts like any other NPM dependency and update them at your own pace.

[jsejcksn]

I'm a little unsure of what you mean by "sustainable" in this context.

@DecliningLotus Sustainable as in "requiring ongoing human maintenance and infrastructure"

I'm not trying to step on your toes. If you want to maintain a versioned font repository for general use, I think that's great for the community.

As I mentioned at the top of my message:

Fonts are a specific type of resource that I'll focus on here, with Google Fonts as the example, but this idea can be extrapolated to other font sources and other types of resources.

I was just using fonts as an example. The suggestion was about allowing users to download and bundle all kinds of remote resources (including resources not related to fonts) at build time. Think of it as a suggestion for a "remote resource caching plugin" (or plugins, depending on implementation).

[ayuhito]

@jsejcksn, my bad. Appreciate the response.

It's an interesting direction to take things, at least in the general scope. You should definitely make a separate issue to get dedicated feedback from the general perspective.

[meganesu]

Hi @DecliningLotus, thanks for your patience while we talked about this internally. At this time, our hope is to get Typefaces back up to date by opening it up to community contributors. We're still nailing down the details for how to do that.

In the meantime, I'm going to close this issue, since we aren't planning on moving the docs away from Typefaces. Thanks for bringing this to our attention! 💜

[jarodtaylor]

@meganesu does the Gatsby team plan to update the Typefaces repo/Readme? It currently still says deprecated and points users to use Fontsource.

[KyleAMathews]

Yes there's another PR up #27313