diff --git a/public/fonts/DejaVuSans-Bold.ttf b/public/fonts/DejaVuSans-Bold.ttf
new file mode 100644
index 0000000..6d65fa7
Binary files /dev/null and b/public/fonts/DejaVuSans-Bold.ttf differ
diff --git a/public/fonts/DejaVuSans-Bold.woff2 b/public/fonts/DejaVuSans-Bold.woff2
new file mode 100644
index 0000000..373095f
Binary files /dev/null and b/public/fonts/DejaVuSans-Bold.woff2 differ
diff --git a/public/fonts/DejaVuSans-BoldOblique.ttf b/public/fonts/DejaVuSans-BoldOblique.ttf
new file mode 100644
index 0000000..753f2d8
Binary files /dev/null and b/public/fonts/DejaVuSans-BoldOblique.ttf differ
diff --git a/public/fonts/DejaVuSans-BoldOblique.woff2 b/public/fonts/DejaVuSans-BoldOblique.woff2
new file mode 100644
index 0000000..8f6b20e
Binary files /dev/null and b/public/fonts/DejaVuSans-BoldOblique.woff2 differ
diff --git a/public/fonts/DejaVuSans-Oblique.ttf b/public/fonts/DejaVuSans-Oblique.ttf
new file mode 100644
index 0000000..999bac7
Binary files /dev/null and b/public/fonts/DejaVuSans-Oblique.ttf differ
diff --git a/public/fonts/DejaVuSans-Oblique.woff2 b/public/fonts/DejaVuSans-Oblique.woff2
new file mode 100644
index 0000000..d0feb2b
Binary files /dev/null and b/public/fonts/DejaVuSans-Oblique.woff2 differ
diff --git a/public/fonts/DejaVuSans.ttf b/public/fonts/DejaVuSans.ttf
new file mode 100644
index 0000000..e5f7eec
Binary files /dev/null and b/public/fonts/DejaVuSans.ttf differ
diff --git a/public/fonts/DejaVuSans.woff2 b/public/fonts/DejaVuSans.woff2
new file mode 100644
index 0000000..8437d4e
Binary files /dev/null and b/public/fonts/DejaVuSans.woff2 differ
diff --git a/src/index.css b/src/index.css
index bbf02c3..e03edc0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,128 +1,149 @@
 @media (min-width: 768px) {
-  main {
-    max-width: 768px;
-    margin: 0 1.5rem;
-  }
+	main {
+		max-width: 768px;
+		margin: 0 1.5rem;
+	}
 
-  .post-listing-item {
-    display: flex;
-    flex-direction: row;
-  }
+	.post-listing-item {
+		display: flex;
+		flex-direction: row;
+	}
 }
 
 @media (max-width: 768px) {
-  .post-listing-item {
-    display: flex;
-    flex-direction: column;
-  }
+	.post-listing-item {
+		display: flex;
+		flex-direction: column;
+	}
 
-  .title-link {
-    letter-spacing: 0 !important;
-  }
+	.title-link {
+		letter-spacing: 0 !important;
+	}
 }
 
 .post-listing-item {
-  display: flex;
+	display: flex;
 }
 
 html {
-  font-family:
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    "Open Sans",
-    "Helvetica Neue",
-    sans-serif;
+	font-family: "DejaVu Sans", sans-serif;
 }
 
 .header-links {
-  display: flex;
-  list-style: none;
-  gap: 1rem;
-  margin: 0;
-  padding: 0;
+	display: flex;
+	list-style: none;
+	gap: 1rem;
+	margin: 0;
+	padding: 0;
 }
 
 .plain-link {
-  color: inherit;
-  text-decoration: none;
+	color: inherit;
+	text-decoration: none;
 }
 
 .no-bullets {
-  list-style: none;
-  padding-left: 0;
+	list-style: none;
+	padding-left: 0;
 }
 
 blockquote {
-  font-style: italic;
+	font-style: italic;
 }
 
 figcaption {
-  text-align: center;
-  font-style: italic;
-  font-size: 14px;
+	text-align: center;
+	font-style: italic;
+	font-size: 14px;
 }
 
 figure {
-  text-align: center;
+	text-align: center;
 }
 
 figure img {
-  width: 100%;
-  max-width: 500px;
-  min-width: 300px;
-  height: auto;
+	width: 100%;
+	max-width: 500px;
+	min-width: 300px;
+	height: auto;
 }
 
 .shiki {
-  padding: 1rem;
-  /* border: 1pt solid black; */
-  background-color: whitesmoke !important;
-  overflow: auto;
+	padding: 1rem;
+	/* border: 1pt solid black; */
+	background-color: whitesmoke !important;
+	overflow: auto;
 }
 
 .code-stats-sect {
-  font-family: sans-serif !important;
+	font-family: sans-serif !important;
 }
 
 .code-stat-grid {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-bottom: 0.5rem;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	margin-bottom: 0.5rem;
 }
 
 .code-stat-label {
-  font-weight: bold;
-  font-family: sans-serif;
+	font-weight: bold;
+	font-family: sans-serif;
 }
 
 .code-stats-disclaimer {
-  font-style: italic;
-  font-size: 14px;
-  text-align: center;
+	font-style: italic;
+	font-size: 14px;
+	text-align: center;
 }
 
 .about-li-padding {
-  padding-right: 1rem;
+	padding-right: 1rem;
 }
 
 h1.site-title,
 h1.post-title {
-  margin-bottom: 0.75rem;
+	margin-bottom: 0.75rem;
 }
 
 .big-title {
-  padding-bottom: 0.5rem;
-  margin-bottom: 0.5rem;
-  border-bottom: 1px solid black;
+	padding-bottom: 0.5rem;
+	margin-bottom: 0.5rem;
+	border-bottom: 1px solid black;
 }
 
 .blog-meta {
-  font-size: 14px;
+	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;
 }
diff --git a/src/templates/MainTemplate.jsx b/src/templates/MainTemplate.jsx
index ebac9c7..99ec21f 100644
--- a/src/templates/MainTemplate.jsx
+++ b/src/templates/MainTemplate.jsx
@@ -2,71 +2,80 @@
 
 import { Link } from "react-router"
 const Header = () => {
-  return (
-    <header>
-      <nav className="">
-        <h1 className="site-title">
-          <Link className="title-link plain-link" to="/">
-            Systems Obscure
-          </Link>
-        </h1>
-        <ul className="header-links">
-          <li>
-            <Link to="/">Home</Link>
-          </li>
+	return (
+		<header>
+			<nav className="">
+				<h1 className="site-title">
+					<Link className="title-link plain-link" to="/">
+						Systems Obscure
+					</Link>
+				</h1>
+				<ul className="header-links">
+					<li>
+						<Link to="/">Home</Link>
+					</li>
 
-          <li>
-            <Link to="/posts">Posts</Link>
-          </li>
-          <li>
-            <Link to="/about">About</Link>
-          </li>
-          <li className="flex flex-col items-center justify-center">
-            <a
-              className=""
-              href="https://forgejo.systemsobscure.net/thomasabishop"
-              target="blank"
-            >
-              Code
-            </a>
-          </li>
-        </ul>
-      </nav>
-    </header>
-  )
+					<li>
+						<Link to="/posts">Posts</Link>
+					</li>
+					<li>
+						<Link to="/about">About</Link>
+					</li>
+					<li className="flex flex-col items-center justify-center">
+						<a
+							className=""
+							href="https://forgejo.systemsobscure.net/thomasabishop"
+							target="blank"
+						>
+							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>
+	)
 }
 
 const Footer = () => {
-  return (
-    <footer className="mx-auto">
-      <nav>
-        <ul className="">
-          <li className="flex flex-col items-center justify-center">
-            <a
-              className=""
-              href="https://forgejo.systemsobscure.net/thomasabishop"
-              target="blank"
-            >
-              Forgejo
-            </a>
-          </li>
-        </ul>
-      </nav>
-    </footer>
-  )
+	return (
+		<footer className="mx-auto">
+			<nav>
+				<ul className="">
+					<li className="flex flex-col items-center justify-center">
+						<a
+							className=""
+							href="https://forgejo.systemsobscure.net/thomasabishop"
+							target="blank"
+						>
+							Forgejo
+						</a>
+					</li>
+				</ul>
+			</nav>
+		</footer>
+	)
 }
 
 const MainTemplate = ({ children }) => {
-  return (
-    <div className="">
-      <main className="">
-        <Header />
-        <div>{children}</div>
-      </main>
-    </div>
-  )
+	return (
+		<div className="">
+			<main className="">
+				<Header />
+				<div>{children}</div>
+			</main>
+		</div>
+	)
 }
 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
-