load font properly to avoid CLS

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"

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',
+});

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 (

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 {