Fonts #1039

florian-lefebvre · 2024-10-15T15:13:36Z

Summary

Have first-party support for fonts in Astro:

// astro.config.mjs
import { defineConfig, fontProviders } from "astro/config"

export default defineConfig({
	fonts: [
		{
			name: "Roboto",
			cssVariable: "--font-roboto",
			provider: fontProviders.google(),
		}
	]
})

---
// layouts/Layout.astro
import { Font } from "astro:fonts"
---
<head>
	<Font cssVariable="--font-roboto" />
	<style>
		h1 {
			font-family: var(--font-roboto);
		}
	</style>
</head>

Links

lilnasy · 2024-10-22T23:50:13Z

How does preloading pick the src when the font provides multiple files for multiple unicode ranges? See IBM Plex Mono on font source for example.

What's the reasoning behind considering subsetting a non-goal? It helps a lot when the font participates in LCP and is trivial to do when using google fonts directly. Moving to astro fonts in that case would be a downgrade.

florian-lefebvre · 2024-10-23T14:22:50Z

How does preloading pick the src when the font provides multiple files for multiple unicode ranges? See IBM Plex Mono on font source for example.

I think we can't choose the src to pick automatically, so that would preload everything? Not sure, have ideas in mind?

What's the reasoning behind considering subsetting a non-goal? It helps a lot when the font participates in LCP and is trivial to do when using google fonts directly. Moving to astro fonts in that case would be a downgrade.

Only automatic subsetting is a non goal (eg. by analyzing the static content), subsetting is actually supported. I'll clarify the non goal

proposals/0052-fonts.md

florian-lefebvre · 2025-04-24T06:41:20Z

Thanks for the feedback!

my app preloads ALL font files, even those of legacy formats like woff

This should not be the case. It was fixed recently, did you try with the latest version of Astro?

or fonts that are rarely used in my app.

That's a good point. I quite like what you're suggesting but that would only work for the local provider. I wonder if there's a way to support it for remote providers, or to move it somewhere else? eg.

---
import { Font } from 'astro:assets';
---

<Font cssVariable="--font-custom" preload={[400,500]} />

It's less centralized but it works for all kinds of providers

JusticeMatthew · 2025-04-24T14:07:27Z

---
import { Font } from 'astro:assets';
---

<Font cssVariable="--font-custom" preload={[400,500]} />

Big fan of this

jonasgeiler · 2025-04-25T10:00:56Z

@florian-lefebvre wrote: This should not be the case. It was fixed recently, did you try with the latest version of Astro?

Yeah, I am on [email protected]. I went through the source code to look for the fix you mentioned and why it's not working for me - looks like the fix was only implemented for the non-local providers.

As you can see this code block is in the family.provider !== LOCAL_PROVIDER_NAME branch:
https://github.com/withastro/astro/blob/6ed83606f9bdfdf0a35aef1318cf0e2cb4b4236e/packages/astro/src/assets/fonts/load.ts#L151-L163

But there is no equivalent logic for the family.provider === LOCAL_PROVIDER_NAME branch - the collectPreload argument for collect() is always true:
https://github.com/withastro/astro/blob/6ed83606f9bdfdf0a35aef1318cf0e2cb4b4236e/packages/astro/src/assets/fonts/load.ts#L107

@florian-lefebvre wrote:

---
import { Font } from 'astro:assets';
---

<Font cssVariable="--font-custom" preload={[400,500]} />

This looks like a pretty good solution! The only question is if it should be differentiated between different font-style like normal, italic and oblique.
Maybe allow either a number | string (just the weight) or an object like { weight: number | string, style: 'normal' | 'italic' | 'oblique' } with the weight and style in the preload property array. 🤔

So, together, the type for the preload property could be:

type FontProps = {
  // ...
  preload: (number | string | { weight: number | string, style: 'normal' | 'italic' | 'oblique' })[]
  // ...
};

Which, once implemented, would make it pretty flexible:

---
import { Font } from 'astro:assets';
---

<Font cssVariable="--font-custom" preload={[ 400, { weight: 500, style: 'normal' } ]} />

Just my suggestion!

florian-lefebvre · 2025-04-25T12:38:10Z

looks like the fix was only implemented for the non-local providers.

You're right! I have a fix on another branch so that should land soon-ish

StrCode · 2025-04-25T12:42:17Z

Hello,
Just took the new fonts feature for a spin, and it's looking fantastic overall!

I did run into an issue when trying to use fonts from Fontshare. There's an issue with the URL for the Fontshare CDN (it looks malformed in the error message), as it's consistently throwing an error when trying to load a font. You can see the error in the screenshot below:

Minimal reproduction: https://congenial-couscous-4jpj9qg4gp42jv6v.github.dev/

florian-lefebvre · 2025-04-25T12:44:26Z

Hi, thanks for trying it out! Can you open an issue at https://github.com/withastro/astro/issues instead? Thanks!

florian-lefebvre · 2025-05-02T09:55:46Z

If you are using the local provider, I'd like your feedback on withastro/astro#13640!

Pkcarreno · 2025-05-08T16:18:47Z

I have the same request as @tanishqmanuja, my use case is to generate OG images with Satori

What I usually do is to read the .woff file from node_modules

	const fontData = fs.readFileSync(
		'node_modules/@fontsource/ia-writer-duo/files/ia-writer-duo-latin-400-normal.woff'
	)

and then integrate it in Satori like this

const raw = await satori(htmlContent as React.ReactNode, {
		width,
		height,
		fonts: [
			{
				name: 'IA Writer Duo',
				data: fontData,
				style: 'normal',
				weight: 400
			}
		]
	})

I would appreciate a way to achieve this with this feature and thus not depend on extra installations (as in this case manually install a font from fontsource)

Thanks 🙌

florian-lefebvre · 2025-05-08T16:35:35Z

I plan to look into this in the next 2 weeks!

florian-lefebvre · 2025-05-16T11:59:41Z

Hi there! I'm working on a way to retrieve URLs, give it a try and share your experience on the PR: withastro/astro#13811

florian-lefebvre · 2025-05-20T08:50:21Z

Hi there! I'm working on a way to retrieve URLs, give it a try and share your experience on the PR: withastro/astro#13811

cc @tanishqmanuja and @Pkcarreno

florian-lefebvre · 2025-05-20T08:50:50Z

Hi there! I'm working on a way to have more granular preloads, give it a try and share your experience on the PR: withastro/astro#13826

cc @jonasgeiler

JusticeMatthew · 2025-07-14T06:56:02Z

It would be great to have clearer filenames in the console warnings, as this would make it easier to distinguish which fonts are the cuplrits

florian-lefebvre · 2025-07-14T06:58:27Z

I think in builds we should keep them as is as it's better for caching but in dev, we could either do something like inter-500-italic-<hash>.<ext> or even inter-500-italic.<ext>

JusticeMatthew · 2025-07-14T09:27:12Z

Agreed with the dev/build

I'm fine with either naming convention, the hashes being there doesn't bother me as long as the name is there too 👍

JusticeMatthew · 2025-07-14T21:26:31Z

I think in builds we should keep them as is as it's better for caching but in dev, we could either do something like inter-500-italic-<hash>.<ext> or even inter-500-italic.<ext>

Perhaps after what we learned in #13826 it might also be good to indicate if the file is a subset as well? (if possible) 😅

florian-lefebvre · 2025-08-28T12:31:29Z

@JusticeMatthew see withastro/astro#14279

robinlahtinen · 2025-09-14T07:48:12Z

The experimental Fonts API inserts elements at the beginning of the <head> section, which pushes important meta tags such as the charset declaration beyond the first 1024 bytes of the HTML. As a result, Lighthouse reports: "Charset declaration is missing or occurs too late in the HTML."

delucis · 2025-09-14T08:20:19Z

The experimental Fonts API inserts elements at the beginning of the <head> section, which pushes important meta tags such as the charset declaration beyond the first 1024 bytes of the HTML. As a result, Lighthouse reports: "Charset declaration is missing or occurs too late in the HTML."

IIUC the <Font> component renders where it is used, so adding it to your pages below important meta tags like that should fix this.

florian-lefebvre · 2025-09-14T11:07:06Z

Yes as Chris said you control the position in the head

florian-lefebvre · 2025-10-03T11:54:31Z

What do you think about cssVariable requiring the leading --? Do you think it's fine as is or would you prefer not having to specify it? Eg.

{
-	cssVariable: '--my-font'
+	cssVariable: 'my-font'
}

-<Font cssVariable="--my-font" />
+<Font cssVariable="my-font" />

:root {
	font-family: var(--my-font);
}

JusticeMatthew · 2025-10-03T18:19:05Z

What do you think about cssVariable requiring the leading --? Do you think it's fine as is or would you prefer not having to specify it? Eg.
{
-	cssVariable: '--my-font'
+	cssVariable: 'my-font'
}

-<Font cssVariable="--my-font" />
+<Font cssVariable="my-font" />
:root {
	font-family: var(--my-font);
}

Personally, I don't mind either way, but for consistency, I think it would be nice to require the --. This way, users are typing the same thing in each of the few places they need it vs "Oh wait I'm in the component prop, I need to not include the --" if that makes sense

RomanHauksson · 2025-10-15T16:23:08Z

Agreed on requiring the --. This made it quicker for me to understand what corresponds to what.

florian-lefebvre added 14 commits October 15, 2024 17:10

feat: work on rfc

526ab7c

feat: copy from stage 2

c53956c

chore: raw ideas

4b67e1f

feat: examples

5006242

fix: link

28b1c1c

chore: add todos

987d13a

feat: work on providers

c589609

feat: defaults and families

8250880

feat: component and usage

7233fbe

fix: headings

ff39e16

feat

df5bbd5

feat: drawbacks, alternatives, adoption

c79c1fa

feat: family

caa649b

feat: tweak

64b9ba4

florian-lefebvre changed the title ~~[WIP] Fonts~~ Fonts Oct 22, 2024

florian-lefebvre marked this pull request as ready for review October 22, 2024 14:39

florian-lefebvre mentioned this pull request Oct 22, 2024

Fonts #1037

Closed

florian-lefebvre commented Oct 23, 2024

View reviewed changes

proposals/0052-fonts.md Outdated Show resolved Hide resolved

proposals/0052-fonts.md Outdated Show resolved Hide resolved

Apply suggestions from code review

94b5805

Princesseuh reviewed Oct 24, 2024

View reviewed changes