withastro
Guide on font preloading
📚 Subject area/topic
Using custom fonts
📋 Suggested page
https://docs.astro.build/en/guides/fonts/
📋 General description or bullet points (if proposing new content)
Include information on how to add font preloading.
When a new Astro project is scaffolded using the blog template, BaseHead.astro includes font preloading:
It would be beneficial if the documentation for setting up fonts included a similar example.
For the local font file setup, all that is needed is to add lines like the ones above.
For Fontsource library the setup is little bit more complicated. There's seems to be no default way how to do this in the Fontsource but there is a workaround which seems to be working very nicely in Astro.
The Astro guide could include something like:
🖥️ Reproduction of code samples in StackBlitz
No response
Just a heads up that I made that workaround official with a guide in Fontsource: https://github.com/fontsource/fontsource/pull/963 🎉
Hi there! This seems like a helpful addition, and if the workaround exists in Fontsource docs now then perhaps linking to it rather than reproducing it here makes sense from a maintenance perspective.
I would be happy to receive a PR to add this extra helpful content to the docs! We don't "assign" issues to people in this repo, but are happy if you'd like to use this thread to coordinate or express intention to follow through.
So I will add help wanted to this issue to indicate that anyone is free to contribute! Thank you for raising it!
Pinging this for freshness! Linking to the now-existing guide is still up for grabs as a docs PR if anyone is interested!
Perhaps this is the wrong place, but I would like to chime in that users will potentially face issues with this when using tailwindcss and declaring the fonts in its config. E.g.:
Given this in the head:
---
// font-family: 'Source Serif Pro', serif;
import "@fontsource/source-serif-pro";
import source_serif_pro from "@fontsource/source-serif-pro/files/source-serif-pro-latin-400-normal.woff2?url";
---
...
<link
rel="preload"
as="font"
href={source_serif_pro}
type="font/woff2"
crossorigin="anonymous"
/>
And this tailwind config:
import defaultTheme from "tailwindcss/defaultTheme";
/** @type {import('tailwindcss').Config} */
export default {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
extend: {
fontFamily: {
serif: ["Source Serif Pro", ...defaultTheme.fontFamily.serif],
},
},
},
};
Then using that font:
<body class="font-serif">
...
</body>
This produces warnings such as:
The resource at “http://localhost:4321/_astro/source-serif-pro-latin-400-normal.onGwRnjS.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.
The resource at “http://localhost:4321/_astro/source-serif-pro-latin-400-normal.onGwRnjS.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.
At first glance, it doesn't seem related to Tailwind or Fontsource. That's a normal browser console message if you don't use a preloaded font on your webpage 🤔 Are you actually using it?
If you are, maybe something is up with the import where the font family name is different from what is being preloaded? What does your CSS look like?
I'm using the serif font as the main font. Tailwind generates the CSS:
.font-serif {
font-family: Source Serif Pro, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
Looks correct when compared to this install guide on the fontsource website.
This is where I added that class:
<body class="font-serif">
...
</body>
Edit: I realized why this happens now. It is because I had a <ClientRouter /> in my head as described here in the astro docs. I found an issue already discussing this here