next google fonts 다운로드 - next google fonts 소스 코드 다운로드

next google fonts

AI 소스 코드

v2.2.0

다운로드

켈

이 프로젝트는 더 이상 사용되지 않았습니다

다음 .js 10.2에서 Google Fonts가 자동으로 최적화됩니까?

이 프로젝트에 대한 모든 사랑과 지원에 감사드립니다.
조

다음 -Google-Fonts

Google 글꼴을 빠르고 비동기 적으로 로드하기위한 작은 next/head 헬퍼

Next.js 10? "이것은 다음.js 글꼴 최적화와 어떻게 비교됩니까?" 계속하기 전에.

설정

이 예에서는 Next.js 앱에 Inter (특히 가중치 400 및 700 )를 추가 할 것입니다.

작업 예제는 Joebell.co.uk를 참조하십시오.

다음에 패키지를 추가하십시오 .JS 프로젝트 :
```
npm i next-google-fonts
```

사용자 정의 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 >
) ;

현명한 폴백으로 요청 된 Google Font/S를 스타일에 추가하십시오. CSS 또는 SASS 또는 CSS-in-JS를 사용하든 상관 없습니다.
```
 body {
  font-family : "Inter" , sans-serif;
}
```
결과를 확인하려면 다음.js 앱을 실행하십시오!
먼저 폴백 글꼴을보고 렌더링 블로킹 CSS 경고없이 Google 글꼴/S로 전환해야합니다. 앱이 앱이 재화 될 때까지 글꼴/s가 계속 표시됩니다.
JS가 비활성화되면 폴백 글꼴 만 표시됩니다.

FAQ

이것은 Next.js 글꼴 최적화와 어떻게 비교됩니까?
왜?

이것은 Next.js 글꼴 최적화와 어떻게 비교됩니까?

Next.js 10 자동 Google 글꼴 최적화가 소개되면 다음 기준에 따라 사용할 솔루션을 결정할 수 있습니다.

"내 글꼴이 우선 순위가 아니며 비동기식으로 로드 할 수 있습니다"- next-google-fonts 사용하십시오.
"내 글꼴이 우선 순위 이며 비동기식으로 로드되어서는 안됩니다 ." - Next.js 글꼴 최적화를 사용하십시오.

자세한 내용은 Next.js Issue 토론을 참조하십시오.

왜?

next-google-fonts Next.js에서 Google Fonts를 사용하는 프로세스를보다 일관되고 빠르며 통증이없는 프로세스를 제공하는 것을 목표로합니다. FONT 자산, 사전로드 및 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' "
/>