Change site font

blog/css/style-blog.css

@@ -1,18 +1,4 @@
-@font-face {
-    font-family: 'Nunito';
-    src: url('/assets/fonts/Nunito-VariableFont_wght.ttf') format("truetype");
-    font-weight: 125 950;
-    font-stretch: 75% 125%;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Nunito';
-    src: url('/assets/fonts/Nunito-Italic-VariableFont_wght.ttf') format("truetype");
-    font-weight: 125 950;
-    font-stretch: 75% 125%;
-    font-style: italic;
-}
+@import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap');
 
 /* CSS RESET */
 /* Box sizing rules */
@@ -100,7 +86,7 @@ body {
     background-size: cover;
     background-attachment: fixed;
     font-size: 1.3rem;
-    font-family: 'Nunito', Arial, sans-serif;
+    font-family: 'Noto Sans', Arial, sans-serif;
     min-height: 100vh;
     display: flex;
     align-items: center;

changelog/index.html

@@ -52,6 +52,7 @@
 
                 <p class="date-style">3 October 2023:</p>
                 <ul>
+                    <li>Changed this website's font to Noto Sans.</li>
                     <li><cite>Cassette Beasts</cite> <a href="/shrines/cassettebeasts/">shrine</a>: Added link to my record of all the bootleg mosnters I have encountered to the <a href="/shrines/cassettebeasts/gamelog/">Game Log</a> page.</li>
                 </ul>
 

css/style-main.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap');
+
 :root {
     --clr-body-bg: #08031A;
     --img-body-bg: url('/assets/starsforever.png');
@@ -26,22 +28,8 @@
     --clr-navbar-link: white;
 
     --clr-main-footer-bg: #13092D;
-}
 
-@font-face {
-    font-family: 'Nunito';
-    src: url('/assets/fonts/Nunito-VariableFont_wght.ttf') format("truetype");
-    font-weight: 125 950;
-    font-stretch: 75% 125%;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Nunito';
-    src: url('/assets/fonts/Nunito-Italic-VariableFont_wght.ttf') format("truetype");
-    font-weight: 125 950;
-    font-stretch: 75% 125%;
-    font-style: italic;
+    --ff-primary: 'Noto Sans';
 }
 
 /* CSS RESET */
@@ -127,7 +115,7 @@ body {
     display: flex;
     align-items: center;
     flex-direction: column;
-    font-family: 'Nunito', Arial, Helvetica, sans-serif;
+    font-family: var(--ff-primary), Arial, Helvetica, sans-serif;
     color: var(--clr-body-txt);
     background-color: var(--clr-body-bg);
     background-image: var(--img-body-bg);

home.html

@@ -72,6 +72,7 @@
                     <div class="text-box">
                         <p class="date-style">3 October 2023:</p>
                         <ul>
+                            <li>Changed this website's font to Noto Sans.</li>
                             <li><cite>Cassette Beasts</cite> <a href="/shrines/cassettebeasts/">shrine</a>: Added link to my record of all the bootleg mosnters I have encountered to the <a href="/shrines/cassettebeasts/gamelog/">Game Log</a> page.</li>
                         </ul>
                         <p><a href="/changelog">View all site changelog</a></p>