Add more fonts (#5841)

gaearon · web-flow · commit 6b22284eb33a · 2023-03-30T00:39:37.000+01:00
* Use regular font for body text

* Use primary text color for content area

* Keep medium font for nav

* Add italics

* Hook up more fonts
diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
@@ -128,7 +128,9 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
         {/* No fallback UI so need to be careful not to suspend directly inside. */}
         <Suspense fallback={null}>
           <main className="min-w-0 isolate">
-            <article className="break-words" key={asPath}>
+            <article
+              className="break-words font-normal text-primary dark:text-primary-dark"
+              key={asPath}>
               {content}
             </article>
             <div
diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx
@@ -138,6 +138,20 @@ export const Seo = withRouter(
           type="font/woff2"
           crossOrigin="anonymous"
         />
+        <link
+          rel="preload"
+          href="https://react.dev/fonts/Optimistic_Text_W_Rg.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+        <link
+          rel="preload"
+          href="https://react.dev/fonts/Optimistic_Text_W_It.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
         {children}
       </Head>
     );
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -9,7 +9,7 @@ const MyDocument = () => {
   return (
     <Html lang="en">
       <Head />
-      <body className="font-text antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
+      <body className="font-text font-medium antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
         <script
           dangerouslySetInnerHTML={{
             __html: `
diff --git a/src/styles/index.css b/src/styles/index.css
