tall roost
I'm working on a project for work so I can't really share it but I'm hoping someone has run into this before.
I have a custom theme.css in /src/styles/theme.css and font-face.css in /src/fonts/font-face.css. I'm using WOFF2 fonts.
When I'm working in dev I have some layout shift that seems to be due to the fonts. But when I build and preview it doesn't seem to be there.
Has anyone run into this?
misty edge
are you using the astro config file to set your fonts as css variables? or importing them as an @font-face?
in my case (the first one) i had to add preload to my main <Font> tag in the head to prevent font flashing
tall roost
I'm using Starlight. Am I able to use the Font component? I switched to using fontsource instead but I still have the layout shift in dev lol
I was importing them using @font-face. Now using @fontsource
empty quail
It's a bit annoying to use the component currently but there are detailed instructions here: https://github.com/withastro/starlight/discussions/3763
My guess would be that in dev there's something suboptimal going on — dev and build are very different beasts in terms of output — so stuff is not getting cached.
