preload font

2026-08-24 03:55:49 -05:00 · 2021-02-24 12:58:53 +02:00
parent 1a60a286e1
commit e748e3938b
6 changed files with 1101 additions and 2492 deletions
--- a/components/layout/TopNav.tsx
+++ b/components/layout/TopNav.tsx
@@ -110,7 +110,7 @@ const TopNav = () => {
      </Flex>
      <Box
        justifySelf="center"
-        fontFamily="Rubik, sans-serif"
+        fontFamily="'Rubik', sans-serif"
        color="gray.600"
        fontWeight="bold"
        letterSpacing={1}
--- a/next.config.js
+++ b/next.config.js
@@ -9,6 +9,9 @@ module.exports = withImages({
      },
    ];
  },
+  experimental: {
+    optimizeFonts: true,
+  },
  // i18n: {
  //  v-- import from lib/locales
  //   locales: [
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -32,7 +32,6 @@
    "framer-motion": "^3.6.2",
    "next": "^10.0.7",
    "next-auth": "^3.4.2",
-    "next-google-fonts": "^1.2.1",
    "next-images": "^1.7.0",
    "next-seo": "^4.20.0",
    "nprogress": "^0.2.0",
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -6,7 +6,6 @@ import Layout from "components/layout";
 import { activateLocale } from "lib/i18n";
 import { locales } from "lib/lists/locales";
 import { Provider as NextAuthProvider } from "next-auth/client";
-import GoogleFonts from "next-google-fonts";
 import { DefaultSeo } from "next-seo";
 import type { AppProps } from "next/app";
 import Head from "next/head";
@@ -152,9 +151,6 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
      <Head>
        <link rel="stylesheet" type="text/css" href="/nprogress.css" />
      </Head>
-      <GoogleFonts
-        href={`https://fonts.googleapis.com/css2?family=Rubik&display=swap`}
-      />
      <DefaultSeo
        title="sendou.ink"
        description="Competitive Splatoon hub featuring several tools and resources."
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -20,6 +20,10 @@ class MyDocument extends Document {
    return (
      <Html>
        <Head>
+          <link
+            href="https://fonts.googleapis.com/css2?family=Rubik&display=swap"
+            rel="stylesheet"
+          ></link>
          {/* Global Site Tag (gtag.js) - Google Analytics */}
          {process.env.NODE_ENV === "production" && (
            <>