Merge pull request #72 from chas-team-5/71-include-webfonts

add: Webfonts to project, remove linked Google fonts

about.html

@@ -19,12 +19,10 @@
   <meta property="og:image" content="https://chas-team-5.github.io/u03-quiz-app/assets/images/quiz-hitta-ditt-inre-og-image.webp">
   <meta property="og:url" content="https://chas-team-5.github.io/u03-quiz-app/about.html">
 
-  <link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="./assets/css/style.css">
   <script type="module" src="./assets/js/about.js"></script>
 
   <script src="https://kit.fontawesome.com/5f1a52fccc.js" crossorigin="anonymous"></script>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 </head>
 

assets/css/style.css

@@ -1,4 +1,5 @@
 @import url(./utils/reset.css);
+@import url(./utils/fonts.css);
 @import url(./utils/variables.css);
 @import url(./index.css);
 @import url(./quiz.css);
@@ -10,14 +11,10 @@
 
 body {
   margin: var(--spacing-sm);
-
-  user-select: none;
-
   font-family: "Outfit", Arial, Helvetica, sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
-
   background-color: var(--color-background);
 }
 

assets/css/utils/fonts.css

@@ -0,0 +1,27 @@
+@font-face {
+  font-family: 'Outfit';
+  font-weight: 400;
+  font-style: normal;
+  src: url('../../webfonts/Outfit-Regular.woff2') format('woff2'),
+    url('../../webfonts/Outfit-Regular.woff') format('woff');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Outfit';
+  font-weight: 500;
+  font-style: normal;
+  src: url('../../webfonts/Outfit-Medium.woff2') format('woff2'),
+    url('../../webfonts/Outfit-Medium.woff') format('woff');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Outfit';
+  font-weight: 600;
+  font-style: normal;
+  src: url('../../webfonts/Outfit-SemiBold.woff2') format('woff2'),
+    url('../../webfonts/Outfit-SemiBold.woff') format('woff');
+  font-display: swap;
+}
+

index.html

@@ -18,7 +18,6 @@
   <meta property="og:image" content="https://chas-team-5.github.io/u03-quiz-app/assets/images/quiz-hitta-ditt-inre-og-image.webp">
   <meta property="og:url" content="https://chas-team-5.github.io/u03-quiz-app/">
 
-  <link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="./assets/css/style.css">
   <script type="module" src="./assets/js/start.js"></script>
 </head>

quiz.html

@@ -11,12 +11,10 @@
   <link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-touch-icon.png">
   <link rel="manifest" href="./favicon/site.webmanifest">
 
-  <link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="./assets/css/style.css">
   <script type="module" src="./assets/js/quiz.js"></script>
 
   <script src="https://kit.fontawesome.com/5f1a52fccc.js" crossorigin="anonymous"></script>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 </head>
 

result.html

@@ -19,7 +19,6 @@
   <meta property="og:image" content="https://chas-team-5.github.io/u03-quiz-app/assets/images/quiz-hitta-ditt-inre-og-image.webp">
   <meta property="og:url" content="https://chas-team-5.github.io/u03-quiz-app/result.html">
 
-  <link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="./assets/css/style.css">
   <script src="./assets/js/utils/confetti.min.js" defer></script>
   <script type="module" src="./assets/js/result.js"></script>