new font loading

Lodestone-Team · Feb 21, 2023 · 61b89bc · 61b89bc
1 parent f4a2d3b
commit 61b89bc
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 57 deletions.
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -26,55 +26,6 @@ const contextClass = {
   success: '!bg-green',
 };
 
-const ChillaxFont = localFont({
-  src: [
-    {
-      path: '../public/fonts/Chillax-Variable.woff2',
-      weight: '200 700',
-      style: 'normal',
-    },
-  ],
-  variable: '--font-chillax',
-});
-
-const JetBrainsMonoFont = localFont({
-  src: [
-    {
-      path: '../public/fonts/JetBrainsMono-Variable.woff2',
-      weight: '100 800',
-      style: 'normal',
-    },
-    {
-      path: '../public/fonts/JetBrainsMono-VariableItalic.woff2',
-      weight: '100 800',
-      style: 'italic',
-    },
-  ],
-  variable: '--font-jetbrains-mono',
-});
-
-const ClashGroteskFont = localFont({
-  src: [
-    {
-      path: '../public/fonts/ClashGrotesk-Variable.woff2',
-      weight: '200 700',
-      style: 'normal',
-    },
-  ],
-  variable: '--font-clash-grotesk',
-});
-
-const MinecraftFont = localFont({
-  src: [
-    {
-      path: '../public/fonts/Minecraft_changed.woff',
-      weight: '400',
-      style: 'normal',
-    },
-  ],
-  variable: '--font-minecraft',
-});
-
 
 function MyApp({ Component, pageProps }: AppProps) {
   const renderIcon = (props: IconProps) => {
@@ -90,9 +41,7 @@ function MyApp({ Component, pageProps }: AppProps) {
   }
 
   return (
-    <main
-      className={`${ChillaxFont.variable} ${JetBrainsMonoFont.variable} ${ClashGroteskFont.variable} ${MinecraftFont.variable}`}
-    >
+    <main>
       <NoSSR>
         <ToastContainer
           toastClassName="!bg-gray-850 cursor-pointer"

diff --git a/public/fonts/Minecraftia-Regular.ttf b/public/fonts/Minecraftia-Regular.ttf
diff --git a/src/globals.css b/src/globals.css
@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-/* we will only load satoshi the regular way, since it's our body font and used everywhere */
+/* Satoshi */
 @font-face {
   font-family: 'Satoshi';
   src: url('/fonts/Satoshi-Variable.woff2') format('woff2');
@@ -19,6 +19,50 @@
   font-display: swap;
 }
 
+/* Chillax */
+@font-face {
+  font-family: 'Chillax';
+  src: url('/fonts/Chillax-Variable.woff2') format('woff2');
+  font-weight: 200 700;
+  font-display: swap;
+  font-style: normal;
+}
+
+/* JetBrains Mono */
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/fonts/JetBrainsMono-Variable.woff2') format('woff2');
+  font-weight: 100 800;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('/fonts/JetBrainsMono-VariableItalic.woff2') format('woff2');
+  font-weight: 100 800;
+  font-display: swap;
+  font-style: italic;
+}
+
+/* Clash Grotesk */
+@font-face {
+  font-family: 'Clash Grotesk';
+  src: url('/fonts/ClashGrotesk-Variable.woff2') format('woff2');
+  font-weight: 200 700;
+  font-display: swap;
+  font-style: normal;
+}
+
+/* Minecraft Changed */
+@font-face {
+  font-family: 'Minecraft Changed';
+  src: url('/fonts/Minecraft_changed.woff') format('woff');
+  font-weight: 400;
+  font-display: swap;
+  font-style: normal;
+}
+
 html,
 body {
   padding: 0;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -59,10 +59,10 @@ module.exports = {
     },
     fontFamily: {
       sans: ['Satoshi', ...defaultTheme.fontFamily.sans],
-      heading: ['var(--font-chillax)', ...defaultTheme.fontFamily.sans],
-      title: ['var(--font-clash-grotesk)', ...defaultTheme.fontFamily.sans],
-      minecraft: ['var(--font-minecraft)', ...defaultTheme.fontFamily.sans],
-      mono: ['var(--font-jetbrains-mono)', ...defaultTheme.fontFamily.mono],
+      heading: ['Chillax', ...defaultTheme.fontFamily.sans],
+      title: ['Clash Grotesk', ...defaultTheme.fontFamily.sans],
+      minecraft: ['Minecraft Changed', ...defaultTheme.fontFamily.sans],
+      mono: ['JetBrains Mono', ...defaultTheme.fontFamily.mono],
     },
     fontSize: {
       //! note: don't use fractional-px fonts