feat: self-host font for better privacy (#2540)

2026-02-27 10:48:48 +01:00
parent 55776ea24f
commit 10ea21b20f
10 changed files with 17 additions and 18 deletions
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
  "license": "MIT",
  "dependencies": {
    "@dr.pogodin/csurf": "^1.16.6",
+    "@fontsource-variable/inter": "^5.2.8",
    "@formatjs/intl-displaynames": "6.8.13",
    "@formatjs/intl-locale": "3.1.1",
    "@formatjs/intl-pluralrules": "5.4.6",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,6 +15,9 @@ importers:
      '@dr.pogodin/csurf':
        specifier: ^1.16.6
        version: 1.16.6
+      '@fontsource-variable/inter':
+        specifier: ^5.2.8
+        version: 5.2.8
      '@formatjs/intl-displaynames':
        specifier: 6.8.13
        version: 6.8.13
@@ -1382,6 +1385,9 @@ packages:
  '@floating-ui/utils@0.2.10':
    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}

+  '@fontsource-variable/inter@5.2.8':
+    resolution: {integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==}
+
  '@formatjs/ecma402-abstract@1.14.3':
    resolution: {integrity: sha512-SlsbRC/RX+/zg4AApWIFNDdkLtFbkq3LNoZWXZCE/nHVKqoIJyaoQyge/I0Y38vLxowUn9KTtXgusLD91+orbg==}

@@ -10118,6 +10124,8 @@ snapshots:

  '@floating-ui/utils@0.2.10': {}

+  '@fontsource-variable/inter@5.2.8': {}
+
  '@formatjs/ecma402-abstract@1.14.3':
    dependencies:
      '@formatjs/intl-localematcher': 0.2.32
--- a/server/templates/email/generatedpassword/html.pug
+++ b/server/templates/email/generatedpassword/html.pug
@@ -5,7 +5,6 @@ head
  meta(http-equiv='x-ua-compatible' content='ie=edge')
  meta(name='viewport' content='width=device-width, initial-scale=1')
  meta(name='format-detection' content='telephone=no, date=no, address=no, email=no')
-  link(href='https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap' rel='stylesheet' media='screen')
  style.
    .title:hover * {
    text-decoration: underline;
@@ -17,7 +16,7 @@ head
    }
    }
 div(style='display: block; background-color: #111827; padding: 2.5rem 0;')
-  table(style='margin: 0 auto; font-family: Inter, Arial, sans-serif; color: #fff; font-size: 16px; width: 26rem;')
+  table(style='margin: 0 auto; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; color: #fff; font-size: 16px; width: 26rem;')
    tr
      td(style="text-align: center;")
        if applicationUrl
--- a/server/templates/email/media-issue/html.pug
+++ b/server/templates/email/media-issue/html.pug
@@ -5,7 +5,6 @@ head
  meta(http-equiv='x-ua-compatible' content='ie=edge')
  meta(name='viewport' content='width=device-width, initial-scale=1')
  meta(name='format-detection' content='telephone=no, date=no, address=no, email=no')
-  link(href='https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap' rel='stylesheet' media='screen')
  style.
    .title:hover * {
    text-decoration: underline;
@@ -17,7 +16,7 @@ head
    }
    }
 div(style='display: block; background-color: #111827; padding: 2.5rem 0;')
-  table(style='margin: 0 auto; font-family: Inter, Arial, sans-serif; color: #fff; font-size: 16px; width: 26rem;')
+  table(style='margin: 0 auto; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; color: #fff; font-size: 16px; width: 26rem;')
    tr
      td(style="text-align: center;")
        if applicationUrl
--- a/server/templates/email/media-request/html.pug
+++ b/server/templates/email/media-request/html.pug
@@ -5,7 +5,6 @@ head
  meta(http-equiv='x-ua-compatible' content='ie=edge')
  meta(name='viewport' content='width=device-width, initial-scale=1')
  meta(name='format-detection' content='telephone=no, date=no, address=no, email=no')
-  link(href='https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap' rel='stylesheet' media='screen')
  style.
    .title:hover * {
    text-decoration: underline;
@@ -17,7 +16,7 @@ head
    }
    }
 div(style='display: block; background-color: #111827; padding: 2.5rem 0;')
-  table(style='margin: 0 auto; font-family: Inter, Arial, sans-serif; color: #fff; font-size: 16px; width: 26rem;')
+  table(style='margin: 0 auto; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; color: #fff; font-size: 16px; width: 26rem;')
    tr
      td(style="text-align: center;")
        if applicationUrl
--- a/server/templates/email/resetpassword/html.pug
+++ b/server/templates/email/resetpassword/html.pug
@@ -5,7 +5,6 @@ head
  meta(http-equiv='x-ua-compatible' content='ie=edge')
  meta(name='viewport' content='width=device-width, initial-scale=1')
  meta(name='format-detection' content='telephone=no, date=no, address=no, email=no')
-  link(href='https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap' rel='stylesheet' media='screen')
  style.
    .title:hover * {
    text-decoration: underline;
@@ -17,7 +16,7 @@ head
    }
    }
 div(style='display: block; background-color: #111827; padding: 2.5rem 0;')
-  table(style='margin: 0 auto; font-family: Inter, Arial, sans-serif; color: #fff; font-size: 16px; width: 26rem;')
+  table(style='margin: 0 auto; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; color: #fff; font-size: 16px; width: 26rem;')
    tr
      td(style="text-align: center;")
        if applicationUrl
--- a/server/templates/email/test-email/html.pug
+++ b/server/templates/email/test-email/html.pug
@@ -5,7 +5,6 @@ head
  meta(http-equiv='x-ua-compatible' content='ie=edge')
  meta(name='viewport' content='width=device-width, initial-scale=1')
  meta(name='format-detection' content='telephone=no, date=no, address=no, email=no')
-  link(href='https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap' rel='stylesheet' media='screen')
  style.
    .title:hover * {
    text-decoration: underline;
@@ -17,7 +16,7 @@ head
    }
    }
 div(style='display: block; background-color: #111827; padding: 2.5rem 0;')
-  table(style='margin: 0 auto; font-family: Inter, Arial, sans-serif; color: #fff; font-size: 16px; width: 26rem;')
+  table(style='margin: 0 auto; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; color: #fff; font-size: 16px; width: 26rem;')
    tr
      td(style="text-align: center;")
        if applicationUrl
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -13,6 +13,7 @@ import type { User } from '@app/hooks/useUser';
 import { Permission, useUser } from '@app/hooks/useUser';
 import '@app/styles/globals.css';
 import { polyfillIntl } from '@app/utils/polyfillIntl';
+import '@fontsource-variable/inter';
 import { MediaServerType } from '@server/constants/server';
 import type { PublicSettingsResponse } from '@server/interfaces/api/settingsInterfaces';
 import type { AvailableLocale } from '@server/types/languages';
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -13,13 +13,7 @@ class MyDocument extends Document {
  render(): JSX.Element {
    return (
      <Html>
-        <Head>
-          <link rel="preconnect" href="https://fonts.gstatic.com" />
-          <link
-            rel="stylesheet"
-            href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
-          />
-        </Head>
+        <Head />
        <body>
          <Main />
          <NextScript />
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -16,7 +16,7 @@ module.exports = {
        width: 'width',
      },
      fontFamily: {
-        sans: ['Inter', ...defaultTheme.fontFamily.sans],
+        sans: ['Inter Variable', ...defaultTheme.fontFamily.sans],
      },
      typography: (theme) => ({
        DEFAULT: {