feat: optimize font loading, closes #29

ivoberger · Dec 19, 2020 · 08186a3 · 08186a3
1 parent 9650bc6
commit 08186a3
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 2 deletions.
diff --git a/next.config.js b/next.config.js
@@ -6,6 +6,7 @@ module.exports = withPrefresh({
   pageExtensions: ["ts", "tsx", "md", "mdx"],
   experimental: {
     jsconfigPaths: true, // enables it for both jsconfig.json and tsconfig.json
+    optimizeFonts: true,
   },
   images: {
     domains: ["images.unsplash.com"],

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -2,8 +2,6 @@ import React from "react";
 import type { AppProps } from "next/app";
 
 import "../css/index.css";
-import "typeface-catamaran";
-import "typeface-source-serif-pro";
 import { Footer } from "components";
 
 // fix for Fontawesomes huge icons on page load

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -16,6 +16,10 @@ class MyDocument extends Document {
             data-domain="ivoberger.com"
             src="https://plausible.io/js/plausible.js"
           />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Catamaran:wght@400;700&family=Source+Serif+Pro:ital@0;1&display=swap"
+            rel="stylesheet"
+          ></link>
         </Head>
         <body>
           <Main />