unborn yew
Hello, I am importing a google font like
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,200;0,400;0,600;0,800;1,400&display=swap');
And then importing the stylesheet in my layout like
import "#styles/style.css"
How can I tell the site to preload fonts so they don't flicker on site load?
tall knot
You will probably need to add some meta tags:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
not 100% sure if it works with css imports though
If it doesn't, import the fonts using a meta tag:
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,200;0,400;0,600;0,800;1,400&display=swap" rel="stylesheet">
What should this do? Do I add the whole font links there or just those two?
unborn yew
If it doesn't, import the fonts using a meta tag:
```html
<link href="https://fo...
Prolly couldn't define them in my tailwind config I imagine
Adding those links actually makes the fonts flash 3 times now lol
tall knot
wtf 😂
do you absolutely need google fonts? if not, use fontsource which uses google fonts under the hood but is way more practical https://docs.astro.build/en/guides/fonts/#using-fontsource
unborn yew
Ah yes another node dependency to add to my 2000 node dependencies that make my site take 10 minutes to build
Just to replicate the 2 lines xD
tall knot
honestly it's worth it but it's up to you ofc! otherwise, just use the 3 meta tags and you're good to go
if you're not satisfied with the FOUC, you can have a look at 3rd solutions like https://github.com/danielroe/fontaine i think
young ginkgo
You can just add the font(s) locally and preload them