drop typography and bring in a reset instead

gatsby-browser.js

@@ -1,2 +1,2 @@
-import "typeface-prociono";
+import "@fontsource/prociono";
 import "prismjs/themes/prism-okaidia.css";

gatsby-config.js

@@ -93,11 +93,5 @@ module.exports = {
       },
     },
     `gatsby-plugin-react-helmet`,
-    {
-      resolve: `gatsby-plugin-typography`,
-      options: {
-        pathToConfigModule: `src/utils/typography`,
-      },
-    }
   ],
 };

package.json

@@ -8,6 +8,7 @@
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
   "dependencies": {
+    "@fontsource/prociono": "^5.0.16",
     "babel-plugin-styled-components": "^2.1.4",
     "gatsby": "^5.12.1",
     "gatsby-plugin-image": "^3.12.0",
@@ -16,7 +17,6 @@
     "gatsby-plugin-sharp": "^5.12.0",
     "gatsby-plugin-slug": "^2.0.0",
     "gatsby-plugin-styled-components": "^6.12.0",
-    "gatsby-plugin-typography": "^5.12.0",
     "gatsby-remark-autolink-headers": "^6.12.0",
     "gatsby-remark-copy-linked-files": "^6.12.0",
     "gatsby-remark-emojis": "^0.4.3",
@@ -37,13 +37,11 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
+    "react-if": "^4.1.5",
     "react-typography": "^0.16.23",
     "reveal.js": "^4.6.1",
     "styled-components": "^6.1.0",
-    "typeface-merriweather": "1.1.13",
-    "typeface-montserrat": "1.1.13",
-    "typeface-prociono": "1.1.13",
-    "typography": "^0.16.24"
+    "styled-reset": "^4.5.1"
   },
   "devDependencies": {
     "gatsby-cli": "^5.12.1",

src/components/bio.js

@@ -7,8 +7,12 @@
 
 import React from "react"
 
-import { rhythm } from "../utils/typography"
 import { useStaticQuery, graphql } from "gatsby";
+import styled from "styled-components";
+
+const BioContainer = styled.div`
+  margin-bottom: 4.375rem;
+`;
 
 const Bio = () => {
   const { site } = useStaticQuery(
@@ -31,11 +35,7 @@ const Bio = () => {
   const social = site.siteMetadata.social;
 
   return (
-    <div
-      style={{
-        marginBottom: rhythm(2.5),
-      }}
-    >
+    <BioContainer>
       <p>
         I'm not <i>the</i> James, just a James.
       </p>
@@ -67,7 +67,7 @@ const Bio = () => {
         or <a href={`https://github.com/${social.github}`}>check out my Github</a>.
 
       </p>
-    </div>
+    </BioContainer>
   );
 };