feat: custom fonts

turbostarter · Nov 2, 2024 · b221133 · b221133
1 parent ceb2128
commit b221133
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 0 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "yoavbls.pretty-ts-errors",
+    "bradlc.vscode-tailwindcss",
+    "biomejs.biome"
+  ]
+}
diff --git a/assets/fonts/Geist-Bold.woff2 b/assets/fonts/Geist-Bold.woff2
diff --git a/assets/fonts/Geist-Regular.woff2 b/assets/fonts/Geist-Regular.woff2
diff --git a/assets/fonts/GeistMono-Bold.woff2 b/assets/fonts/GeistMono-Bold.woff2
diff --git a/assets/fonts/GeistMono-Regular.woff2 b/assets/fonts/GeistMono-Regular.woff2
diff --git a/bun.lockb b/bun.lockb
diff --git a/src/components/common/main.tsx b/src/components/common/main.tsx
@@ -24,6 +24,8 @@ export const Main = ({ className, filename }: MainProps) => {
       </p>
       <a
         href="https://turbostarter.dev/docs/extension"
+        target="_blank"
+        rel="noreferrer"
         className="cursor-pointer text-sm text-primary underline hover:no-underline"
       >
         {chrome.i18n.getMessage("learnMore")}

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -4,6 +4,9 @@
 
 @layer base {
   :root {
+    --font-sans: "Geist", sans-serif;
+    --font-mono: "Geist Mono", monospace;
+
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
@@ -68,3 +71,37 @@
     font-feature-settings: "rlig" 1, "calt" 1;
   }
 }
+
+@layer base {
+  @font-face {
+    font-family: "Geist";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/assets/fonts/Geist-Regular.woff2) format("woff2");
+  }
+
+  @font-face {
+    font-family: "Geist";
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/assets/fonts/Geist-Bold.woff2) format("woff2");
+  }
+
+  @font-face {
+    font-family: "Geist Mono";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/assets/fonts/GeistMono-Regular.woff2) format("woff2");
+  }
+
+  @font-face {
+    font-family: "Geist Mono";
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/assets/fonts/GeistMono-Bold.woff2) format("woff2");
+  }
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -56,6 +56,7 @@ export default {
       },
       fontFamily: {
         sans: ["var(--font-sans)", ...fontFamily.sans],
+        mono: ["var(--font-mono)", ...fontFamily.mono],
       },
       keyframes: {
         "accordion-down": {