Use local font

LeBenLeBen · Dec 6, 2023 · df36e74 · df36e74
1 parent 23fb063
commit df36e74
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 6 deletions.
diff --git a/packages/frontend/index.html b/packages/frontend/index.html
@@ -5,11 +5,6 @@
     <link rel="icon" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Cookr</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap"
-      rel="stylesheet"
-    />
   </head>
   <body class="bg-alt-100 text-alt-800">
     <div id="app"></div>

diff --git a/packages/frontend/src/assets/css/base/fonts.css b/packages/frontend/src/assets/css/base/fonts.css
@@ -0,0 +1,6 @@
+@font-face {
+  font-family: 'Fredoka';
+  src: url('../../fonts/Fredoka-SemiBold.woff2') format('woff2');
+  font-weight: bold;
+  font-display: swap;
+}
diff --git a/packages/frontend/src/assets/css/main.css b/packages/frontend/src/assets/css/main.css
@@ -2,6 +2,8 @@
 
 @import './preflight/defaults.css';
 
+@import './base/fonts.css';
+
 @import 'tailwindcss/components';
 
 @import './components/headings.css';

diff --git a/packages/frontend/src/assets/fonts/Fredoka-SemiBold.woff2 b/packages/frontend/src/assets/fonts/Fredoka-SemiBold.woff2
diff --git a/packages/frontend/tailwind.config.js b/packages/frontend/tailwind.config.js
@@ -3,7 +3,7 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        display: ['Fredoka One', 'sans-serif'],
+        display: ['Fredoka', 'sans-serif'],
       },
       colors: {
         primary: {