feat: self-host IBM Plex Sans font

arunsathiya · Oct 25, 2024 · 8a523a2 · 8a523a2
1 parent 840604c
commit 8a523a2
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "@aws-sdk/client-s3": "^3.666.0",
     "@aws-sdk/lib-storage": "^3.666.0",
     "@aws-sdk/s3-request-presigner": "^3.666.0",
+    "@fontsource/ibm-plex-sans": "^5.1.0",
     "@notionhq/client": "^2.2.15",
     "astro": "^4.15.10",
     "astro-embed": "^0.7.2",

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -2,6 +2,7 @@
 import BaseHead from './components/BaseHead.astro';
 import Header from './components/Header.astro';
 import Footer from './components/Footer.astro';
+import 'src/styles/global.css';
 import { loadEnv } from 'vite';
 
 const { GTAG_MEASUREMENT_ID } = loadEnv(process.env.NODE_ENV || 'production', process.cwd(), '');
@@ -12,7 +13,6 @@ const { title, description, image } = Astro.props;
 <html lang='en'>
 	<head>
 		<BaseHead title={title} description={description} image={image} />
-		<link href='https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap' rel='stylesheet' />
 	</head>
 	<body class='bg-white dark:bg-zinc-900 dark:text-zinc-100 pt-16 sm:pt-0'>
 		<Header />

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,7 +1,16 @@
+@import '@fontsource/ibm-plex-sans/400.css';
+@import '@fontsource/ibm-plex-sans/500.css';
+@import '@fontsource/ibm-plex-sans/600.css';
+@import '@fontsource/ibm-plex-sans/700.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 @layer base {
+	body {
+		font-family: 'IBM Plex Sans', sans-serif;
+	}
 	pre,
 	code {
 		font-size: 0.875rem;

diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -18,9 +18,6 @@ export default {
 					},
 				},
 			},
-			fontFamily: {
-				sans: ['IBM Plex Sans', 'sans-serif'],
-			},
 		},
 	},
 	plugins: [require('@tailwindcss/typography')],

diff --git a/yarn.lock b/yarn.lock
@@ -1530,6 +1530,11 @@
   resolved "https://registry.yarnpkg.com/@fastify/busboy/-/busboy-2.1.1.tgz#b9da6a878a371829a0502c9b6c1c143ef6663f4d"
   integrity sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==
 
+"@fontsource/ibm-plex-sans@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@fontsource/ibm-plex-sans/-/ibm-plex-sans-5.1.0.tgz#9cd6bcce9817c55565ae2cf92629ce9a9f617a6b"
+  integrity sha512-v2aFHGh33ogG+At6dVNUCX6vWlNAhQ6STWj5WrBKPxVWX1SsAnHNq8sXQBa7WHEt29Irmozuk7GTp6GzFlpwdQ==
+
 "@img/sharp-darwin-arm64@0.33.5":
   version "0.33.5"
   resolved "https://registry.yarnpkg.com/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz#ef5b5a07862805f1e8145a377c8ba6e98813ca08"