next google fonts

配x

這個項目已被棄用

截至接下來。 JS10.2，Google字體會自動優化？

感謝您對這個項目的愛和支持，
喬

---

下一個google-fonts

一個很小的next/head助手，用於加載Google字體快速，異步⏩

使用next.js 10？請參閱“這與Next.js字體優化相比如何？”在繼續之前。

目錄

1. 設定
2. 常見問題解答

設定

在此示例中，我們將將Inter （特別是重量400和700 ）添加到Next.js應用程序。

有關工作示例，請參見Joebell.co.uk。

1. 將軟件包添加到您的下一個項目：JS項目：

   npm i next-google-fonts

2. 創建一個自定義的Head組件。

   重要的是要認識到next-google-fonts是一個小的next/head組件，不應嵌套在next/head內。要解決這個問題，請用Fragment包裹兩個組件。

    // components/head.js
   import * as React from "react" ;
   import NextHead from "next/head" ;
   import { GoogleFonts } from "next-google-fonts" ;
   
   export const Head = ( { children , title } ) => (
     < React . Fragment >
       < GoogleFonts href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;700 & display = swap " />
       < NextHead >
         < meta charSet = "UTF-8" />
         < meta
           name = "viewport"
           content = "width=device-width, initial-scale=1.0"
         />
         < meta httpEquiv = "x-ua-compatible" content = "ie=edge" />
   
         < title > { title } </ title >
   
         { children }
       </ NextHead >
     </ React . Fragment >
   ) ;

3. 通過明智的後備將所需的Google字體/S添加到樣式中。無論您使用CSS還是SASS還是CSS-IN-JS，都無關緊要：

    body {
     font-family : "Inter" , sans-serif;
   }

4. 運行您的next.js應用程序以查看結果中的結果！

   您應該期望首先看到後備字體，然後切換到Google字體/s，而沒有任何渲染阻塞的CSS警告。您的字體將繼續顯示，直到您的應用重新歸水為止。

   如果禁用JS，則僅顯示後備字體。

常見問題解答

• 這與Next.js字體優化相比如何？
• 為什麼？

這與Next.js字體優化相比如何？

Next.js 10引入了自動Google字體優化，您可以根據以下標準決定使用哪種解決方案：

• “我的字體不是優先級，可以異步加載” - 使用next-google-fonts 。
• “我的字體是優先的，不應異步加載” - 使用Next.js字體優化。

有關進一步閱讀，請參見Next.js發行討論。

為什麼？

next-google-fonts旨在使在Next.js中使用Google字體的過程更加一致，更快，更輕鬆：它預先連接到字體資產，預加載和異步將CSS文件加載。

在next/head的當前迭代中，我們無法使用異步Google字體加載的熟悉的“媒體黑客”方法：

 <!-- Plain HTML -->
< link
  rel =" stylesheet "
  href =" https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap "
  media =" print "
  onload =" this.media='all' "
/>

如果您想在Next.js中跟踪此問題，則可以在此處關注：Next.js＃12984。