Fonts

[sndrs]

There is no standard way of consuming fonts and there should be!

• frontend implementation optimises for 2014 and makes it impossible to share fonts on other domains
• DCR already uses different technique
• other domains implement best practise as they see fit

There is years old discussion around this, and most recently @JamieB-gu and @SiAdcock's work in fontastique and frontend's https://www.theguardian.com/font-loader.

However we resolve this, the solution needs to be:

1. performant (minimal downloads and good use of cache)
2. easily reproducible across domains
3. observe the license
4. upgradeable in future?

[JamieB-gu]

To quote the project vision for Fontastique that @SiAdcock wrote back in March:

Implement a centralised font hosting and loading solution, optimised for performance and replicable across all our web applications. Create a single, versioned source of truth for fonts for web and native apps alike.

Simon may want to correct me on some of this, but I think what we want to achieve are the following three goals:

• Store all the fonts in a single place, and support a version history so that updates can be made
• Host the fonts in a single place, along with their license, where they can be
  • Consumed directly in production on static URLs at high volume (think dotcom and the reader revenue sites)
  • Downloaded for use in projects where hosting externally doesn't make sense (think apps and projects where self-hosting is preferable)
• Provide a tool for new and existing projects to gain access to these fonts, and get updates for them, without having to worry about the above complexities (think generated CSS, config files for iOS and Android, and zip downloads)

I think the second goal aligns with points 1), 2) and 3) that you described above, and the first goal aligns with point 4).

We began work on the third goal with Fontastique. The first goal is pretty much done. The second is still up for grabs.

[SiAdcock]

Some more context for the things @JamieB-gu has mentioned:

• Project vision for Fontastique - mostly out of date now, but has some useful comments
• Store all the fonts in a single place: this is happening in the private repo guardian/fonts
• Host the fonts in a single place: I assume we can write some cfn / riffraff stuff that would deploy our fonts to AWS and host in S3? More discussion in Create S3 Bucket For Fonts fontastique#24
• Provide a tool for projects to gain access to these fonts: that would be guardian/fontastique

@sndrs:

frontend implementation optimises for 2014 and makes it impossible to share fonts on other domains

From the doc linked above:

Frontend defines the most innovative yet complex approach to font loading. It base64-encodes fonts and saves them to localStorage. This means they are available before the DOM is loaded on the second visit, thus avoiding FOIT and FOUT.

I wonder if this is still the most performant technique for font loading? I concede that it's complex and makes fonts harder to share. Perhaps font-loader mitigates against this by providing a clean API (for the web, anyway).

Or maybe we should move to font-display: swap and rely on the ordinary browser cache? @JamieB-gu has pointed out issues to me with our reliance on localStorage for font caching:

• it doesn't work in a private browsing window
• it doesn't work if JavaScript is disabled

Anyone interested in font improvement work should check out the project board we have under fontastique. We should consider centralising these tasks somewhere more visible?

Obligatory c/c for @paperboyo 🤗

@sndrs I changed the title to "Fonts" for accessibility purposes, I hope you don't mind 🙂

[JamieB-gu]

We should consider centralising these tasks somewhere more visible?

Probably. Maybe we could migrate that board to this group?

[SiAdcock]

Cool! I've created a board and assigned it to this team. I can't copy the cards from the existing board, so I guess that's a manual task.

[JamieB-gu]

Thanks Simon! I've migrated all the ones that I thought were relevant... We've actually done a lot of stuff! Please change/add any you think are needed.

I've also closed the old project, this feels like a better place to manage it.