Replace Levenim MT with Figtree Light (#151)

* Changed Levenim MT to Gantari * Added Roboto Mono to make monospace fonts global * Changed to Figtree to test * Added Noto Sans Display Light for testing * Reduced changes to Figtree Light * Removed Levenim MT * Increased global letterSpacing * Reducing to 0.025em * Fixing a margin className typo * Upgrading next from 13.3.0 to 13.4.8
ocelotconsulting · Jul 14, 2023 · 04b64bd · 04b64bd
1 parent d1bec47
commit 04b64bd
Show file tree

Hide file tree

Showing 12 changed files with 3,091 additions and 905 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,15 +22,15 @@
     "@lottiefiles/react-lottie-player": "^3.5.3",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@next/mdx": "^13.3.0",
+    "@next/mdx": "^13.4.8",
     "@tailwindcss/typography": "^0.5.9",
     "@tailwindui/react": "^0.1.1",
     "@types/node": "18.15.11",
     "@types/react": "18.0.33",
     "@types/react-dom": "18.0.11",
     "autoprefixer": "10.4.14",
     "dayjs": "^1.11.7",
-    "next": "13.3.0",
+    "next": "13.4.8",
     "postcss": "8.4.21",
     "prop-types": "^15.8.1",
     "react": "18.2.0",

diff --git a/public/assets/lvnm.eot b/public/assets/lvnm.eot
diff --git a/public/assets/lvnm.svg b/public/assets/lvnm.svg
diff --git a/public/assets/lvnm.ttf b/public/assets/lvnm.ttf
diff --git a/public/assets/lvnm.woff b/public/assets/lvnm.woff
diff --git a/public/assets/lvnm.woff2 b/public/assets/lvnm.woff2
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -4,7 +4,6 @@ import { useState } from 'react'
 import type { AppProps } from 'next/app'
 import Header from '@/components/Header'
 import Footer from '@/components/Footer'
-import localFont from 'next/font/local'
 import ContactDrawer from '@/components/ContactDrawer'
 import MenuDrawer from '@/components/MenuDrawer'
 import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'
@@ -14,14 +13,19 @@ import '@fortawesome/fontawesome-svg-core/styles.css';
 // Prevent fontawesome from adding its CSS since we did it manually above:
 import { config } from '@fortawesome/fontawesome-svg-core';
 config.autoAddCss = false; /* eslint-disable import/first */
+import { Roboto_Mono, Figtree } from 'next/font/google'
 
-const font = localFont({
-    src: [
-        {path: '../../public/assets/lvnm.woff2'},
-        {path: '../../public/assets/lvnm.woff'},
-        {path: '../../public/assets/lvnm.ttf'},
-        {path: '../../public/assets/lvnm.eot'}
-    ],
+const figtree = Figtree({
+    subsets: ['latin'],
+    weight: ['300'],
+    display: 'swap',
+    variable: '--font-figtree',
+})
+
+const robotoMono = Roboto_Mono({
+    subsets: ['latin'],
+    display: 'swap',
+    variable: '--font-roboto-mono',
 })
 
 export default function App({ Component, pageProps }: AppProps) {
@@ -44,6 +48,14 @@ export default function App({ Component, pageProps }: AppProps) {
                 nonce: undefined,
             }}
         >
+            <style jsx global>
+                {`
+                    :root,:host {
+                        --font-roboto-mono: ${robotoMono.style.fontFamily};
+                        --font-figtree: ${figtree.style.fontFamily};
+                    }
+                `}
+            </style>
             <Head>
                 <title>Ocelot Consulting</title>
                 <meta name='designed by' content='Fluid22' />
@@ -68,15 +80,13 @@ export default function App({ Component, pageProps }: AppProps) {
                 gtag('config', 'UA-84294052-1');
                 `}
             </Script>
-            <div className={font.className}>
-                <Header setShowMenu={setShowMenu} setShowContact={setShowContact} />
-                <main>
-                    <Component {...pageProps} setShowContact={setShowContact} />
-                </main>
-                <Footer />
-                <MenuDrawer show={showMenu} setShow={setShowMenu} showContactForm={() => setShowContact(true)}/>
-                <ContactDrawer show={showContact} setShow={setShowContact} />
-            </div>
+            <Header setShowMenu={setShowMenu} setShowContact={setShowContact} />
+            <main>
+                <Component {...pageProps} setShowContact={setShowContact} />
+            </main>
+            <Footer />
+            <MenuDrawer show={showMenu} setShow={setShowMenu} showContactForm={() => setShowContact(true)}/>
+            <ContactDrawer show={showContact} setShow={setShowContact} />
         </GoogleReCaptchaProvider>
     )
 }
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -4,7 +4,7 @@ export default function Document() {
   return (
     <Html lang="en" className="scroll-smooth">
       <Head />
-      <body>
+      <body className='font-body tracking-normal'>
         <Main />
         <NextScript />
       </body>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -188,7 +188,7 @@ export default function Home({cards, setShowContact}: any) {
           <Image className="lg:hidden object-cover md:h-[600px] lg:h-auto" src={empowerMobile} alt="" />
         </div>
         <FadeIn className="lg:p-12 md:py-4 md:pr-8">
-          <h2 className="text-3xl lg:text-5xl font-bold text-black mb2">Making technology work for you, not the other way around</h2>
+          <h2 className="text-3xl lg:text-5xl font-bold text-black mb-2">Making technology work for you, not the other way around</h2>
           <p className="mb-10">Technology investments don’t always yield the desired value, and companies are facing major challenges in harnessing technology to fuel innovation. <strong>Ocelot can help you navigate modern platforms to maximize your return on investment.</strong></p>
 
           <Button href="/case-studies">

diff --git a/src/styles/prism-coldark-cold.css b/src/styles/prism-coldark-cold.css
@@ -1,7 +1,8 @@
 code[class*="language-"],
 pre[class*="language-"] {
 	color: #ebdbb2; /* fg1 / fg */
-	font-family: Consolas, Monaco, "Andale Mono", monospace;
+	/* Leaving this unset inherits from font-mono from Tailwind */
+	/* font-family: Consolas, Monaco, "Andale Mono", monospace; */
 	direction: ltr;
 	text-align: left;
 	white-space: pre;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,3 +1,5 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
@@ -26,9 +28,10 @@ module.exports = {
       }
     },
     fontFamily: {
-      heading: ['Levenim', 'sans-serif'],
-      body: ['Poppins', 'sans-serif'],
-      sans: ['Poppins', 'sans-serif']
+      heading: ['var(--font-figtree)', ...defaultTheme.fontFamily.sans],
+      body: ['var(--font-figtree)', ...defaultTheme.fontFamily.sans],
+      sans: ['var(--font-figtree)', ...defaultTheme.fontFamily.sans],
+      mono: ['var(--font-roboto-mono)', ...defaultTheme.fontFamily.mono],
     },
     fontSize: {
       xs: ['0.75rem', '1rem'],
@@ -46,11 +49,11 @@ module.exports = {
       '9xl': ['8rem', '1.1'],
     },
     letterSpacing: {
-      tighter: '-0.05em',
-      tight: '-.025em',
-      normal: '0',
-      wide: '.025em',
-      wider: '.05em',
+      tighter: '-0.025em',
+      tight: '0',
+      normal: '.025em',
+      wide: '.05em',
+      wider: '.75em',
       widest: '.25em',
     },
     extend: {
@@ -66,7 +69,7 @@ module.exports = {
     }
   },
   plugins: [
-      require('@tailwindcss/forms'),
-      require("@tailwindcss/typography")
+    require('@tailwindcss/forms'),
+    require("@tailwindcss/typography")
   ],
 }