CHORE: Switch to free Google fonts

sethkrasnianski · Jul 29, 2024 · 4545b15 · 4545b15
1 parent 3c511f2
commit 4545b15
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -14,9 +14,17 @@ const Layout: React.FC = ({ children }) => {
         />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
-        <link rel="stylesheet" href="https://use.typekit.net/qka6xnx.css" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin="anonymous"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Libre+Caslon+Text:ital@0;1&display=swap"
+          rel="stylesheet"
+        />
       </Head>
-      <Script src="https://use.fonticons.com/13897413.js"></Script>
 
       <Header />
       <main>{children}</main>

diff --git a/styles/Home.module.scss b/styles/Home.module.scss
@@ -7,7 +7,7 @@
     text-decoration: none;
 
     &:after {
-      bottom: 5px;
+      bottom: -5px;
       content: "";
       display: block;
       height: 2px;
@@ -18,7 +18,7 @@
     }
 
     &:hover:after {
-      bottom: 10px;
+      bottom: 0px;
     }
 
     &.mojotech {

diff --git a/styles/globals.css b/styles/globals.css
@@ -339,8 +339,8 @@ th {
 /* Application Globals */
 
 :root {
-  --font-primary: "adobe-caslon-pro", Georgia, serif;
-  --font-secondary: "futura-pt", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-primary: "Libre Caslon Text", Georgia, serif;
+  --font-secondary: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
 
   --white: #f9f9f9;
   --color-primary: #383838;
@@ -416,7 +416,7 @@ h2 {
 }
 p {
   font-family: var(--font-primary);
-  font-size: 22px;
+  font-size: 19px;
   line-height: 35px;
 }
 @media only screen and (max-width: 768px) {