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。