try fontsource

BreadchainCoop · Oct 26, 2023 · 8d0b07e · 8d0b07e
1 parent 52a396a
commit 8d0b07e
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 26 deletions.
diff --git a/apps/site/package.json b/apps/site/package.json
@@ -17,6 +17,8 @@
     "@astrojs/tailwind": "^3.0.1",
     "@breadchain.xyz/site-ui": "workspace:*",
     "@breadchain.xyz/theme": "workspace:*",
+    "@fontsource/poppins": "^5.0.8",
+    "@fontsource/red-hat-text": "^5.0.15",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "astro": "^2.5.0",

diff --git a/apps/site/src/layouts/Layout.astro b/apps/site/src/layouts/Layout.astro
@@ -1,6 +1,11 @@
 ---
 import { Header, Footer } from "@breadchain.xyz/site-ui";
 import "../styles/index.css";
+import "@fontsource/red-hat-text/400.css";
+import "@fontsource/red-hat-text/500.css";
+import "@fontsource/red-hat-text/600.css";
+import "@fontsource/red-hat-text/700.css";
+import "@fontsource/poppins/700.css";
 
 export interface Props {
   title: string;
@@ -29,23 +34,11 @@ const { title } = Astro.props;
     <meta name="twitter:creator" content="@breadchain_" />
     <meta name="twitter:image:alt" content="breadchain logo" />
     <title>{title}</title>
-
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@400;500;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
-      rel="stylesheet"
-    />
+    <!-- <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="DNS-prefetch" href="//fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> -->
   </head>
-  <body class="min-h-screen flex flex-col overflow-x-hidden">
+  <body class="flex min-h-screen flex-col overflow-x-hidden">
     <Header client:load />
     <main class="grow">
       <slot />

diff --git a/apps/site/src/styles/base.css b/apps/site/src/styles/base.css
@@ -1,5 +1,10 @@
 @tailwind base;
 
+:root {
+  --font-redhat: "Red Hat Text";
+  --font-poppins: "Poppins";
+}
+
 @layer base {
   html {
     overflow-x: hidden;

diff --git a/packages/theme/index.js b/packages/theme/index.js
@@ -39,19 +39,18 @@ module.exports = {
     "button-border": "#2E2E2E",
   },
   fontFamily: {
-    pressstart: ['"Press Start 2P"', "sans-serif"],
-    redhat: ['"Red Hat Text"', "sans-serif"],
-    poppins: ["Poppins", "sans-serif"],
+    // pressstart: ["var(--font-pressstart)", "sans-serif"],
+    redhat: ["var(--font-redhat)", "sans-serif"],
+    poppins: ["var(--font-poppins)", "sans-serif"],
   },
   screens: {
-    'hero-image': '432px',
-    'footer-sm': '580px',
-    'footer-md': '600px',
-    'footer-lg': '1075px',
-
+    "hero-image": "432px",
+    "footer-sm": "580px",
+    "footer-md": "600px",
+    "footer-lg": "1075px",
   },
-  "borderRadius": {
-    "cta": "0.3125rem"
+  borderRadius: {
+    cta: "0.3125rem",
   },
   typography: ({ theme }) => ({
     pink: {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml