feat: use Titillium Web font for UI (#771)

interledger · Dec 11, 2024 · 1e2decf · 1e2decf
1 parent 3395969
commit 1e2decf
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 3 deletions.
diff --git a/cspell-dictionary.txt b/cspell-dictionary.txt
@@ -50,6 +50,7 @@ esbuild
 msedge
 SVGOMG
 xvfb
+Titillium
 
 # user names
 raducristianpopa

diff --git a/esbuild/dev.ts b/esbuild/dev.ts
@@ -15,6 +15,7 @@ export const getDevOptions = ({
     sourcemap: 'linked',
     metafile: false,
     minify: false,
+    external: ['*.woff2'],
     plugins: getPlugins({ outDir, dev: true, target, channel }).concat([
       typecheckPlugin({ buildMode: 'readonly', watch: true }),
       liveReloadPlugin({ target }),

diff --git a/esbuild/prod.ts b/esbuild/prod.ts
@@ -24,6 +24,7 @@ export const getProdOptions = ({
     sourcemap: false,
     metafile: true,
     minify: true,
+    external: ['*.woff2'],
     plugins: getPlugins({ outDir, dev: false, target, channel }).concat([
       typecheckPlugin({ buildMode: 'readonly' }),
       preservePolyfillClassNamesPlugin({ outDir }),

diff --git a/src/assets/fonts/titillium-web/titillium-web-latin-300-normal.woff2 b/src/assets/fonts/titillium-web/titillium-web-latin-300-normal.woff2
diff --git a/src/assets/fonts/titillium-web/titillium-web-latin-400-normal.woff2 b/src/assets/fonts/titillium-web/titillium-web-latin-400-normal.woff2
diff --git a/src/assets/fonts/titillium-web/titillium-web-latin-600-normal.woff2 b/src/assets/fonts/titillium-web/titillium-web-latin-600-normal.woff2
diff --git a/src/assets/fonts/titillium-web/titillium-web-latin-700-normal.woff2 b/src/assets/fonts/titillium-web/titillium-web-latin-700-normal.woff2
diff --git a/src/manifest.json b/src/manifest.json
@@ -29,7 +29,11 @@
   },
   "web_accessible_resources": [
     {
-      "resources": ["polyfill/*", "pages/progress-connect/*"],
+      "resources": [
+        "polyfill/*",
+        "pages/progress-connect/*",
+        "assets/fonts/**/*"
+      ],
       "matches": ["<all_urls>"]
     }
   ],

diff --git a/src/pages/popup/index.css b/src/pages/popup/index.css
@@ -3,6 +3,42 @@
 @tailwind utilities;
 
 @layer base {
+  @font-face {
+    font-family: 'Titillium Web';
+    /* light */
+    src: url('/assets/fonts/titillium-web/titillium-web-latin-300-normal.woff2')
+      format('woff2');
+    font-style: normal;
+    /* font-light */
+    font-weight: 300;
+  }
+  @font-face {
+    font-family: 'Titillium Web';
+    /* regular */
+    src: url('/assets/fonts/titillium-web/titillium-web-latin-400-normal.woff2')
+      format('woff2');
+    font-style: normal;
+    font-weight: 400;
+  }
+  @font-face {
+    font-family: 'Titillium Web';
+    /* semibold */
+    src: url('/assets/fonts/titillium-web/titillium-web-latin-600-normal.woff2')
+      format('woff2');
+    font-style: normal;
+    /* font-medium */
+    font-weight: 500;
+  }
+  @font-face {
+    font-family: 'Titillium Web';
+    /* bold */
+    src: url('/assets/fonts/titillium-web/titillium-web-latin-700-normal.woff2')
+      format('woff2');
+    font-style: normal;
+    /* font-bold */
+    font-weight: 700;
+  }
+
   :root {
     /* Text colors */
     --text-primary: 59 130 246;
@@ -36,6 +72,6 @@
   }
 
   body {
-    @apply bg-white text-base text-medium;
+    @apply bg-white font-titillium text-base text-medium;
   }
 }
diff --git a/src/pages/progress-connect/index.css b/src/pages/progress-connect/index.css
@@ -3,6 +3,42 @@
 @tailwind utilities;
 
 @layer base {
+  @font-face {
+    font-family: 'Titillium Web';
+    /* light */
+    src: url('/assets/fonts/titillium-web/titillium-web-latin-300-normal.woff2')
+      format('woff2');
+    font-style: normal;
+    /* font-light */
+    font-weight: 300;
+  }
+  @font-face {
+    font-family: 'Titillium Web';
+    /* regular */
+    src: url('/assets/fonts/titillium-web/titillium-web-latin-400-normal.woff2')
+      format('woff2');
+    font-style: normal;
+    font-weight: 400;
+  }
+  @font-face {
+    font-family: 'Titillium Web';
+    /* semibold */
+    src: url('/assets/fonts/titillium-web/titillium-web-latin-600-normal.woff2')
+      format('woff2');
+    font-style: normal;
+    /* font-medium */
+    font-weight: 500;
+  }
+  @font-face {
+    font-family: 'Titillium Web';
+    /* bold */
+    src: url('/assets/fonts/titillium-web/titillium-web-latin-700-normal.woff2')
+      format('woff2');
+    font-style: normal;
+    /* font-bold */
+    font-weight: 700;
+  }
+
   :root {
     /* Text colors */
     --text-primary: 59 130 246;
@@ -34,6 +70,6 @@
   }
 
   body {
-    @apply bg-white text-base text-medium;
+    @apply bg-white font-titillium text-base text-medium;
   }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,5 +1,6 @@
 import { Config } from 'tailwindcss';
 import forms from '@tailwindcss/forms';
+import { fontFamily } from 'tailwindcss/defaultTheme';
 
 module.exports = {
   content: [
@@ -8,6 +9,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      fontFamily: {
+        titillium: ['Titillium Web', ...fontFamily.sans],
+      },
       width: {
         popup: 'var(--popup-width)',
       },
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,6 +50,7 @@ esbuild @@
     msedge
     SVGOMG
     xvfb
+    Titillium
     # user names
     raducristianpopa
@@ Expand Down @@