Fonts #1039

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

Summary

Have first-party support for fonts in Astro:

// astro config
export default defineConfig({
	fonts: {
		families: ["Roboto", "Lato"]
	}
})

---
// layouts/Layout.astro
import { Font } from "astro:fonts"
---
<head>
	<Font family="Inter" preload />
	<Font family="Lato" />
	<style>
		h1 {
			font-family: var(--astro-font-inter);
		}
		p {
			font-family: var(--astro-font-lato);
		}
	</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

Princesseuh · 2024-10-24T09:03:51Z

proposals/0052-fonts.md

+	<Font family='Lato' />
+	<style>
+		h1 {
+			font-family: var(--astro-font-inter);


It's gonna be important to make sure those variables are accessible correctly to things like Tailwind. It's a bit unclear with this API because the Tailwind CSS would be imported in the frontmatter, whereas the fonts are in the document.

Perhaps Vite will re-order it to make it work, not sure.

Well since it's just some css, I don't think it will cause any issues? In Tailwind 3, you'd have to reference like so:

import defaultTheme from 'tailwindcss/defaultTheme' export default { theme: { extend: { fontFamily: { sans: ['var(--astro-font-inter)', ...defaultTheme.fontFamily.sans], }, } } }

proposals/0052-fonts.md

Princesseuh · 2024-10-24T09:07:08Z

proposals/0052-fonts.md

+      provider: "adobe",
+      weights: [200, 700],
+      styles: ["italic"],
+      subsets: [


would love an example with opentype fonts features

I guess that would be one key per setting? Something like the following:

{ fontKerning: "'kern' 1", fontVariantAlternates: "1" // etc... }

MDN docs: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/OpenType_fonts_guide

Princesseuh · 2024-10-24T09:08:14Z

proposals/0052-fonts.md

+      myCustomFontProvider(),
+    ],
+    defaults: {
+      provider: "adobe",


how would you know the name of the provider here? Will it be... typed (👀) automatically based on what you put in providers?

Yes! Thanks to defineConfig() being generic now, we can do a lot of cool stuff here. Providers would be easily typed

Princesseuh · 2024-10-24T09:08:57Z

proposals/0052-fonts.md

+      fontProviders.adobe({ apiKey: process.env.ADOBE_FONTS_API_KEY }),
+      myCustomFontProvider(),
+    ],
+    defaults: {


I think defaults make this a nicer API overall, but I wonder how required it is, do people really have that much fonts that setting defaults is required 🤔

I have to admit I rarely use a lot of fonts but I guess that could be the case for more complex sites. IMO people will probably want this for setting a default provider in most cases, so why not support all the other properties I suppose!

Princesseuh · 2024-10-24T09:10:32Z

proposals/0052-fonts.md

+
+#### Definition
+
+A provider allows to retrieve font faces data from a font family name from a given CDN or abstraction. It's a [unifont](https://github.com/unjs/unifont) provider.


I think some people could have a concern with us exposing a third-party "API" like that in the config, but we already do for syntax highlighting themes, so I think it's okay. Plus, the default providers unifont provide are probably enough for 99.999% of people anyway.

Princesseuh · 2024-10-24T09:17:35Z

proposals/0052-fonts.md

+
+| Path      | Example (weight)    | Advantage             | Downside                                                                          |
+| --------- | ------------------- | --------------------- | --------------------------------------------------------------------------------- |
+| Minimal   | Only include `400`  | Lightweight           | People will probably struggle by expecting all weights to be available by default |


I'm team just 400, Google Fonts also gives you only 400 when you unselect the "give all options" setting

ematipico · 2024-10-25T14:13:54Z

proposals/0052-fonts.md

+
+#### Why this API?
+
+1. **Coherent API**: a few things in Astro are using this pattern, namely integrations and vite plugins. It's simple to author as a library author, easy to use as a user


I disagree with this statement, this API is used only for integrations and vite plugins.

For example: middleware, actions, and content collections (we could consider them an exception though) don't follow this pattern. They use a known file to collect users' APIs. Same thing for @astrojs/db (but that's integration).

I think that our configuration should inject as less runtime as possible, use good defaults, and maybe the custom providers could follow the same pattern we use with actions and middleware.

Image services, which are probably the most similar thing do work this way

Probably I missed something, please correct me if I misunderstood what you mean. Based on this docs page (https://docs.astro.build/en/reference/image-service-reference/#user-configuration), the image service uses an entry point API, which is different from the one proposed.

Ah, apologies, I misunderstood what you meant. Thought this was mostly about where they're configured.

Image services do use an entrypoint, but they're configured in the Astro config, when they have settings.

The main advantage of having objects in the config directly for providers is typing support, which imo is super important

My major concern is about the providers and the way they are injected. The rest is fine :)

Alright so I guess you'd prefer such an API, am I right?

defineConfig({ fonts: { providers: [fontProviders.adobe({ apiKey: "..." })] // equal to { name: "adobe", entrypoint: "astro/assets/fonts/adobe", config: { apiKey: "..." } } } })

Seems doable

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 Show resolved Hide resolved

Apply suggestions from code review

94b5805

Princesseuh reviewed Oct 24, 2024

View reviewed changes

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

Princesseuh reviewed Oct 24, 2024

View reviewed changes

Update 0052-fonts.md

15e938a

ematipico reviewed Oct 25, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fonts #1039

Fonts #1039

florian-lefebvre commented Oct 15, 2024

lilnasy commented Oct 22, 2024

florian-lefebvre commented Oct 23, 2024

Princesseuh Oct 24, 2024

florian-lefebvre Oct 24, 2024 •

edited

Loading

Princesseuh Oct 24, 2024

florian-lefebvre Oct 24, 2024 •

edited

Loading

Princesseuh Oct 24, 2024

florian-lefebvre Oct 24, 2024

Princesseuh Oct 24, 2024

florian-lefebvre Oct 24, 2024

Princesseuh Oct 24, 2024

Princesseuh Oct 24, 2024

ematipico Oct 25, 2024

Princesseuh Oct 25, 2024

ematipico Oct 26, 2024

Princesseuh Oct 26, 2024

florian-lefebvre Oct 26, 2024

ematipico Oct 26, 2024 •

edited

Loading

florian-lefebvre Oct 26, 2024 •

edited

Loading


		#### Definition

		A provider allows to retrieve font faces data from a font family name from a given CDN or abstraction. It's a [unifont](https://github.com/unjs/unifont) provider.


		#### Why this API?

		1. Coherent API: a few things in Astro are using this pattern, namely integrations and vite plugins. It's simple to author as a library author, easy to use as a user

Fonts #1039

Are you sure you want to change the base?

Fonts #1039

Conversation

florian-lefebvre commented Oct 15, 2024

Summary

Links

lilnasy commented Oct 22, 2024

florian-lefebvre commented Oct 23, 2024

Choose a reason for hiding this comment

florian-lefebvre Oct 24, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

florian-lefebvre Oct 24, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ematipico Oct 26, 2024 • edited Loading

Choose a reason for hiding this comment

florian-lefebvre Oct 26, 2024 • edited Loading

Choose a reason for hiding this comment

florian-lefebvre Oct 24, 2024 •

edited

Loading

florian-lefebvre Oct 24, 2024 •

edited

Loading

ematipico Oct 26, 2024 •

edited

Loading

florian-lefebvre Oct 26, 2024 •

edited

Loading