Next.js + Tailwind에서 Google 글꼴을 로드하고 사용하는 가장 좋은 방법

8825 단어 performancecssjavascriptnextjs
저는 오늘 Next.js와 tailwindcss로 새 프로젝트를 설정하고 있었고 Roboto를 글꼴로 사용해야 했습니다.

구글 폰트이기 때문에 외부 URL에서 폰트를 로드하는 가장 좋은 방법을 찾고 있었습니다.

다음 기사에서는 이에 대해 매우 자세히 설명합니다. https://csswizardry.com/2020/05/the-fastest-google-fonts .

이 기사에서 다음 스니펫을 도출할 수 있습니다.

<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin />

<!-- [2] -->
<link rel="preload"
      as="style"
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" />

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

<!-- [4] -->
<noscript>
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" />
</noscript>


또한 로드할 글꼴의 크기를 줄이기 위해 사용할 가중치(400 및 700)만 포함하는 방법에 유의하십시오.

그렇다면 위의 스니펫을 Next.js 애플리케이션에 어떻게 구현할까요?
아주 간단합니다!/pages 폴더에 _document.js/.tsx 파일이 있어야 합니다.
이 파일에서 <head> 모듈을 사용하여 next/head 섹션을 쉽게 조정할 수 있습니다. 이것은 Next.js에 의해 모든 페이지에 적용될 것입니다.

import Document, {
  DocumentContext,
  Html,
  Head,
  Main,
  NextScript,
} from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx)

    return initialProps
  }

  render() {
    return (
      <Html>
        <Head>
          <link
            rel="preconnect"
            href="https://fonts.gstatic.com"
            crossOrigin="true"
          />
          <link
            rel="preload"
            as="style"
            href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
          />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
            media="print"
            onLoad="this.media='all'"
          />
          <noscript>
            <link
              rel="stylesheet"
              href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
            />
          </noscript>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument


이제 Next.js 부분이 완료되었습니다. 글꼴이 로드되고 있습니다.
다음 및 마지막 부분은 실제로 Tailwind에서 글꼴을 사용하고 모든 산세리프체 텍스트에 적용하는 것입니다(Roboto는 산세리프체이기 때문에).

이것은 Tailwind에서 매우 쉽습니다. 기본 테마의 확장만 있으면 됩니다.

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Roboto', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}


Roboto 글꼴을 포함하도록 sans 개체의 fontFamily 속성을 추가하고 기본 테마의 다른 sans-serif 글꼴을 대체로 추가하기만 하면 되었습니다.

당신은 그것을 가지고 있습니다! Tailwind를 사용하여 Next.js 애플리케이션에서 최적화된 글꼴 로드 :-)
즐기다.
TIL 21-03-24 (코딩 테스트 크레인 뽑기 게임)
hdu 3966 가장 순결 한 나무 사슬 분할

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage