From da8ed38491592d439334b601c29626ee079ab26f Mon Sep 17 00:00:00 2001 From: Lorenzo Corallo Date: Wed, 14 Oct 2026 23:18:16 +0200 Subject: [PATCH] fix(fonts): self-host DM Sans and DM Mono instead of Google Fonts Loading the fonts from fonts.googleapis.com sent every visitor's IP address to Google, which the privacy policy then had to list as a recipient. The same faces now come from @fontsource packages and are bundled into the build: DM Mono 400/500 and DM Sans with the wght and opsz axes, with font-display: swap. --- package.json | 2 ++ pnpm-lock.yaml | 16 ++++++++++++++++ src/styles.css | 12 +++++++----- 3 files changed, 25 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index f683d179..c9501634 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,8 @@ "dependencies": { "@base-ui/react": "^1.6.0", "@dnd-kit/react": "^0.4.0", + "@fontsource-variable/dm-sans": "^5.3.0", + "@fontsource/dm-mono": "^5.3.0", "@polinetwork/backend": "^1.4.0", "@t3-oss/env-core": "^0.13.10", "@tanstack/charts": "1.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 18845331..a21c0174 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -25,6 +25,12 @@ importers: '@dnd-kit/react': specifier: ^0.4.0 version: 0.4.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7) + '@fontsource-variable/dm-sans': + specifier: ^5.3.0 + version: 5.3.0 + '@fontsource/dm-mono': + specifier: ^5.3.0 + version: 5.3.0 '@polinetwork/backend': specifier: ^1.4.0 version: 1.4.0 @@ -479,6 +485,12 @@ packages: '@floating-ui/utils@0.2.11': resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==} + '@fontsource-variable/dm-sans@5.3.0': + resolution: {integrity: sha512-BpUG5bqePiDFMBM4ZtLSlPdAIOM990uB1dlXzIf4aw21yQR7BmykedLXXXMqGWsR18aMLOsbWccwJNh3ztTQaA==} + + '@fontsource/dm-mono@5.3.0': + resolution: {integrity: sha512-OINjI8C1S/wpchhQxl7njZdMn4+hnDCpQ4YtvvOpKNARo+0J8O1x1IcrChxNjHOhfVv1by8C/FQoy3hXK+C1Ug==} + '@github/browserslist-config@1.0.0': resolution: {integrity: sha512-gIhjdJp/c2beaIWWIlsXdqXVRUz3r2BxBCpfz/F3JXHvSAQ1paMYjLH+maEATtENg+k5eLV7gA+9yPp762ieuw==} @@ -5524,6 +5536,10 @@ snapshots: '@floating-ui/utils@0.2.11': {} + '@fontsource-variable/dm-sans@5.3.0': {} + + '@fontsource/dm-mono@5.3.0': {} + '@github/browserslist-config@1.0.0': {} '@hono/node-server@1.19.14(hono@4.12.29)': diff --git a/src/styles.css b/src/styles.css index 6ca29f5c..dc67ddb6 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,4 +1,6 @@ -@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap"); +@import "@fontsource/dm-mono/400.css"; +@import "@fontsource/dm-mono/500.css"; +@import "@fontsource-variable/dm-sans/opsz.css"; @import "tailwindcss"; @import "tw-animate-css"; @import "shadcn/tailwind.css"; @@ -216,10 +218,10 @@ } @theme inline { - --font-sans: "DM Sans", sans-serif; - --font-serif: "DM Sans", sans-serif; + --font-sans: "DM Sans Variable", sans-serif; + --font-serif: "DM Sans Variable", sans-serif; --font-mono: "DM Mono", monospace; - --font-heading: "DM Sans", sans-serif; + --font-heading: "DM Sans Variable", sans-serif; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); @@ -450,7 +452,7 @@ tr:focus-visible { background: var(--pn-surface-raised); color: var(--pn-fg); box-shadow: var(--pn-shadow-float); - font-family: "DM Sans", sans-serif; + font-family: "DM Sans Variable", sans-serif; font-size: var(--pn-text-sm); line-height: var(--pn-leading-sm); }