How should we handle custom fonts?

Hello 👋

I’m a but stuck on deciding how we should handle our custom fonts.

At the moment, I’m bundling them within Radix itself. But it seems that in total we’ll have about 4 different font families. Bundling them as base64 will increase the bundle size quite a bit - I’m not sure this is a good idea.

Another option is instead of bundling the as base64, I can copy them over to the dist folder and load them in?

Oooor, have some sort of “Font server”? We can then load the fonts in async, just like Google fonts.

What are your thoughts?

[StephenHaney]

Seems fine – and we’d just add instructions to add the fonts in our “Getting Started” page in the docs?

Not sure if increasing bundle size is a concern if they have to load the fonts either way. The decrease in bundle size is equal to the increase in the CDN http requests, right? And these fonts aren’t likely to be cached already like a Google font.

So I’d say we should do whatever supports flexibility and the best, smoothest font loading experience for the actual page viewer.

[TheSisb]

Just wanted to suggest not using base64. Browsers are smart and only download the font file (woff, etc) when some part of the page depends on it (an element on the page has css that sets that specific font family -> file). So you can theoretically define 10+ fonts, but if your page only uses a couple then only those ones get downloaded by the browser. By using base64 you force the download and increase page initialization time. Hosting fonts on a CDN is a great idea; I think of fonts as I would any known static asset.