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

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",

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

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

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

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

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

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

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';

src/pages/_document.tsx

@@ -13,13 +13,7 @@ class MyDocument extends Document {
   render(): JSX.Element {
     return (
       <Html>
-        <Head>
+        <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>
         <body>
           <Main />
           <NextScript />

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: {