Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
6.4 kB · 188 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189// Server-side font loading component// Following Google's best practices: https://web.dev/articles/font-best-practices
import { getFontConfig, getGoogleFontsUrl, getFontFamilyValue, getFontBaseSize, defaultFontId,} from "src/fonts";import { getMetricFallbackFace } from "src/fontMetricFallbacks";
// Google Fonts varies its CSS response by User-Agent; pin a modern Chrome UA// so we always get woff2 sources with unicode-range subsets.const GOOGLE_FONTS_UA = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36";
async function fetchGoogleFontsCss(url: string): Promise<string | null> { try { const res = await fetch(url, { headers: { "User-Agent": GOOGLE_FONTS_UA }, next: { revalidate: 60 * 60 * 24 }, }); if (!res.ok) return null; const css = await res.text(); if (!css.includes("@font-face")) return null; return css; } catch { return null; }}
// Google Fonts CSS is stable enough that instance-lifetime staleness is fine.// Failures aren't memoized so a transient fetch error doesn't stick until// instance recycle.const googleFontsCssMemo = new Map<string, Promise<string | null>>();function getGoogleFontsCss(url: string): Promise<string | null> { let cached = googleFontsCssMemo.get(url); if (!cached) { cached = fetchGoogleFontsCss(url).then((css) => { if (css === null) googleFontsCssMemo.delete(url); return css; }); googleFontsCssMemo.set(url, cached); } return cached;}
// Only the upright latin subset is worth preloading — it covers the// initially-rendered text; italic and non-latin subsets load on demand.function extractLatinWoff2Urls(css: string): string[] { const urls: string[] = []; const blocks = css.matchAll(/\/\*\s*latin\s*\*\/\s*@font-face\s*\{([^}]+)\}/g); for (const [, block] of blocks) { if (!/font-style:\s*normal/.test(block)) continue; const src = block.match( /url\((https:\/\/fonts\.gstatic\.com\/[^)]+\.woff2)\)/ ); if (src) urls.push(src[1]); } return urls;}
type FontLoaderProps = { headingFontId: string | undefined; bodyFontId: string | undefined;};
export async function FontLoader({ headingFontId, bodyFontId }: FontLoaderProps) { const headingFont = getFontConfig(headingFontId); const bodyFont = getFontConfig(bodyFontId);
// Don't load the default font (Quattro) here — it's already loaded via // next/font/local in layout.tsx under --font-quattro. Loading it again with // a different family name ('iA Writer Quattro V') causes issues when the // @font-face from this component isn't available (e.g., client-side navigation). const isDefaultHeading = headingFont.id === defaultFontId; const isDefaultBody = bodyFont.id === defaultFontId;
// Collect Google Fonts URLs (deduplicated) const fontsToLoad = [headingFont, bodyFont].filter( (f, i, arr) => f.id !== defaultFontId && arr.findIndex((o) => o.id === f.id) === i ); const googleFontsUrls = [...new Set( fontsToLoad .map((font) => getGoogleFontsUrl(font)) .filter((url): url is string => url !== null) )];
const headingFontValue = isDefaultHeading ? (isDefaultBody ? null : "var(--font-quattro)") : getFontFamilyValue(headingFont); const bodyFontValue = isDefaultBody ? (isDefaultHeading ? null : "var(--font-quattro)") : getFontFamilyValue(bodyFont); const bodyFontBaseSize = isDefaultBody ? null : getFontBaseSize(bodyFont);
// Set font CSS variables scoped to .leafletWrapper so they don't affect app UI // Don't set variables for the default font — let CSS fallback to var(--font-quattro) const fontVariableLines = [ headingFontValue && ` --theme-heading-font: ${headingFontValue};`, bodyFontValue && ` --theme-font: ${bodyFontValue};`, bodyFontBaseSize && ` --theme-font-base-size: ${bodyFontBaseSize}px;`, ].filter(Boolean);
const fontVariableCSS = fontVariableLines.length > 0 ? `.leafletWrapper {\n${fontVariableLines.join("\n")}\n}` : "";
const fontCss = await Promise.all( googleFontsUrls.map(async (url) => ({ url, css: await getGoogleFontsCss(url), })) ); const inlinedFonts = fontCss.filter((f) => f.css !== null); const fallbackFonts = fontCss.filter((f) => f.css === null);
const preloadUrls = [ ...new Set(inlinedFonts.flatMap(({ css }) => extractLatinWoff2Urls(css!))), ];
const metricFallbackCSS = fontsToLoad .map((font) => getMetricFallbackFace(font)) .filter(Boolean) .join("\n");
return ( <> {googleFontsUrls.length > 0 && ( <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" /> )} {preloadUrls.map((url) => ( <link key={url} rel="preload" href={url} as="font" type="font/woff2" crossOrigin="anonymous" /> ))} {inlinedFonts.map(({ url, css }) => ( <style key={url} data-google-fonts={url} dangerouslySetInnerHTML={{ __html: css! }} /> ))} {fallbackFonts.length > 0 && ( <> <link rel="preconnect" href="https://fonts.googleapis.com" /> {fallbackFonts.map(({ url }) => ( <link key={url} rel="stylesheet" href={url} /> ))} </> )} {metricFallbackCSS && ( <style dangerouslySetInnerHTML={{ __html: metricFallbackCSS }} /> )} {/* CSS variables scoped to .leafletWrapper for SSR (before client hydration) */} {fontVariableCSS && ( <style dangerouslySetInnerHTML={{ __html: fontVariableCSS, }} /> )} </> );}
// Helper to extract fonts from facts array (for server-side use)export function extractFontsFromFacts( facts: Array<{ entity: string; attribute: string; data: { value: string } }>, rootEntity: string): { headingFontId: string | undefined; bodyFontId: string | undefined } { const headingFontFact = facts.find( (f) => f.entity === rootEntity && f.attribute === "theme/heading-font" ); const bodyFontFact = facts.find( (f) => f.entity === rootEntity && f.attribute === "theme/body-font" ); return { headingFontId: headingFontFact?.data?.value, bodyFontId: bodyFontFact?.data?.value, };}