Create-React-App 기반 프로젝트에 글꼴을 추가하는 방법은 무엇입니까?

programing tip

Create-React-App 기반 프로젝트에 글꼴을 추가하는 방법은 무엇입니까?

itbloger 2020. 8. 13. 07:58

Create-React-App 기반 프로젝트에 글꼴을 추가하는 방법은 무엇입니까?

나는 create-react-app을 사용 하고 있고 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');
}

두 가지 옵션이 있습니다.

수입품 사용

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

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

import './index.css';

이와 같은 CSS 파일은 빌드 파이프 라인을 통과하며 글꼴과 이미지를 참조 할 수 있습니다. 예를 들어에 글꼴을 넣는 경우 다음을 포함 src/fonts/MyFont.woff할 index.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.css에 public는 공공 경로에서 처리 할 수 있도록 폴더 (당신은 GitHub의 페이지에 배포하고 설정하는 경우 일반적으로는 서버 루트, 그러나 homepage에 필드를 http://myuser.github.io/myproject,이 서비스한다 /myproject). 그러나 fonts도 있습니다 public그래서 그들은 서비스한다, 폴더 fonts상대적으로 (하나 http://mywebsite.com/fonts또는 http://myuser.github.io/myproject/fonts). 따라서 우리는 상대 경로를 사용합니다.

이 예제에서는 빌드 파이프 라인을 피하고 있으므로 파일이 실제로 존재하는지 확인하지 않습니다. 이것이 제가이 접근 방식을 권장하지 않는 이유입니다. 또 다른 문제는 index.css파일이 축소되지 않고 해시를받지 않는다는 것입니다. 따라서 최종 사용자의 경우 속도가 느려지고 브라우저가 이전 버전의 파일을 캐싱 할 위험이 있습니다.

어떤 방법을 사용합니까?

첫 번째 방법 ( "가져 오기 사용")으로 이동합니다. 나는 당신이 시도한 것이므로 (당신의 의견으로 판단) 두 번째 것 만 설명했지만 많은 문제가 있으며 일부 문제를 해결할 때 마지막 수단이어야합니다.

이를 수행하는 몇 가지 방법은 다음과 같습니다.

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

마치

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

또는

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

3. web-font-loader 패키지 사용

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

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']
   }
});

WebFont 모듈을 사용 하여 프로세스를 크게 단순화 할 수 있습니다.

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

Google Fonts https://fonts.google.com/으로 이동합니다.
아래 이미지에 표시된대로 글꼴을 선택하십시오.

해당 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>

결과:

이런 실수를 저질렀습니다.

@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);

이 스택 질문에 착수 한 후 아침 내내 비슷한 문제를 해결했습니다. 위의 답변에서 Dan의 첫 번째 솔루션을 점프 지점으로 사용했습니다.

문제

개발 (로컬 머신에 있음), 스테이징 및 프로덕션 환경이 있습니다. 내 스테이징 및 프로덕션 환경은 동일한 서버에 있습니다.

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

글꼴과 같은 모든 미디어 파일은 dev (예 :)에서 완벽하게로드되었습니다 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"
  }
  //...
}

해결책

긴 바람 이었지만 해결책은 다음과 같습니다.

PUBLIC_URL환경에 따라 env 변수 변경
파일 에서 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");
}

읽을 거리

https://create-react-app.dev/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env
https://create-react-app.dev/docs/deployment#serving-apps-with-client-side-routing
https://create-react-app.dev/docs/advanced-configuration
- 이것은 PUBLIC_URL환경 변수를 설명합니다
  
  React App 생성은 애플리케이션이 package.json (홈페이지)에 지정된대로 제공 웹 서버의 루트 또는 하위 경로에서 호스팅된다고 가정합니다. 일반적으로 Create React App은 호스트 이름을 무시합니다. 이 변수를 사용하여 자산이 제공 한 URL (호스트 이름 포함)에 그대로 참조되도록 할 수 있습니다. 이는 CDN을 사용하여 애플리케이션을 호스팅 할 때 특히 유용 할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/41676054/how-to-add-fonts-to-create-react-app-based-projects

'programing tip' 카테고리의 다른 글

명령 줄에서 JAR 파일을 실행하고 클래스 경로를 지정합니다. (0)	2020.08.13
Maven을 사용하지 않고 Spring Framework jar를 어디에서 다운로드 할 수 있습니까? (0)	2020.08.13
Oracle SQL Developer에서 변수를 어떻게 사용합니까? (0)	2020.08.13
for-each 루프 반복이 시작되기 전에 널 검사를 피하는 방법이 있습니까? (0)	2020.08.13
언제 뮤텍스를 사용해야하고 언제 세마포어를 사용해야합니까? (0)	2020.08.13

현재글Create-React-App 기반 프로젝트에 글꼴을 추가하는 방법은 무엇입니까?

itbloger

Create-React-App 기반 프로젝트에 글꼴을 추가하는 방법은 무엇입니까?

Create-React-App 기반 프로젝트에 글꼴을 추가하는 방법은 무엇입니까?

수입품 사용

`public`폴더 사용

어떤 방법을 사용합니까?

1. 글꼴 가져 오기

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

3. web-font-loader 패키지 사용

'programing tip' 카테고리의 다른 글

'programing tip'의 다른글

티스토리툴바

Create-React-App 기반 프로젝트에 글꼴을 추가하는 방법은 무엇입니까?

Create-React-App 기반 프로젝트에 글꼴을 추가하는 방법은 무엇입니까?

수입품 사용

public폴더 사용

어떤 방법을 사용합니까?

1. 글꼴 가져 오기

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

3. web-font-loader 패키지 사용

'programing tip' 카테고리의 다른 글

'programing tip'의 다른글

관련글

티스토리툴바

`public`폴더 사용