Refactor font loading to use Vite asset imports - #357
Open
bartveneman wants to merge 3 commits into
Open
Conversation
Move teko-500.woff2 into src/lib/fonts so it gets a content hash like other assets, instead of a manually-typed date suffix duplicated in both app.html and style.css. style.css's @font-face now resolves the font through the normal Vite build (guaranteeing it matches whatever hash Vite assigns), and app.html's preload link is swapped from a literal path to a placeholder that hooks.server.ts fills in with the real hashed URL at render time, keeping the two references in sync and preserving the existing head-ordering/CSP logic.
Drop the placeholder + hooks.server.ts regex-substitution machinery used to keep the preload link's static position in app.html. Instead, import the font in the root layout (same as any other Vite-managed asset) and emit the preload via <svelte:head>, which is the standard way to reference a hashed build asset outside of CSS. The font preload and its hoisted stylesheets now land after SvelteKit's modulepreload hints instead of before them, a difference unlikely to be perceptible.
✅ Deploy Preview for projectwallace ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
The preload <link> was the first child of the layout's <svelte:head>,
ahead of a conditional {#if} block. Since every component's
<svelte:head> content shares one physical document.head, that extra
static node shifted the node sequence Svelte's client hydration walks
to reconnect SSR output to its owning effects — causing Seo.svelte's
unrelated head tags (title, canonical, description, og:*) further down
the tree to lose alignment and get duplicated instead of reused. Moving
the link after the {#if} block keeps the sequence intact.
Member
Author
|
The Generated by Claude Code |
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
2 participants
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.
Summary
Refactored the Teko 500 font loading mechanism to use Vite's asset import system instead of hardcoded file paths with manual versioning. This allows Vite to handle asset hashing automatically while keeping the font preload link dynamic.
Key Changes
teko-500.woff2as a module in+layout.svelteto leverage Vite's asset hashingapp.htmlto+layout.svelteand bound it to the imported asset URL, ensuring it always references the correct hashed filename@font-faceURL instyle.cssfrom the manually-versioned path (../../../teko-500.2019-08-10.woff2) to the new location (../fonts/teko-500.woff2)FONT_PRELOADregex inhooks.server.tsto match onrel="preload"andas="font"attributes instead of a specific filename, making it resilient to Vite's asset hashingImplementation Details
src/lib/fonts/directoryhttps://claude.ai/code/session_01WTWxPkFxYSSb77sTr4nHBg