From 10ea21b20ff696768424b64f6fd834c8e3e24108 Mon Sep 17 00:00:00 2001 From: Pierre Spring Date: Fri, 27 Feb 2026 10:48:48 +0100 Subject: [PATCH] feat: self-host font for better privacy (#2540) --- package.json | 1 + pnpm-lock.yaml | 8 ++++++++ server/templates/email/generatedpassword/html.pug | 3 +-- server/templates/email/media-issue/html.pug | 3 +-- server/templates/email/media-request/html.pug | 3 +-- server/templates/email/resetpassword/html.pug | 3 +-- server/templates/email/test-email/html.pug | 3 +-- src/pages/_app.tsx | 1 + src/pages/_document.tsx | 8 +------- tailwind.config.js | 2 +- 10 files changed, 17 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index d68daad5..97887d9c 100644 --- 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8933e191..e48171c4 100644 --- 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 diff --git a/server/templates/email/generatedpassword/html.pug b/server/templates/email/generatedpassword/html.pug index 2fcb2e09..1563c59b 100644 --- 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 diff --git a/server/templates/email/media-issue/html.pug b/server/templates/email/media-issue/html.pug index 920542e0..1e34e835 100644 --- 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 diff --git a/server/templates/email/media-request/html.pug b/server/templates/email/media-request/html.pug index cd698c20..bd7c9aa6 100644 --- 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 diff --git a/server/templates/email/resetpassword/html.pug b/server/templates/email/resetpassword/html.pug index 3c800663..0b0b1fa0 100644 --- 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 diff --git a/server/templates/email/test-email/html.pug b/server/templates/email/test-email/html.pug index 3ba83a93..eb9fbe9b 100644 --- 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 diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 78641050..426b4949 100644 --- 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'; diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 32df8a3b..e3e03eb0 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -13,13 +13,7 @@ class MyDocument extends Document { render(): JSX.Element { return ( - - - - +
diff --git a/tailwind.config.js b/tailwind.config.js index 5f3cf5b2..c017fd6f 100644 --- 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: {