Skip to content

Replace own custom fonts loader with Astro Fonts Api#351

Open
JopMolenaar wants to merge 9 commits intomainfrom
feat/replace-own-custom-fonts-loader-with-astro-fonts-api
Open

Replace own custom fonts loader with Astro Fonts Api#351
JopMolenaar wants to merge 9 commits intomainfrom
feat/replace-own-custom-fonts-loader-with-astro-fonts-api

Conversation

@JopMolenaar
Copy link
Copy Markdown
Contributor

@JopMolenaar JopMolenaar commented Apr 17, 2026 •
edited
Loading

Changes

  • Implements the new Astro Fonts API
  • Removes our own fonts loader

Associated issue

Resolves #350

How to test

  1. Open the preview link
  2. Open inspector and check the fonts that are used.
  3. Maybe even experiment using other fonts of fontsource by adding them to the config and use them.
  4. Check the if the editor guide also has the right font.

Checklist

  • I have performed a self-review of my own code
  • I have made sure that my PR is easy to review (not too big, includes comments)
  • I have made updated relevant documentation files (in project README, docs/, etc)
  • I have added a decision log entry if the change affects the architecture or changes a significant technology
  • I have notified a reviewer

@JopMolenaar JopMolenaar self-assigned this Apr 17, 2026
Copilot AI review requested due to automatic review settings April 17, 2026 08:45
Copilot AI reviewed Apr 17, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR migrates font loading from a custom @fontsource-based loader to Astro’s (currently experimental) Fonts API, so the app’s primary layout and CMS editor guide use centrally configured fonts.

Changes:

  • Adds an Astro Fonts configuration (fontConfig) and wires it into astro.config.ts via experimental.fonts.
  • Replaces the previous define:vars font family usage with a CSS variable (--font-archivo) and inserts the <Font /> helper in relevant <head> sections.
  • Removes the custom font preload and @font-face injection logic from PerfHead.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
astro.config.ts Registers the new font configuration under experimental.fonts.
src/assets/fonts.ts Replaces the custom loader/font-face helpers with an Astro Fonts API configuration.
src/layouts/PerfHead/PerfHead.astro Removes custom font preloading and @font-face injection.
src/layouts/Default.astro Injects the Astro <Font /> helper and switches global font-family to the new CSS variable.
src/pages/cms/editor-guide.astro Injects the Astro <Font /> helper and switches font-family to the new CSS variable for the editor guide page.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread astro.config.ts Outdated
Comment thread src/assets/fonts.ts Outdated
@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages Bot commented Apr 17, 2026 •
edited
Loading

Deploying head-start with  Cloudflare Pages  Cloudflare Pages

Latest commit: d067338
Status: ✅  Deploy successful!
Preview URL: https://903354eb.head-start.pages.dev
Branch Preview URL: https://feat-replace-own-custom-font.head-start.pages.dev

View logs

@JopMolenaar JopMolenaar changed the title Replace own custom fonts loader with astro fonts api Replace own custom fonts loader with Astro Fonts Api Apr 17, 2026
decrek
decrek requested changes Apr 17, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@decrek decrek left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR changes how fonts are loaded for the end user. Previously fonts were preloaded, but in the preview link the font face declarations are just inlined. I would say that this is worse than before regarding loading experience of fonts. At least it is different. If you want to just change how fonts are loaded, probably adding preload on the font is enough? See https://docs.astro.build/en/guides/fonts/#preloading-fonts. Im all for using this build in method btw, I just think the output should be the same

decrek
decrek reviewed Apr 17, 2026
View reviewed changes
Comment thread src/layouts/PerfHead/PerfHead.test.ts
Comment thread src/layouts/PerfHead/PerfHead.astro Outdated
@JopMolenaar JopMolenaar requested a review from decrek April 17, 2026 14:26
@JopMolenaar
Copy link
Copy Markdown
Contributor Author

JopMolenaar commented Apr 17, 2026 •
edited
Loading

@decrek preload seems to be the fix and is now doing the same as on https://head-start.pages.dev/en/.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@decrek decrek Awaiting requested review from decrek

Requested changes must be addressed to merge this pull request.

Assignees

@JopMolenaar JopMolenaar

Labels

🧹 Tidy up

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Replace own custom fonts loader with Astro Fonts API

3 participants

@JopMolenaar @decrek