perf: improve load fonts (#69)

inabagumi · Dec 9, 2019 · 8e03a7a · 8e03a7a
1 parent 4fafe40
commit 8e03a7a
Showing 1 changed file with 19 additions and 3 deletions.
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -31,16 +31,19 @@ const MyApp: FC<AppProps> = ({ Component, pageProps }) => {
             sizes="152x152"
           />
           <link
+            as="style"
             href="https://fonts.googleapis.com/css?display=swap&amp;family=Roboto+Slab:300,400,500,700"
-            rel="stylesheet"
+            rel="preload"
           />
           <link
+            as="style"
             href="https://fonts.googleapis.com/css?display=swap&amp;family=Noto+Sans+JP:300,400,500,700"
-            rel="stylesheet"
+            rel="preload"
           />
           <link
+            as="style"
             href="https://fonts.googleapis.com/css?display=swap&amp;family=Noto+Serif+JP:300,400,500,700"
-            rel="stylesheet"
+            rel="preload"
           />
         </Head>
 
@@ -49,6 +52,19 @@ const MyApp: FC<AppProps> = ({ Component, pageProps }) => {
         <Component {...pageProps} />
 
         <ProgressBar />
+
+        <link
+          href="https://fonts.googleapis.com/css?display=swap&amp;family=Roboto+Slab:300,400,500,700"
+          rel="stylesheet"
+        />
+        <link
+          href="https://fonts.googleapis.com/css?display=swap&amp;family=Noto+Sans+JP:300,400,500,700"
+          rel="stylesheet"
+        />
+        <link
+          href="https://fonts.googleapis.com/css?display=swap&amp;family=Noto+Serif+JP:300,400,500,700"
+          rel="stylesheet"
+        />
       </ThemeProvider>
     </IntlProvider>
   )