반응 형 앱 기반 프로젝트에 글꼴을 추가하는 방법은 무엇입니까?


177

내가 사용하고 -반응-응용 프로그램을 작성 하고 안함 eject.

@ font-face를 통해 가져오고 로컬로로드 한 글꼴이 어디로 가야하는지 명확하지 않습니다.

즉, 나는로드

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
}

어떤 제안?

-- 편집하다

Dan이 자신의 답변에서 언급 한 요점 포함

  Client git:(feature/trivia-game-ui-2)  ls -l public/static/fonts
total 1168
-rwxr-xr-x@ 1 maximveksler  staff  62676 Mar 17  2014 MYRIADPRO-BOLD.woff
-rwxr-xr-x@ 1 maximveksler  staff  61500 Mar 17  2014 MYRIADPRO-BOLDCOND.woff
-rwxr-xr-x@ 1 maximveksler  staff  66024 Mar 17  2014 MYRIADPRO-BOLDCONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  66108 Mar 17  2014 MYRIADPRO-BOLDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  60044 Mar 17  2014 MYRIADPRO-COND.woff
-rwxr-xr-x@ 1 maximveksler  staff  64656 Mar 17  2014 MYRIADPRO-CONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  61848 Mar 17  2014 MYRIADPRO-REGULAR.woff
-rwxr-xr-x@ 1 maximveksler  staff  62448 Mar 17  2014 MYRIADPRO-SEMIBOLD.woff
-rwxr-xr-x@ 1 maximveksler  staff  66232 Mar 17  2014 MYRIADPRO-SEMIBOLDIT.woff
  Client git:(feature/trivia-game-ui-2)  cat src/containers/GameModule.css
.GameModule {
  padding: 15px;
}

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-REGULAR.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-COND.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Semibold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Semibold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-CONDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCONDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCOND.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLD.woff') format('woff');
}

2
사용자 안내서에서 "글꼴 추가"섹션을 확인 했습니까?
Dan Abramov

2
@ DanAbramov, 글꼴을 가져 오는 것이 좋습니다. 그러나 실제로 어떻게 수행 해야하는지에 대해 명확하지 않다고 생각합니다. 그 동안 나는이 gist.github.com/maximveksler/5b4f80c5ded20237c3deebc82a31dcd5를 수행 했지만 작동하는 것 같습니다 (글꼴 파일을 찾을 수없는 경우 웹 팩 경고) 아직 최적의 해결책이 아니며 예제가 아니라고 확신합니다 또는 여기에 문서화되어 있으면 도움이 될 것입니다. 연락해 주셔서 감사합니다.
Maxim Veksler

2
나는 대답했다. 귀하의 접근 방식은 나에게 잘못 보입니다 %PUBLIC_URL%.CSS 파일에서 작동하지 않으며 필요하지 않습니다. 또한 가이드에 설명 된대로 공용 폴더가 아닌 거의 모든 경우에 JS 가져 오기를 사용해야합니다.
Dan Abramov

지정된 폴더에서 글꼴을 검색하고 모든 글꼴 변형으로 스크립트 파일을 생성하는 유틸리티 / 패키지가 있습니까? 모든 것을 수동으로 작성하는 것은 지루합니다
helloworld

답변:


289

두 가지 옵션이 있습니다.

가져 오기 사용

이것이 제안 된 옵션입니다. 글꼴이 빌드 파이프 라인을 통과하고 컴파일 중 해시를 가져 와서 브라우저 캐싱이 올바르게 작동하고 파일이없는 경우 컴파일 오류가 발생하도록합니다.

으로 "추가 이미지, 글꼴, 및 파일"에 설명 , 당신은 JS에서 가져온 CSS 파일이 필요합니다. 예를 들어, 기본적으로 src/index.jsimports src/index.css:

import './index.css';

이와 같은 CSS 파일은 빌드 파이프 라인을 거치며 글꼴과 이미지를 참조 할 수 있습니다. 예를 들어에 글꼴을 넣으면 다음을 포함 src/fonts/MyFont.woffindex.css수 있습니다.

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
}

로 시작하는 상대 경로를 사용하는 방법에 주목하십시오 ./. 이것은 빌드 파이프 라인 (Webpack으로 구동)이이 파일을 찾는 데 도움이되는 특수 표기법입니다.

일반적으로 이것으로 충분합니다.

public폴더 사용

어떤 이유로 당신이 원하는 경우 하지 빌드 파이프 라인을 사용하고, 대신 "고전적인 방법"그것을 할, 당신은 할 수 있습니다 사용하는 public폴더를 거기 글꼴을 넣어.

이 방법의 단점은 프로덕션을 위해 컴파일 할 때 파일이 해시되지 않으므로 파일을 변경할 때마다 파일 이름을 업데이트해야하거나 브라우저가 이전 버전을 캐시한다는 것입니다.

이런 식으로하려면 글꼴과 같은 public폴더에 글꼴을 넣습니다 ( 예 :) public/fonts/MyFont.woff. 이 접근법을 따르는 경우 CSS 파일을 public폴더에 넣고 JS에서 가져 오지 않아야 합니다.이 접근법을 혼합하는 것은 매우 혼란 스러울 것입니다. 따라서 여전히 원하는 경우와 같은 파일이 public/index.css있습니다. <link>다음에서이 스타일 시트 에 수동으로 추가 해야합니다 public/index.html.

<link rel="stylesheet" href="%PUBLIC_URL%/index.css">

그리고 내부에서 일반적인 CSS 표기법을 사용합니다.

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(fonts/MyFont.woff) format('woff');
}

fonts/MyFont.woff경로로 어떻게 사용 하고 있는지 주목 하십시오. 이 때문입니다 index.csspublic는 공공 경로에서 처리 할 수 있도록 폴더 (당신은 GitHub의 페이지에 배포하고 설정하는 경우 일반적으로는 서버 루트, 그러나 homepage에 필드를 http://myuser.github.io/myproject,이 서비스한다 /myproject). 그러나 fonts도 있습니다 public그래서 그들은 서비스한다, 폴더 fonts상대적으로 (하나 http://mywebsite.com/fonts또는 http://myuser.github.io/myproject/fonts). 따라서 상대 경로를 사용합니다.

이 예제에서는 빌드 파이프 라인을 피하기 때문에 파일이 실제로 존재하는지 확인하지 않습니다. 그렇기 때문에이 방법을 권장하지 않습니다. 또 다른 문제는 index.css파일이 축소되지 않고 해시를 얻지 못한다는 것입니다. 따라서 최종 사용자에게는 속도가 느려지고 브라우저가 이전 버전의 파일을 캐싱 할 위험이 있습니다.

 어떤 방법을 사용합니까?

첫 번째 방법으로 이동하십시오 (“가져 오기 사용”). 두 번째 내용은 설명하려고 시도했기 때문에 설명했지만, 많은 문제가 있으며 일부 문제를 해결할 때 최후의 수단이어야합니다.


5
문서의 예가 유용 할 것입니다. 또한 약간 혼란 스러웠습니다
Tom

2
나는 실제로 URL ./fonts/Myfont.woff하지 ./Myfont.woff 사용 남겼
th3morg

57
누군가 ttf글꼴을 추가하는 경우 *truetype 대신 ttf매개 변수로 제공해야합니다 . format
milkersarac

3
@ milkersarac 당신은 최고입니다!
João Vilaça

19
당신이 사용하는 경우 @ milkersarac 다음 otf에 넣어해야합니다 opentype.
Karl Taylor

46

이를 수행하는 몇 가지 방법이 있습니다.

1. 폰트 가져 오기

예를 들어 Roboto를 사용하려면 다음을 사용하여 패키지를 설치하십시오.

yarn add typeface-roboto

또는

npm install typeface-roboto --save

index.js에서 :

import "typeface-roboto";

많은 오픈 소스 글꼴과 대부분의 Google 글꼴을위한 npm 패키지가 있습니다. 여기서 모든 글꼴을 볼 수 있습니다 . 모든 패키지는 해당 프로젝트 에서 가져온 것입니다 .

2. 타사에서 호스팅하는 글꼴

예를 들어 Google 글꼴은 fonts.google.com으로 이동하여 링크를 찾을 수 있습니다.public/index.html

fonts.google.com의 스크린 샷

그것은 같을 것이다

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

또는

<style>
    @import url('https://fonts.googleapis.com/css?family=Montserrat');
</style>

3. 글꼴을 다운로드하여 소스 코드에 추가하십시오.

글꼴을 다운로드하십시오. 예를 들어 Google 글꼴의 경우 fonts.google.com으로 . 다운로드 버튼을 클릭하여 글꼴을 다운로드하십시오.

에 글꼴 이동 fonts귀하의 디렉토리를 src디렉토리

src
|
`----fonts
|      |
|      `-Lato/Lato-Black.ttf
|       -Lato/Lato-BlackItalic.ttf
|       -Lato/Lato-Bold.ttf
|       -Lato/Lato-BoldItalic.ttf
|       -Lato/Lato-Italic.ttf
|       -Lato/Lato-Light.ttf
|       -Lato/Lato-LightItalic.ttf
|       -Lato/Lato-Regular.ttf
|       -Lato/Lato-Thin.ttf
|       -Lato/Lato-ThinItalic.ttf
|
`----App.css

이제에 App.css추가

@font-face {
  font-family: 'Lato';
  src: local('Lato'), url(./fonts/Lato-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 900;
    src: local('Lato'), url(./fonts/Lato-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'Lato';
    font-weight: 900;
    src: local('Lato'), url(./fonts/Lato-Black.otf) format('opentype');
}

들어 ttf형식, 당신은 언급해야format('truetype') . 를 들어 woff,format('woff')

이제 클래스에서 글꼴을 사용할 수 있습니다.

.modal-title {
    font-family: Lato, Arial, serif;
    font-weight: black;
}

4. 웹 폰트 로더 패키지 사용

다음을 사용하여 패키지 설치

yarn add webfontloader

또는

npm install webfontloader --save

에서 src/index.js, 당신은이를 가져오고 필요한 글꼴을 지정할 수 있습니다

import WebFont from 'webfontloader';

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

2
--save는 npm 5 (2017)의 기본값입니다.
NattyC

@Natalie 의견에 감사드립니다.
sudo bangbang

@ sudobangbang 감사합니다. 솔루션 # 3이 저에게 효과적이었습니다. 그러나 - 넣어하지 않는 방법이 fonts아래에 폴더 src만 아래 public대신은? 시도했지만 허용되지 않는 것 같습니다 ...
Yossi Vainshtein

@YossiVainshtein, 나는 그렇게 생각하지 않습니다. App.css에서 글꼴을 사용하고 있으므로 해당 글꼴도 함께 컴파일해야합니다.
sudo bangbang

For ttf format, you have to mention format('truetype'). For woff, format('woff')나를 위해 했어! 감사합니다!
조셉 브릭스

7
  1. Google Fonts https://fonts.google.com/으로 이동
  2. 아래 이미지와 같이 글꼴을 선택하십시오.

여기에 이미지 설명을 입력하십시오

  1. 해당 URL을 복사하여 새 탭에 붙여 넣으면 해당 글꼴을 추가하는 CSS 코드가 표시됩니다. 이 경우에 가면

https://fonts.googleapis.com/css?family=Spicy+Rice

다음과 같이 열립니다 :

여기에 이미지 설명을 입력하십시오

4, style.css에서 해당 코드를 복사하여 붙여 넣고 다음과 같이 해당 글꼴을 사용하기 시작하십시오.

      <Typography
          variant="h1"
          gutterBottom
          style={{ fontFamily: "Spicy Rice", color: "pink" }}
        >
          React Rock
        </Typography>

결과:

여기에 이미지 설명을 입력하십시오


1
많은 경우 (예 : 회사 네트워크) 외부 CDN에 대한 액세스는 방화벽에 의해 차단되며이 방법은 정확하지만 작동하지 않을 수 있습니다. 조직에는 여러 개의 VLAN이 있으며 IT를 제외하고는 거의 모든 VLAN이 외부 CDN 액세스를 차단하므로 Google의 콘텐츠 CDN도 차단됩니다. 거기에 있었어요.
AnBisw

2

WebFont 모듈을 사용 하면 프로세스가 크게 간소화됩니다.

render(){
  webfont.load({
     custom: {
       families: ['MyFont'],
       urls: ['/fonts/MyFont.woff']
     }
  });
  return (
    <div style={your style} >
      your text!
    </div>
  );
}

0

나는 이런 실수를하고 있었다.

@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext";
@import "https://use.fontawesome.com/releases/v5.3.1/css/all.css";

이 방법으로 제대로 작동합니다

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext);
@import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);

0

나는이 스택 질문에 착륙 한 후 비슷한 문제를 해결하기 위해 아침 내내 보냈습니다. 위의 답변에서 Dan의 첫 번째 솔루션을 점프 포인트로 사용했습니다.

문제

개발자 (이것은 내 로컬 컴퓨터에 있음), 준비 및 프로덕션 환경이 있습니다. 내 준비 및 프로덕션 환경은 동일한 서버에 있습니다.

앱이 스테이징을 통해 배포되고 acmeserver/~staging/note-taking-app프로덕션 버전은acmeserver/note-taking-app (blame IT)에 있습니다.

글꼴과 같은 모든 미디어 파일은 개발자에게 완벽하게로드되었습니다 (예 : react-scripts start .

그러나 스테이징 및 프로덕션 빌드를 작성하고 업로드 할 때 .css.js파일이 올바르게로드 되는 동안 글꼴이 없었습니다. 컴파일.css 파일에 올바른 경로가있는 것으로 보였지만 브라우저 http 요청에 매우 잘못된 경로가 지정되었습니다 (아래 참조).

컴파일 된 main.fc70b10f.chunk.css파일 :

@font-face {
  font-family: SairaStencilOne-Regular;
  src: url(note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf) ("truetype");
}

브라우저 http 요청은 아래와 같습니다. /static/css/글꼴 파일이 들어있을 때 추가되는 방식에 유의하십시오 ./static/media/ 과 대상 폴더를 복제하는 . 서버 구성을 범인으로 배제했습니다.

Referer너무 잘못 일부입니다.

GET /~staging/note-taking-app/static/css/note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf HTTP/1.1
Host: acmeserver
Origin: http://acmeserver
Referer: http://acmeserver/~staging/note-taking-app/static/css/main.fc70b10f.chunk.css

package.json파일은 가지고 homepage에 속성이 설정 ./note-taking-app. 문제가 발생했습니다.

{
  "name": "note-taking-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "./note-taking-app",
  "scripts": {
    "start": "env-cmd -e development react-scripts start",
    "build": "react-scripts build",
    "build:staging": "env-cmd -e staging npm run build",
    "build:production": "env-cmd -e production npm run build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  //...
}

해결책

오랜 시간이 걸렸지 만 해결책은 다음과 같습니다.

  1. 변경 PUBLIC_URL환경에 따라 env 변수를
  2. 파일 에서 homepage속성을 제거package.json

아래는 내 .env-cmdrc파일입니다. 모든 것을 하나의 파일로 유지하기 때문에 .env-cmdrc정기적으로 사용 .env합니다.

{
  "development": {
    "PUBLIC_URL": "",
    "REACT_APP_API": "http://acmeserver/~staging/note-taking-app/api"
  },
  "staging": {
    "PUBLIC_URL": "/~staging/note-taking-app",
    "REACT_APP_API": "http://acmeserver/~staging/note-taking-app/api"
  },
  "production": {
    "PUBLIC_URL": "/note-taking-app",
    "REACT_APP_API": "http://acmeserver/note-taking-app/api"
  }
}

비아 라우팅 react-router-dom도 잘 작동합니다. 간단히 PUBLIC_URLenv 변수를 basename속성 으로 사용하십시오 .

import React from "react";
import { BrowserRouter } from "react-router-dom";

const createRouter = RootComponent => (
  <BrowserRouter basename={process.env.PUBLIC_URL}>
    <RootComponent />
  </BrowserRouter>
);

export { createRouter };

서버 구성은 모든 요청을 ./index.html파일 로 라우팅하도록 설정되어 있습니다.

마지막으로, main.fc70b10f.chunk.css논의 된 변경 사항이 구현 된 후 컴파일 된 파일의 모습입니다.

@font-face {
  font-family: SairaStencilOne-Regular;
  src: url(/~staging/note-taking-app/static/media/SairaStencilOne-Regular.ca2c4b9f.ttf)
    format("truetype");
}

읽을 거리

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.