Font types and Cumulative Layout Shift

[andrecasal]

Three questions:

1. Google Fonts only has TTF versions for Nunito Sans. Do you convert these into woff and woff2 or do you download them from somewhere else?
2. As a best practice, shouldn't we be using Nunito Sans's variable font? The complete set of woff/woff2 is 838 kB and the variable font is 569 kB. We'd save 269 kB overall, but the first load would still be penalized as it only needs 105.7 kB:
   
3. Is there a fontpie alternative that works for variable fonts?

[kentcdodds]

I can't remember where I got the woff and woff2 versions of the font, but I do remember I had to look around the web for them.

I'd be happy to accept a PR that allows us to use that font but smaller.

I don't know whether there's a fontpie alternative that supports variable fonts. @xHomu do you know?

[xHomu]

I use fontsquirrel to generate optimized subsets, it'll output .woff and .woff2 files https://www.fontsquirrel.com/tools/webfont-generator

[xHomu]

I'm of the opinion that we don't need to preload fonts at all. With font swap, we made sure the display text is rendered before the fonts streamed in. With font metric overrides, we ensured that CLS would not be a problem.

[kentcdodds]

By that you mean we can remove these lines?

epic-stack/app/root.tsx

Lines 40 to 43 in 4ab28e3

	// Preload CSS as a resource to avoid render blocking
	{ rel: 'preload', href: fontStylestylesheetUrl, as: 'style' },
	{ rel: 'preload', href: tailwindStylesheetUrl, as: 'style' },
	cssBundleHref ? { rel: 'preload', href: cssBundleHref, as: 'style' } : null,

[xHomu]

Ops, thought Epic Stack was preloading fonts files in root too. Ignore that!

Preload css, don't preload fonts!