Nextjs에서 자체 호스팅 글꼴을 사용하는 방법

8461 단어 reactwebdevjavascriptnextjs
Nextjs은 하이브리드 정적 및 서버 렌더링, TypeScript 지원, 스마트 번들링, 경로 미리 가져오기를 포함하여 즉시 생산에 필요한 모든 것을 제공하는 React 프레임워크입니다. 가지고 놀 수 있는 매우 재미있는 도구이며 저는 이제 열렬한 팬입니다.

최근 작업한 프로젝트는 Nextjs를 사용했습니다. 상당히 간단하고 간단했지만 Nextjs에서 자체 호스팅 글꼴을 사용하는 것은 약간 까다롭습니다.

검색을 잘 못했을 수도 있지만 Nextjs에 글꼴을 추가하는 방법에 대한 정보가 많지 않았습니다. 결과적으로 기존의 자체 호스팅 글꼴( font-face )을 사용하는 것처럼 작동하지만 몇 가지 추가 단계가 있습니다.

먼저 /fontsfolder 내부에 /publicfolder를 만들고 사용하려는 모든 글꼴( .eot, .woff, .woff2, .ttf )을 추가해야 합니다. 그런 다음 이러한 글꼴 파일( /public/fonts/fonts.css )과 동일한 폴더에 CSS 파일을 만듭니다.

font.css가 생성되면 @font-facelike를 사용하여 글꼴을 가져올 수 있습니다.

// fonts.css
@font-face {
  font-family: 'your-font';
  src: url('your-font.eot');
  src: url('your-font.eot?#iefix') format('embedded-opentype'),
    url('your-font.woff2') format('woff2'),
    url('your-font.woff') format('woff'),
    url('your-font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
...
...

일반적인 웹 빌드에서는 <head> 태그를 사용하여 HTML 파일에 이 fonts.css 파일을 링크하지만 Nextjs에서는 다음과 같이 _document.js에 추가해야 합니다.

// _document.js
export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <meta name="theme-color" content={theme.palette.primary.main} />
          <link rel="stylesheet" href="/fonts/fonts.css" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

일반적으로 _document.js 파일은 /pages 폴더 아래에 있습니다.

완료되면 이동하는 것이 좋습니다! CSS에서 글꼴 패밀리를 참조하기만 하면 됩니다.

의견: 더 효율적으로



일을 더 효율적이고 유연하게 하기 위해 저는 페이지 데이터에 대한 상수 파일을 만들고 필요에 따라 가져오는 것을 좋아합니다. 이렇게 하면 각 파일에 들어가지 않고도 데이터를 업데이트/변경할 수 있습니다. 다음은 글꼴 상수 파일의 예입니다.

// constant/fonts.js
export const MAIN_REGULAR = 'your-font-regular'
export const MAIN_BOLD = 'your-font-bold'
export const SECONDARY_REGULAR = 'your-secondary-font-regular'

그런 다음 프로젝트에서(CSS-in-JS를 사용한다고 가정하고 아래는 Material-UI를 사용한 예입니다), 다음과 같이 사용합니다.

// SomeComponent.js
import { makeStyles } from '@material-ui/core/styles'

import * as Font from '../../../constant/fonts'

const useStyles = makeStyles((theme) => ({
  text: {
    fontFamily: Font.MAIN_REGULAR,
    fontSize: '32px',
  },
  ...
  ...
}))

그게 다야! URL, 테마 색상 등과 같은 다른 모든 데이터로 이 작업을 수행할 수 있습니다.

이 정보가 도움이 되길 바랍니다. :)

방금 읽은 내용이 마음에 들면 공유해 주세요. 고맙습니다!
환경 변수 보기 및 추가
Blazor Browserinterop으로 GPS 추적

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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