From 839f0b62fdc08613471214266c46673d6d527552 Mon Sep 17 00:00:00 2001
From: Holtz Yan <holtzy@Holtzs-MacBook-Pro.local>
Date: Tue, 1 Aug 2023 10:02:13 +0200
Subject: [PATCH] load font properly to avoid CLS

---
 component/HeadSeo.tsx | 12 ------------
 fonts.ts              | 16 ++++++++++++++++
 pages/_app.tsx        | 10 +++++-----
 style/style.css       |  2 --
 4 files changed, 21 insertions(+), 19 deletions(-)
 create mode 100644 fonts.ts

diff --git a/component/HeadSeo.tsx b/component/HeadSeo.tsx
index a5b758d0..9b749108 100644
--- a/component/HeadSeo.tsx
+++ b/component/HeadSeo.tsx
@@ -29,18 +29,6 @@ export const HeadSeo = ({ title, seoDescription }: HeadSeoProps) => {
         sizes="16x16"
         href="/favicon/favicon-16x16.png"
       />
-
-      {/* Load fonts. Then used in style.css */}
-      <link
-        href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Roboto+Mono:wght@300&display=swap"
-        rel="stylesheet"
-      />
-      {/* Bitter AND roboto in 1 shot */}
-      <link
-        href="https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-        rel="stylesheet"
-      ></link>
-
       <meta
         name="keywords"
         content="React, D3, D3.js, data, dataviz, data visualization, DOM, web, dev, chart, graph"
diff --git a/fonts.ts b/fonts.ts
new file mode 100644
index 00000000..4ab0b0b0
--- /dev/null
+++ b/fonts.ts
@@ -0,0 +1,16 @@
+// This is where I load my fonts
+// Read https://nextjs.org/docs/pages/building-your-application/optimizing/fonts
+// Fonts are downloaded at build time
+// Users won't make a call to google when using the website
+import { Bitter, Roboto } from 'next/font/google';
+
+export const inter = Bitter({
+  subsets: ['latin'],
+  display: 'swap',
+});
+
+export const roboto = Roboto({
+  weight: ['300', '500', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+});
diff --git a/pages/_app.tsx b/pages/_app.tsx
index c4f6e071..01e61373 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,8 +1,8 @@
-import "tailwindcss/tailwind.css";
-import "../style/style.css";
-import type { AppProps } from "next/app";
-import Script from "next/script";
-import "../style/prism.css";
+import 'tailwindcss/tailwind.css';
+import '../style/style.css';
+import type { AppProps } from 'next/app';
+import Script from 'next/script';
+import '../style/prism.css';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
diff --git a/style/style.css b/style/style.css
index 08b8669b..c9768283 100644
--- a/style/style.css
+++ b/style/style.css
@@ -61,8 +61,6 @@ body {
   font-size: 19px;
   line-height: 30px;
   color: #333;
-  /* Trying to load fonts better to solve CLS issue */
-  font-display: optional;
 }
 
 p {