React.js에서 Google 글꼴을 사용하는 방법은 무엇입니까?

React.js 와 webpack 으로 웹 사이트를 구축했습니다 .

웹 페이지에서 구글 폰트 를 사용하고 싶어서 링크를 섹션에 넣었습니다.

Google 글꼴

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">

그리고 CSS 설정

body{
    font-family: 'Bungee Inline', cursive;
}

그러나 작동하지 않습니다.

이 문제를 어떻게 해결할 수 있습니까?

일종의 기본 또는 첫 번째 CSS 파일로드에서 다음을 수행하십시오.

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,bold,italic&subset=latin,latin-ext');

어떤 종류의 @ font-face 등으로 래핑 할 필요가 없습니다. Google의 API에서받은 응답은 즉시 사용할 수 있으며 일반적인 글꼴 모음을 사용할 수 있습니다.

그런 다음 기본 React 앱 JavaScript에서 맨 위에 다음과 같이 입력하십시오.

import './assets/css/fonts.css';

내가 실제로 한 것은 몇 가지 글꼴 가져 오기로 a app.css를 가져 왔습니다 fonts.css. 단순히 정리를위한 것입니다 (이제 모든 글꼴이 어디에 있는지 알고 있습니다). 기억해야 할 중요한 점은 먼저 글꼴을 가져 오는 것입니다.

React 앱으로 가져 오는 모든 구성 요소는 스타일 가져 오기 후에 가져와야합니다. 특히 이러한 구성 요소도 자체 스타일을 가져 오는 경우. 이렇게하면 스타일의 순서를 확인할 수 있습니다. 이것이 메인 파일의 맨 위에 글꼴을 가져 오는 것이 가장 좋은 이유입니다 (문제가 있는지 확인하기 위해 최종 번들 CSS 파일을 확인하는 것을 잊지 마십시오).

글꼴을로드 할 때보다 효율적으로 Google Font API를 전달할 수있는 몇 가지 옵션이 있습니다. 공식 문서 참조 : Google Fonts API 시작하기

편집, 참고 : "오프라인"응용 프로그램을 다루는 경우 실제로 글꼴을 다운로드하고 Webpack을 통해로드해야 할 수 있습니다.

React.js의 Google 글꼴?

스타일 시트를 엽니 다. 즉, app.css, style.css (사용중인 이름)는 상관 없습니다. 스타일 시트를 열고이 코드를 붙여 넣으세요.

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

원하는 글꼴의 URL을 변경하는 것을 잊지 마십시오. 그렇지 않으면 정상적으로 작동합니다.

이것을 다음과 같이 사용하십시오.

body {
  font-family: 'Josefin Sans', cursive;
}

Create React App 환경을 사용하는 경우 index.css 에 @import 규칙을 다음 과 같이 추가 하면 됩니다.

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

기본 React 앱에서 index.css 를 가져 옵니다 .

import './index.css'

React는 CSS를 적용하기 위해 인라인 스타일, CSS 모듈 또는 스타일 구성 요소를 선택할 수 있습니다.

font-family: 'Anton', sans-serif;

이 튜토리얼을 볼 수 있습니다 : https://scotch.io/@micwanyoike/how-to-add-fonts-to-a-react-project

import WebFont from 'webfontloader';

WebFont.load({
  google: {
    families: ['Titillium Web:300,400,700', 'sans-serif']
  }
});

나는 방금이 방법을 시도했고 그것이 매우 잘 작동한다고 말할 수있다;)

create-react-app의 App.css와 같은 CSS 파일에서 글꼴 가져 오기를 추가합니다. 예를 들면 :

@fontface {
  font-family: 'Bungee Inline', cursive;
  src: url('https://fonts.googleapis.com/css?family=Bungee+Inline')
}

그런 다음 동일한 CSS 파일 내에서 DOM 요소에 글꼴을 추가하기 만하면됩니다.

body {
  font-family: 'Bungee Inline', cursive;
}

같은 문제가있었습니다. 나는 판명이 사용 된 "대신 '.

사용 @import url('within single quotes');과 같이

아니 @import url("within double quotes");이런

내 CSS 파일에 @import 및 @ font-face를 추가했는데 제대로 작동했습니다.

여기에 좋은 답변 모두에게 또 다른 옵션은 NPM 패키지가 react-google-font-loader발견 여기에 .

사용법은 간단합니다.

import GoogleFontLoader from 'react-google-font-loader';

// Somewhere in your React tree:

<GoogleFontLoader
    fonts={[
        {
            font: 'Bungee Inline',
            weights: [400],
        },
    ]}
/>

그런 다음 CSS에서 성을 사용할 수 있습니다.

body {
    font-family: 'Bungee Inline', cursive;
}

면책 조항 : 저는 react-google-font-loader패키지 작성자입니다 .

(.less) 솔루션을 찾는 사람은 아래를 시도하십시오. 기본 또는 공통 덜 파일을 열고 아래와 같이 사용하십시오.

@import (css) url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

body{
  font-family: "Open Sans", sans-serif;
}

끝에있는 링크의 자체 닫는 태그 일 수 있습니다.

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"/> 

main.css 파일에서 다음을 시도하십시오.

body,div {
  font-family: 'Bungee Inline', cursive;
}

반응 앱에 글꼴을 추가 할 수있는 두 가지 방법이 있습니다.

로컬 글꼴 추가

1. 라는 새 폴더 만들기 fonts귀하의 src폴더에 저장합니다.

2. Google 글꼴을 로컬로 다운로드하여 fonts폴더 안에 넣으십시오 .

3. index.css파일을 열고 경로를 참조하여 글꼴을 포함하십시오.

@font-face {
  font-family: 'Rajdhani';
  src: local('Rajdhani'), url(./fonts/Rajdhani/Rajdhani-Regular.ttf) format('truetype');
}

여기에 Rajdhani글꼴을 추가했습니다 .

이제 다음과 같은 CSS 클래스에서 글꼴을 사용할 수 있습니다.

.title{
    font-family: Rajdhani, serif;
    color: #0004;
}

Google 글꼴 추가

로컬 폰트 대신 구글 폰트 (api)를 사용하고 싶다면 다음과 같이 추가 할 수 있습니다.

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap');

마찬가지로 태그를 index.html사용 하여 파일 내부에 추가 할 수도 있습니다 link.

<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap" rel="stylesheet">

(원래 https://reactgo.com/add-fonts-to-react-app/에 게시 됨 )