add custom fonts

src/index.css

@@ -26,18 +26,7 @@
 }
 
 html {
-  font-family:
+	font-family: "DejaVu Sans", sans-serif;
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    "Open Sans",
-    "Helvetica Neue",
-    sans-serif;
 }
 
 .header-links {
@@ -126,3 +115,35 @@ h1.post-title {
 .blog-meta {
 	font-size: 14px;
 }
+
+@font-face {
+	font-family: "DejaVu Sans";
+	src: url("/fonts/DejaVuSans.woff2") format("woff2");
+	font-weight: 400;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "DejaVu Sans";
+	src: url("/fonts/DejaVuSans-Bold.woff2") format("woff2");
+	font-weight: 700;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "DejaVu Sans";
+	src: url("/fonts/DejaVuSans-Oblique.woff2") format("woff2");
+	font-weight: 400;
+	font-style: italic;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "DejaVu Sans";
+	src: url("/fonts/DejaVuSans-BoldOblique.woff2") format("woff2");
+	font-weight: 700;
+	font-style: italic;
+	font-display: swap;
+}

src/templates/MainTemplate.jsx

@@ -30,6 +30,16 @@ const Header = () => {
 							Code
 						</a>
 					</li>
+					<li className="flex flex-col items-center justify-center">
+						<a
+							className=""
+							href="https://fosstodon.org/@systemsobscure"
+							rel="me"
+							target="blank"
+						>
+							Fosstodon
+						</a>
+					</li>
 				</ul>
 			</nav>
 		</header>
@@ -69,4 +79,3 @@ const MainTemplate = ({ children }) => {
 export default MainTemplate
 //antialiased max-w-3xl mt-3 mx-auto bg-[#282828] no-scanlines wrapper
 //main: flex-auto min-w-0 mt-0 flex flex-col px-2 md:px-0
-