Ship a fixed font (Inter)

The playwright pixel test fails otherwise rendering a different font in CI. It's good for UI consistency anyways.
subhoghoshX · Jul 26, 2024 · 089765f · 089765f
1 parent 298583b
commit 089765f
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 3 deletions.
diff --git a/build.js b/build.js
@@ -22,7 +22,7 @@ const context = await esbuild.context({
   ],
   outdir: "dist",
   target: ["es2020"],
-  loader: { ".js": "jsx" },
+  loader: { ".js": "jsx", ".ttf": "file" },
   plugins: [
     {
       name: "clean-dist",

diff --git a/src/css/Inter.ttf b/src/css/Inter.ttf
diff --git a/src/css/tailwind.css b/src/css/tailwind.css
@@ -78,4 +78,8 @@
     @apply bg-background text-foreground;
     font-feature-settings: "rlig" 1, "calt" 1;
   }
+  @font-face {
+    font-family: "Inter";
+    src: url("./Inter.ttf") format("truetype");
+  }
 }
diff --git a/src/newtab/App.tsx b/src/newtab/App.tsx
@@ -50,7 +50,7 @@ export default function App() {
   }, [todayUsage]);
 
   return (
-    <main className="flex justify-center lg:items-center h-screen overflow-auto py-10 dark:bg-zinc-950">
+    <main className="flex justify-center lg:items-center h-screen overflow-auto py-10 dark:bg-zinc-950 font-sans">
       <section className="flex gap-5 flex-col lg:flex-row h-fit">
         <Card>
           <CardHeader>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -54,7 +54,7 @@ module.exports = {
         sm: "calc(var(--radius) - 4px)",
       },
       fontFamily: {
-        sans: ["var(--font-sans)", ...fontFamily.sans],
+        sans: ["Inter", ...fontFamily.sans],
       },
       keyframes: {
         "accordion-down": {

diff --git a/tests/example.spec.ts-snapshots/Extension-in-New-Tab-page-1-chromium-linux.png b/tests/example.spec.ts-snapshots/Extension-in-New-Tab-page-1-chromium-linux.png