Using space mono as a font

Xithrius · Jul 1, 2023 · 4c6cd95 · 4c6cd95 · vercel · Jul 1, 2023
1 parent dfba36e
commit 4c6cd95
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 5 deletions.
diff --git a/site/lib/components/post-body.tsx b/site/lib/components/post-body.tsx
@@ -13,6 +13,7 @@ const PostBody = ({ content }: Props) => {
       prose-code:before:content-none
       prose-code:after:content-none
       dark:prose-invert
+      font-['Space_Mono']
       "
       dangerouslySetInnerHTML={{ __html: content }}
     />

diff --git a/site/lib/components/post-header.tsx b/site/lib/components/post-header.tsx
@@ -11,7 +11,7 @@ const PostHeader = ({ title, date }: Props) => {
   return (
     <>
       <PostTitle>{title}</PostTitle>
-      <div className="mx-auto max-w-2xl">
+      <div className="mx-auto max-w-2xl font-['Space_Mono']">
         <div className="flex-column mb-12 flex text-lg">
           <DateFormatter dateString={date} />
           <TopLeftNavigation href="/blog">back</TopLeftNavigation>

diff --git a/site/lib/components/post-preview.tsx b/site/lib/components/post-preview.tsx
@@ -10,8 +10,8 @@ type Props = {
 const PostPreview = ({ title, date, slug }: Props) => {
   return (
     <Link as={`blog/posts/${slug}`} href="blog/posts/[slug]">
-      <div className="card p-5 transition hover:shadow-xl">
-        <h3 className="mb-1 text-3xl leading-snug">{title}</h3>
+      <div className="card p-3 font-['Space_Mono'] transition hover:shadow-xl">
+        <h3 className="mb-1 leading-snug">{title}</h3>
         <div className="opacity-50">
           <div className="text-lg">
             <DateFormatter dateString={date} />

diff --git a/site/lib/components/post-title.tsx b/site/lib/components/post-title.tsx
@@ -6,7 +6,9 @@ type Props = {
 
 const PostTitle = ({ children }: Props) => {
   return (
-    <h1 className="mx-auto mt-8 mb-3 max-w-2xl text-4xl font-bold leading-tight">{children}</h1>
+    <h1 className="mx-auto mb-3 mt-8 max-w-2xl font-['Space_Mono'] text-4xl font-bold leading-tight">
+      {children}
+    </h1>
   );
 };
 

diff --git a/site/styles/globals.css b/site/styles/globals.css
@@ -1,13 +1,14 @@
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Turret+Road:wght@200&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
   html {
-    font-family: "Montserrat", "Turret Road";
+    font-family: "Montserrat", "Turret Road", "Space Mono";
   }
 
   body {