Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Guide on font preloading #7451

Closed
branislavbrincko opened this issue Mar 17, 2024 · 8 comments · Fixed by #9045
Closed

Guide on font preloading #7451

branislavbrincko opened this issue Mar 17, 2024 · 8 comments · Fixed by #9045
Labels
add new content Document something that is not in docs. May require testing, confirmation, or affect other pages. help wanted Issues looking for someone to run with them!

Comments

@branislavbrincko
Copy link

📚 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:

image

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:

image

🖥️ Reproduction of code samples in StackBlitz

No response
@branislavbrincko branislavbrincko added the add new content Document something that is not in docs. May require testing, confirmation, or affect other pages. label Mar 17, 2024
@Jothsa
Copy link
Contributor

Jothsa commented Apr 2, 2024

I'd like to see this added as well. I might be able to do it if that's ok

@aretrace
Copy link

Yes, I been looking for this. It would be extremely useful in the docs.

@ayuhito
Copy link

ayuhito commented Apr 16, 2024

Just a heads up that I made that workaround official with a guide in Fontsource: fontsource/fontsource#963 🎉

@sarah11918
Copy link
Member

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!

@sarah11918 sarah11918 added the help wanted Issues looking for someone to run with them! label May 4, 2024
@sarah11918
Copy link
Member

Pinging this for freshness! Linking to the now-existing guide is still up for grabs as a docs PR if anyone is interested!

@vivitt vivitt mentioned this issue Aug 8, 2024
Merged
@dominiwe
Copy link

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.

@ayuhito
Copy link

ayuhito commented Dec 20, 2024 

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?

@dominiwe
Copy link

dominiwe commented Dec 21, 2024 •
edited
Loading

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
add new content Document something that is not in docs. May require testing, confirmation, or affect other pages. help wanted Issues looking for someone to run with them!
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Link the Fontsource docs for Preloading Fonts in the Fonts page vivitt/withastro-docs
6 participants
@sarah11918 @ayuhito @dominiwe @branislavbrincko @Jothsa @aretrace