gatsby 사이트에 Google 글꼴을 추가하려면 어떻게 해야 합니까?

gatsby 사이트에 Google 글꼴을 추가하려면 어떻게 해야 합니까?

Gatsby 시작하기 - 구글 폰트로 public/index.html에 링크 태그를 추가하면 개발 모드로 동작합니다.사이트를 구축하면 index.html이 리셋됩니다.그럼 글꼴을 추가할 수 있는 다른 적절한 방법이 있을까요?

개츠비 튜토리얼에서 논의된 리액트 헬메트를 사용할 수도 있습니다.

헬멧 구성요소 내에 Google 글꼴 링크 요소를 포함합니다.

다음과 같이 합니다.

<Helmet>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"/>
</Helmet>

저는 이미 수작업으로 스타일링을 하고 있었기 때문에, 타이포그래피를 사용해 본 결과, 많은 변경이 있어 원래대로 되돌리는데 시간이 걸렸습니다.

'다의 맨 에 '다'를 .src/layouts/index.css의 '

@import url('https://fonts.googleapis.com/css?family=Roboto');

html {
  font-family: 'Roboto', sans-serif;
}

이 작업은 개츠비 빌드 프로세스에 의해 처리되며 사이트의 최종 프로덕션 버전에 포함됩니다.

나는 타이프페이스가 좋은 방법이라는 인상을 받았다.추가(차단) 네트워크 요청은 없습니다.

NPM에서 서체를 찾을 수 있는 한

Material UI를 Gatsby와 조합하여 사용하는 경우 다음과 같은 최적의 방법이 있습니다.

를 CDN href 와 합니다.React Helmet머티리얼 UI 문서 및 github 저장소의 머티리얼 UI Gatsby 공식 예제에 제시된 대로:

" " " 를 만듭니다.RootLayout.jsx : (어느 쪽이든 상관없습니다.)

import React from "react";
import { Helmet } from "react-helmet";
import CssBaseline from "@material-ui/core/CssBaseline";

export default function RootLayout({ children }) {
  return (
    <>
      <Helmet>
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
        />
        <link rel="stylesheet"
              href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600&display=swap" />
      </Helmet>
      {children}
    </>
  );
}

도 이 의 코드에 추가해 주세요.gatsby-browser.js:

export const wrapRootElement = ({ element }) => <RootLayout>{element}</RootLayout>;

하세요.gatsby-ssr.js:

export const wrapRootElement = ({ element }) => <RootLayout>{element}</RootLayout>;

설명.

레이아웃의 코드는 Gatsby Browser와 SSR API를 사용하여 리액트 앱에 감겨 있습니다.이렇게 하면 Gatsby 앱 전체에서 글꼴을 사용할 수 있습니다.

Gatsby 브라우저 API 링크

Gatsby SSR API 링크

이 플러그인 https://github.com/escaladesports/gatsby-plugin-prefetch-google-fonts을 사용하여 글꼴을 프리페치할 수 있습니다.이 방법으로 빌드 단계에서는 플러그인이 글꼴을 가져와 로컬에 저장하여 서버 또는 CDN에서 글꼴을 제공할 수 있습니다.

typography.js를 문서에서 참조하는 것과 같이 사용할 수도 있습니다.

https://www.gatsbyjs.org/tutorial/part-two/ # typographyjs

현재 사용할 수 있는 모든 글꼴 조합을 나열하는 typography.js github 페이지입니다.

글꼴을 직접 호스트할 수도 있습니다.그저.

• 먼저 https://google-webfonts-helper.herokuapp.com/fonts/ 에서 글꼴 파일을 다운로드합니다.
• css를 styles.scss*:https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin에 추가합니다.

이 예에서는 src-folder는 다음과 같습니다.

/src/
     /styles/style.scss
     /fonts/roboto-v18-latin-regular.eot
     /fonts/roboto-v18-latin-regular.woff2
     /fonts/roboto-v18-latin-regular.woff
     /fonts/roboto-v18-latin-regular.ttf
     /fonts/roboto-v18-latin-regular.svg

* sss를 사용하려면 https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sass와 같은 플러그인이 필요합니다.

Gatsby(react) Docs에 따르면 gatsby-plugin-offline은 .css로 끝나지 않으면 서버에서 구글 글꼴을 요청하지 못할 수 있습니다.Typography를 사용하여 CDN에서 글꼴 하나를 가져오게 되었지만 나중에 이 옵션을 보고 gatsby-config로 전달하여 플러그인의 기본값을 덮어씁니다.

이제 npm만 구글 폰트 프리페치 패키지를 설치하고 원하는 폰트를 gatsby-config 파일에 추가할 수 있습니다.그런 다음 보통 css 파일에서와 같이 글꼴을 사용합니다.여기서 개츠비 문서를 확인해 주세요.https://www.gatsbyjs.com/plugins/gatsby-plugin-prefetch-google-fonts/

기존 답변에서는 글꼴을 수동으로 다운로드(경우에 따라)하거나<link>프리페치가 되어 있어도, 사이트 속도가 느려집니다(또는, 빨리 표시되도록 최적화됩니다만, 다운로드 후 폰트를 스왑 해 유저를 FOUC 에 노출시킬 가능성이 있습니다).

2022년에는 폰트소스를 사용하는 것이 대안입니다.이 경우 개츠비는 로드 시간이 아닌 빌드 시간에 필요한 CSS만 다운로드하여 통합합니다.

일부 등대 보고서(개츠비 클라우드상의 브랜치프리뷰 등)에서는 프리로드 태그가 있는 경우보다 사이트 로드가 느려질 수 있습니다.단, CDN이 관여하고 있는 실가동 환경에서는 CSS가 매우 신속하다는 점에 주의해 주십시오.

여기 옥투어의 오픈 소스 홈페이지 풀 소스 코드에 대해 가중치가 다른 두 가지 글꼴을 사용한 방법이 있습니다.

yarn add @fontsource/open-sans
yarn add @fontsource/work-sans

/*
 * Preload our font CSS at build-time
 * You can do this
 *  - in a theme file (e.g. if using material-ui), or
 *  - in gatsby-browser.js, or
 *  - where the fonts are first used
 */
import '@fontsource/open-sans/400.css'
import '@fontsource/work-sans/300.css'
import '@fontsource/work-sans/400.css'
import '@fontsource/work-sans/500.css'
import '@fontsource/work-sans/500-italic.css'

// The following is not necessary - for example using with MUI only
// If you're using Material-UI or similar, you'll be able to use the font directly
import { createMuiTheme } from '@material-ui/core'

const themeOptions = {
  typography: {
    h1: {
      fontFamily: "'Work Sans', sans-serif",
      fontStyle: 'normal',
      fontSize: '5rem', // Converted from '80px',
      fontWeight: 400,
      lineHeight: '5.5rem', // Converted from '88px',
    },
    body1: {
      fontFamily: "'Open Sans', sans-serif",
      fontWeight: 300, // TODO consider whether to raise to 400 for better aliasing and visibility
      fontSize: '1.125rem', // Converted from 18px
      lineHeight: '1.625rem', // Converted from 26px
      letterSpacing: '0.01rem',
    },
  },
}

  export const theme = createMuiTheme(themeOptions)

@martis 솔루션은 오래된 개츠비 어플리케이션에 매우 적합합니다만, 개츠비@4.19.0부터는 개츠비 헤드 API를 직접 사용할 수 있습니다.링크에서 볼 수 있듯이 이름 있는 파일을 내보낼 필요가 있습니다.Head페이지 내에서 기능:

export function Head() {
  return (
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"/>
  )
}

공식 구글 폰트 플러그인을 사용할 수 있습니다.https://www.npmjs.com/package/gatsby-plugin-google-fonts

언급URL : https://stackoverflow.com/questions/47488440/how-do-i-add-google-fonts-to-a-gatsby-site