feat: add self-hosted Inter font via Astro Fonts API#32
Open
mzngo wants to merge 1 commit into
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The starter ships with no font configuration, so typography falls back to the browser's default system-UI stack. This varies significantly across operating systems (San Francisco on macOS, Roboto on Android, Segoe UI on Windows) making the starter look inconsistent when demoed or forked.
What Changed
astro.config.mjsfontProvidersfromastro/configfontsarray configuring Inter (a neutral, highly legible variable font) via the Google providercssVariable: '--font-inter'andweights: ['100 900']to load the full variable weight range in a single filesrc/layouts/Layout.astro<Font cssVariable="--font-inter" preload />component in<head>@font-facedeclaration, the--font-interCSS variable on:root, an auto-generated fallback font with size/ascent adjustments to prevent layout shift, and a<link rel="preload">for the woff2 filesrc/styles/global.css@themeblock that sets--font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-seriffont-sansutility now resolves to Inter across all components without touching a single component fileHow It Works (Astro Fonts API)
Astro's built-in Fonts API (stable since Astro 5.7) downloads font files from the provider at build time and copies them into the output directory alongside other static assets. At runtime, there is no request to Google's servers — fonts are served from the same origin. This means:
font-display: swapapplied automaticallyBenefits
/_astro/fonts/astro.config.mjsis one line; the CSS variable propagates everywhere automaticallyValidation
astro check→ 0 errors, 0 warningsbiome ci→ 0 errorsastro build→ builds cleanly;[assets] Copying fonts (1 file)...confirms font was downloaded and bundled@font-face,--font-interCSS variable, preload link, and fallback font all present in generated HTML