게이츠비에서 셀프 트랜잭션 글씨체를 사용하는 4단계

나는 마침내 나의 사이트를 위해 글씨체를 설정하기 시작했지만, 내가 본 모든 문장은 게츠비에서 너무 복잡한 위탁 관리 글씨체였다.다음은 제가 블로그에서 사용하는 간단한 4단계 절차입니다.
1 - 글꼴 파일을 넣습니다static/fonts/.
2 - 같은 디렉터리에 fonts.css를 만들고 css 글꼴 규칙을 추가합니다.내 것은 이렇게 보인다.

        @font-face {
          font-family: "Lato";
          src: url("Lato-Regular.otf");
        }

        @font-face {
          font-family: "Dank Mono";
          src: url("DankMono-Regular.otf");
        }

3 npm나 실을 첨가gatsby-plugin-web-font-loader하는 것을 잊지 마세요--save!
4-플러그 인을 플러그 인 어레이에 추가gatsby-config.js합니다.이것은 나의 것이다.

        {
          resolve: "gatsby-plugin-web-font-loader",
          options: {
            custom: {
              families: ["Lato, Dank Mono"],
              urls: ["/fonts/fonts.css"],
            },
          },
        },

이렇게!

Reference

이 문제에 관하여(게이츠비에서 셀프 트랜잭션 글씨체를 사용하는 4단계), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/iangloude/4-steps-to-self-hosted-fonts-in-gatsby-aj2

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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