042

index.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <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=Pixelify+Sans:[email protected]&display=swap" rel="stylesheet">
+  <link href="https://fonts.cdnfonts.com/css/public-pixel" rel="stylesheet">
   <style>
     html, body {
       overflow: hidden; /* Prevent scrolling */

src/App.css

@@ -5,7 +5,7 @@
   --secondary-color: #f0f0f0;
   --secondary-text-color: #333;
   --button-hover-color: #2492b3;
-  font-family: 'Pixelify', Verdana;
+  font-family: 'PublicPixel', Verdana;
 }
 
 

src/App.tsx

@@ -1,13 +1,13 @@
 import { FC } from "react";
 import styled from "styled-components";
-import "./Pixelify.ttf";
+import "./PublicPixel.ttf";
 import IndexPage from "./IndexPage";
 
 
 const StyledApp = styled.div`
   background-color: #e8e8e8;
   color: black;
-  font-family: 'Pixelify', sans-serif;
+  font-family: 'PublicPixel', sans-serif;
 
   @media (prefers-color-scheme: dark) {
     background-color: #222;
@@ -18,7 +18,7 @@ const StyledApp = styled.div`
 `;
 
 const AppContainer = styled.div`
-  font-family: 'Pixelify', sans-serif;
+  font-family: 'PublicPixel', sans-serif;
   max-width: 900px;
   margin: 0 auto;
 `;

src/ProgressIndicator.tsx

@@ -5,7 +5,7 @@ const ProgressWrapper = styled.div`
   position: absolute;
   top: 5px;
   left: 5px;
-  font-family: 'Pixelify', sans-serif;
+  font-family: 'PublicPixel', sans-serif;
   color: white;
   background-color: rgba(0, 0, 0, 0.7);
   padding: 10px 20px;

src/StyledButton.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 export const StyledButton = styled.button`
   background-color: grey;
-  font-family: 'Pixelify', sans-serif;
+  font-family: 'PublicPixel', sans-serif;
   color: var(--primary-text-color);
   border: 2px solid white;
   border-radius: 10px;

src/StyledComponents.tsx

@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 export const StyledButton = styled.button`
   background-color: grey;
-  font-family: 'Pixelify', sans-serif;
+  font-family: 'PublicPixel', sans-serif;
   color: var(--primary-text-color);
   border: 2px solid white;
   button-radius: 10px;
@@ -20,7 +20,7 @@ export const StyledButton = styled.button`
 export const StyledApp = styled.div`
   background-color: #e8e8e8;
   color: black;
-  font-family: 'Pixelify', sans-serif;
+  font-family: 'PublicPixel', sans-serif;
 
   @media (prefers-color-scheme: dark) {
     background-color: #222;
@@ -31,7 +31,7 @@ export const StyledApp = styled.div`
 `;
 
 export const AppContainer = styled.div`
-  font-family: 'Pixelify', sans-serif;
+  font-family: 'PublicPixel', sans-serif;
   max-width: 900px;
   margin: 0 auto;
 `;

src/index.css

@@ -1,6 +1,6 @@
 @font-face {
-    font-family: 'Pixelify';
-    src: url('./Pixelify.ttf') format('truetype');
+    font-family: 'PublicPixel';
+    src: url('./PublicPixel.ttf') format('truetype');
   }
 
   :root {
@@ -10,7 +10,7 @@
 
   body {
     margin: 0;
-    font-family: 'Pixelify', sans-serif;
+    font-family: 'PublicPixel', sans-serif;
     background-color: #e8e8e8;
     color: black;
   }