Fonts #1039
Fonts #1039
Conversation
|
How does preloading pick the 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. |
I think we can't choose the src to pick automatically, so that would preload everything? Not sure, have ideas in mind?
Only automatic subsetting is a non goal (eg. by analyzing the static content), subsetting is actually supported. I'll clarify the non goal |
| <Font family='Lato' /> | ||
| <style> | ||
| h1 { | ||
| font-family: var(--astro-font-inter); |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
Outdated
| provider: "adobe", | ||
| weights: [200, 700], | ||
| styles: ["italic"], | ||
| subsets: [ |
There was a problem hiding this comment.
would love an example with opentype fonts features
There was a problem hiding this comment.
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
proposals/0052-fonts.md
Outdated
| myCustomFontProvider(), | ||
| ], | ||
| defaults: { | ||
| provider: "adobe", |
There was a problem hiding this comment.
how would you know the name of the provider here? Will it be... typed (👀) automatically based on what you put in providers?
There was a problem hiding this comment.
Yes! Thanks to defineConfig() being generic now, we can do a lot of cool stuff here. Providers would be easily typed
|
|
||
| | Path | Example (weight) | Advantage | Downside | | ||
| | --------- | ------------------- | --------------------- | --------------------------------------------------------------------------------- | | ||
| | Minimal | Only include `400` | Lightweight | People will probably struggle by expecting all weights to be available by default | |
There was a problem hiding this comment.
I'm team just 400, Google Fonts also gives you only 400 when you unselect the "give all options" setting
Summary
Have first-party support for fonts in Astro:
Links