Google Font Display | Next.js

Source URL: https://nextjs.org/docs/messages/google-font-display

Docs ErrorsGoogle Font Display

Google Font Display

Google Fonts에서 font-display 동작을 강제합니다.

오류가 발생한 이유

Google Font에서 font-display 디스크립터가 누락되었거나 auto, block, fallback으로 설정되어 있었는데, 이는 권장되지 않는 값입니다.

가능한 해결 방법

대부분의 경우, 커스텀 폰트에 가장 적합한 font-display 전략은 optional입니다.

pages/index.js

    import Head from 'next/head'

    export default function IndexPage() {
      return (
        <div>
          <Head>
            <link
              href="https://fonts.googleapis.com/css2?family=Krona+One&display=optional"
              rel="stylesheet"
            />
          </Head>
        </div>
      )
    }

display=optional을 지정하면 보이지 않는 텍스트나 레이아웃 이동 위험을 최소화합니다. 폰트가 로드된 뒤 커스텀 폰트로 교체되는 것이 중요하다면 display=swap을 사용하세요.

사용하지 말아야 할 때

auto, block, fallback 전략으로 폰트를 명시적으로 표시하려는 경우 이 규칙을 비활성화하면 됩니다.

유용한 링크

보내기