Custom font

CodeStix · CodeStix · commit 50d87832137c · 2021-03-14T22:06:24.000+01:00
diff --git a/components/CenterContainer.tsx b/components/CenterContainer.tsx
@@ -12,8 +12,8 @@ const InnerContainer = styled.div`
 `;
 
 const OuterContainer = styled.div`
-    max-width: 1300px;
-    width: 1300px;
+    max-width: 1175px;
+    width: 1175px;
 `;
 
 export function CenterContainer({ children, ...rest }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,5 +1,10 @@
 import "../styles/globals.css";
 
+// https://stackoverflow.com/questions/57609931/next-js-with-fortawesome-and-ssr
+import { config } from "@fortawesome/fontawesome-svg-core";
+import "@fortawesome/fontawesome-svg-core/styles.css"; // Import the CSS
+config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
+
 function MyApp({ Component, pageProps }) {
     return <Component {...pageProps} />;
 }
diff --git a/pages/docs/[doc].tsx b/pages/docs/[doc].tsx
@@ -10,6 +10,7 @@ import styled from "styled-components";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { materialOceanic } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import Link from "next/link";
+import Head from "next/head";
 
 const ARTICLES_PATH = path.join(process.cwd(), "articles");
 
@@ -41,11 +42,30 @@ const ReactMarkdownContainer = styled.div`
         margin: 2em 0;
         border: 1px solid #0002;
     }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin: 1.2em 0 0.5em 0;
+    }
+
+    h1,
+    h2 {
+        padding-bottom: 0.2em;
+        border-bottom: 1px solid #0002;
+    }
 `;
 
 export default function DocPage(props: Props) {
     return (
         <>
+            <Head>
+                <link rel="preconnect" href="https://fonts.gstatic.com" />
+                <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap" rel="stylesheet" />
+            </Head>
             <NavBar />
             <CenterContainer style={{ margin: "2em 0.5em" }}>
                 <Container>
diff --git a/styles/globals.css b/styles/globals.css
@@ -1,16 +1,26 @@
 html,
 body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    padding: 0;
+    margin: 0;
+    font-family: "Roboto", sans-serif;
+    /* font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; */
 }
 
 a {
-  color: inherit;
-  text-decoration: none;
+    color: inherit;
+    text-decoration: none;
 }
 
 * {
-  box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: "Open Sans", sans-serif;
 }
