Merge pull request #61 from skovhus/use-next-fonts

Load fonts using next
skovhus · Nov 13, 2023 · 2e95ec0 · 2e95ec0 · vercel · Nov 13, 2023
2 parents 81f7df5 + b43efec
commit 2e95ec0
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 27 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -156,7 +156,6 @@ html {
 body {
   margin: 0;
   color: var(--color-text-body);
-  font-family: 'Merriweather', 'Georgia', serif;
   font-weight: 300;
   word-wrap: break-word;
   font-kerning: normal;
@@ -367,7 +366,7 @@ h1 {
   padding-top: 0;
   margin-bottom: 1.75rem;
   color: inherit;
-  font-family: Montserrat, sans-serif;
+  font-family: var(--font-montserrat);
   font-weight: 300;
   text-rendering: optimizeLegibility;
   font-size: 2rem;
@@ -383,7 +382,6 @@ h2 {
   padding-top: 0;
   margin-bottom: 1.75rem;
   color: inherit;
-  font-family: 'Merriweather', 'Georgia', serif;
   font-weight: 300;
   text-rendering: optimizeLegibility;
   font-size: 1.6rem;
@@ -399,7 +397,6 @@ h3 {
   padding-top: 0;
   margin-bottom: 1.75rem;
   color: inherit;
-  font-family: 'Merriweather', 'Georgia', serif;
   font-weight: 300;
   text-rendering: optimizeLegibility;
   font-size: 1.4427rem;
@@ -415,7 +412,6 @@ h4 {
   padding-top: 0;
   margin-bottom: 1.75rem;
   color: inherit;
-  font-family: 'Merriweather', 'Georgia', serif;
   font-weight: 300;
   text-rendering: optimizeLegibility;
   font-size: 1rem;
@@ -433,7 +429,6 @@ h5 {
   padding-top: 0;
   margin-bottom: 1.75rem;
   color: inherit;
-  font-family: 'Merriweather', 'Georgia', serif;
   font-weight: 300;
   text-rendering: optimizeLegibility;
   font-size: 0.83255rem;
@@ -449,7 +444,6 @@ h6 {
   padding-top: 0;
   margin-bottom: 1.75rem;
   color: inherit;
-  font-family: 'Merriweather', 'Georgia', serif;
   font-weight: 300;
   text-rendering: optimizeLegibility;
   font-size: 0.75966rem;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,7 +1,6 @@
-import 'typeface-merriweather'
-import 'typeface-montserrat'
 import './globals.css'
 
+import { Merriweather, Montserrat } from 'next/font/google'
 import Script from 'next/script'
 import { Suspense } from 'react'
 
@@ -11,13 +10,27 @@ import { NavigationTracking } from '../components/NavigationTracking'
 import { getBaseMetadata } from '../lib/constants'
 import styles from './layout.module.css'
 
+const merriweather = Merriweather({
+  subsets: ['latin'],
+  style: ['normal', 'italic'],
+  weight: ['300'],
+})
+
+const montserrat = Montserrat({
+  subsets: ['latin'],
+  weight: ['300'],
+  variable: '--font-montserrat',
+})
+
 export const metadata = getBaseMetadata()
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <body>
-        <main className={styles.main}>
+        <main
+          className={`${styles.main} ${merriweather.className} ${montserrat.variable}`}
+        >
           <Header />
           <section>{children}</section>
           <Footer />

diff --git a/package.json b/package.json
@@ -25,9 +25,7 @@
     "rehype-figure": "^1.0.1",
     "rehype-pretty-code": "^0.10.2",
     "rehype-slug": "^6.0.0",
-    "shiki": "^0.14.5",
-    "typeface-merriweather": "^1.1.13",
-    "typeface-montserrat": "^1.1.13"
+    "shiki": "^0.14.5"
   },
   "devDependencies": {
     "@types/node": "^20.1.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml