Best way to add a font file to Qwik City

[pallid copper]

I would really like if someone could provide me with either a repo or a blog/docs explaining the best way of adding fonts in a project.

Using google fonts with a link to their CDN gave me performance issues since they nead to load eagerly or cause CLS if I load lazily. I have tried looking on this discord channel and docs, and while my research hasn't been extensive (about an hour), I haven't gotten any silver-bullet solution which I feel like it has to exists.

Currently, I'm using a method I found in a blog post talking about SSR in general that I managed to use in Quick City. I have attached the font file under /public and then I change my font-family with a class that I have attached to body tag in the root.tsx file while also attaching the aforementioned file with a link tag as a stylesheet.

My current solution gets rid of the call to Google Fonts cdn and has no font-shifting, so it performs better and looks better. My current solution also give me an error of "file was not loaded because its MIME type, font/ttf” is not text/css ", but I'm sure that if my solution is the best way of adding font files to Qwik City that I'm just a few Googles away from getting rid of that issue.

So, does anyone here have a repo I can look at or know where I can find more info on the topic?

[mortal loom]

You can give this a try: https://www.npmjs.com/package/vite-plugin-webfont-dl and let vite handle it. As an added bonus, it serves google fonts locally after building the app which detaches you from googles CDN (which might be an issue in the EU re: GDPR). Works well for me.

[ebon wadi]

I would use fontsource

I wrote a guide on how to do so with qwik city on their site

Self hosts google fonts with an npm install

[pallid copper]

Thx, will look into it ASAP

[ebon wadi]

https://fontsource.org/docs/getting-started/introduction

https://fontsource.org/docs/guides/qwik

should probably mention this in the docs somewhere 😅

will add it later this week

[pallid copper]

👍

[pallid copper]

To the Qwik docs?

[ebon wadi]

Yes, either an external link or just somewhere to find it when searching font in the docs

[pallid copper]

That'd be awesome since the docs recommended using the public folder but not much else

https://qwik.builder.io/docs/advanced/static-assets/

[wooden kiln]

This is pure gold Jack 💯

[wooden kiln]

should definitely be added

Just on little thing that's not clear to me. It seems that I can simply pnpm install a font and add

body {
  font-family: 'Inter Variable', sans-serif;
}

to my global.css and it works.

I guess your guide on how to set it up in the layout is to enable more granular control?

[wooden kiln]

Ups, I missed the required

import "@fontsource-variable/inter";

in my root.tsx

[ebon wadi]

Preferavly wherever the font is used so that it’s only loaded when needed

Aka a layout tsx

[pallid copper]

Is there any notable difference if you choose root?

[ebon wadi]

Yes, because then it’s being loaded in every component

We’re importing the font file

If it’s one page put it in the index, otherwise I’d put it in the layout

[wooden kiln]

Like in every component$ ? 😲

[wooden kiln]

Thanks for asking haha

[ebon wadi]

I'm not actually sure if this is the case. If someone could confirm

if it only loads once maybe a good use case for site-wide

although I usually just put it in the layout unless I need it for a specific tag or page

[wooden kiln]

Hmmm whether I import it in layout or root, I get an index.css that 145B and the woff2 font loaded from memory cache.

I also import ./global.css in my root

that's why I put import "@fontsource-variable/inter"; in there as well

[ebon wadi]

and it's only one font loaded?

to every page you go

[wooden kiln]

Hmm yea

not sure what you mean

[ebon wadi]

As long as there's only one woff2 request (or multiple if multiple weights are being used on the page with a variable font0

[wooden kiln]

Yeah seems to work the same

whether in root or layout

[ebon wadi]

well not the same, depending on where the layout is 😅

but good to know!

[wooden kiln]

Yeah I meant the root layout and root.tsx

though I guess some apps might not have a root layout