refactor(fonts): drop Google Fonts CDN links, preload self-hosted faces

Remove the googleapis stylesheet, both google preconnects, and the two
dead fontshare preconnects from the document head. Preload the two
render-critical faces (Inter, Space Grotesk) via Vite ?url imports.
Eliminates two third-party origins and the IP leak to Google.
This commit is contained in:
Ilia Mashkov
2026-06-01 10:06:12 +03:00
parent c41016ac5d
commit 1e16330097
+17 -24
View File
@@ -9,6 +9,14 @@ import { ResponsiveProvider } from '$shared/lib';
import { cn } from '$shared/lib'; import { cn } from '$shared/lib';
import { Footer } from '$widgets/Footer'; import { Footer } from '$widgets/Footer';
/*
Preload the two render-critical interface faces (primary + secondary).
`?url` resolves to the content-hashed path Vite emits, so the binary is
fetched immediately rather than waiting for CSS @font-face discovery.
*/
import interWoff2 from '../assets/fonts/inter-latin-opsz-normal.woff2?url';
import spaceGroteskWoff2 from '../assets/fonts/space-grotesk-latin-wght-normal.woff2?url';
import { import {
type Snippet, type Snippet,
onDestroy, onDestroy,
@@ -33,36 +41,21 @@ onDestroy(() => themeManager.destroy());
<svelte:head> <svelte:head>
<link rel="icon" href={G} type="image/svg+xml" /> <link rel="icon" href={G} type="image/svg+xml" />
<link rel="preconnect" href="https://api.fontshare.com" /> <!-- Self-hosted interface fonts (see src/app/styles/fonts/fonts.css). Preload the two critical faces. -->
<link <link
rel="preconnect" rel="preload"
href="https://cdn.fontshare.com" as="font"
crossorigin="anonymous" type="font/woff2"
/> href={interWoff2}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin="anonymous" crossorigin="anonymous"
/> />
<link <link
rel="preload" rel="preload"
as="style" as="font"
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@800&display=swap" type="font/woff2"
href={spaceGroteskWoff2}
crossorigin="anonymous"
/> />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@800&display=swap"
media="print"
onload={(e => ((e.currentTarget as HTMLLinkElement).media = 'all'))}
/>
<noscript>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@800&display=swap"
/>
</noscript>
<title>GlyphDiff | Typography & Typefaces</title> <title>GlyphDiff | Typography & Typefaces</title>
<meta <meta
name="description" name="description"