Add PPNeueMachina font (#4)

BuidlGuidl · Jul 12, 2023 · 615df9d · 615df9d
1 parent 3c0eaa6
commit 615df9d
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 8 deletions.
diff --git a/packages/nextjs/components/Card.tsx b/packages/nextjs/components/Card.tsx
@@ -23,7 +23,7 @@ export const Card = ({
       </div>
       <div className="mb-4">
         <span className="font-thin text-xs">Challenge #{num}</span>
-        <p className="font-bold text-lg m-0 mb-2">{name}</p>
+        <h3 className="text-lg m-0 mb-2">{name}</h3>
         <p className="text-gray-700 m-0 text-sm">{description}</p>
       </div>
       <a

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
@@ -12,18 +12,14 @@ const Home: NextPage = () => {
       <div className="bg-[url(/assets/hero.png)] min-h-[85vh] bg-cover bg-center">
         <Header />
         <div className="flex justify-center">
-          <h1 className="text-center text-4xl lg:text-6xl mt-8 max-w-md lg:max-w-lg font-bold">
-            Welcome to the BuidlGuidl
-          </h1>
+          <h1 className="text-center text-4xl lg:text-6xl mt-8 max-w-md lg:max-w-lg">Welcome to the BuidlGuidl</h1>
         </div>
       </div>
       {/* Star Building on Ethereum */}
       <div className="bg-white">
         <div className="container max-w-[90%] lg:max-w-7xl m-auto py-16 lg:py-20 lg:px-12 flex flex-col-reverse lg:flex-row items-center gap-5 lg:gap-0">
           <div className="space-y-6">
-            <h1 className="text-3xl lg:text-6xl font-semibold lg:w-3/4 text-center lg:text-left">
-              Start Building on Ethereum
-            </h1>
+            <h2 className="text-3xl lg:text-6xl lg:w-3/4 text-center lg:text-left">Start Building on Ethereum</h2>
             <ul className="list-disc list-inside flex flex-col space-y-3 m-auto lg:mx-0 max-w-[300px] lg:max-w-none">
               <li>7 start to finish tutorials </li>
               <li>Learn from the best Ethereum developers (+ guidance)</li>
@@ -51,7 +47,7 @@ const Home: NextPage = () => {
         <div className="container max-w-[90%] lg:max-w-7xl m-auto py-16 lg:py-28 lg:px-12">
           <div className="bg-[url(/assets/dice.png)] bg-no-repeat bg-right-bottom lg:bg-right bg-[length:100px] lg:bg-auto max-w-3xl pb-14">
             <div className="mt-6 lg:mt-0">
-              <h1 className="text-3xl lg:text-5xl font-semibold text-center lg:text-left">Test Your Knowledge</h1>
+              <h2 className="text-3xl lg:text-5xl text-center lg:text-left">Test Your Knowledge</h2>
               <p className="text-center lg:text-left lg:w-3/4">
                 Learn that you don’t know what you don’t know. you need to go through tour of duty + SRE gets you into
                 the BG ?

diff --git a/packages/nextjs/public/fonts/PPNeueMachina-InktrapSemibold.otf b/packages/nextjs/public/fonts/PPNeueMachina-InktrapSemibold.otf
diff --git a/packages/nextjs/public/fonts/PPNeueMachina-InktrapSemibold.ttf b/packages/nextjs/public/fonts/PPNeueMachina-InktrapSemibold.ttf
diff --git a/packages/nextjs/public/fonts/PPNeueMachina-InktrapSemibold.woff b/packages/nextjs/public/fonts/PPNeueMachina-InktrapSemibold.woff
diff --git a/packages/nextjs/public/fonts/PPNeueMachina-InktrapSemibold.woff2 b/packages/nextjs/public/fonts/PPNeueMachina-InktrapSemibold.woff2
diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css
@@ -4,6 +4,17 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+@font-face {
+  font-family: "PPNeueMachina";
+  src: url("/fonts/PPNeueMachina-InktrapSemibold.woff2") format("woff2"),
+    url("/fonts/PPNeueMachina-InktrapSemibold.woff") format("woff"),
+    url("/fonts/PPNeueMachina-InktrapSemibold.ttf") format("truetype"),
+    url("/fonts/PPNeueMachina-InktrapSemibold.otf") format("opentype");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
 html {
   font-size: 18px;
 }
@@ -21,6 +32,8 @@ h1,
 h2,
 h3,
 h4 {
+  @apply font-neue-machina;
+  @apply font-semibold;
   margin-bottom: 0.5rem;
   line-height: 1;
 }

diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -66,6 +66,7 @@ module.exports = {
     extend: {
       fontFamily: {
         "space-grotesk": ["Space Grotesk", "sans-serif"],
+        "neue-machina": ["PPNeueMachina", "sans-serif"],
       },
     },
   },