frontendreact

리액트 프로젝트에 폰트추가

eot, font, react, ttf, woff
Views: 332

시작하기

리액트 프로젝트에서 폰트를 추가 하는 방법을 알아보겠습니다.
구글 폰트에서 링크를 통해 적용하는 방법과 폰트를 다운로드해서 프로젝트에 적용하는 방법이 있습니다.

구글 웹폰트를 통해서 적용하기

구글 폰트 사이트에 접속해서 마음에 드는 폰트를 찾습니다.

구글폰트

폰트를 찾았다면 해당 폰트를 선택하고 하단에 +버튼을 클릭해 선택합니다.

폰트선택

폰트 선택을 하고 나면 link와 @import를 사용할 수 있습니다.

import

프로젝트에 직접 적용하기

폰트 설치하기

구글 폰트 사이트에 접속해서 마음에 드는 폰트를 찾습니다.

폰트를 선택한 이후 우측 상단에 다운로드 버튼을 클릭해 파일을 다운받습니다.
파일 압축을 풀면 내부에 ttf파일들이 있습니다.

download ttf

다른 브라우저에서 제대로 폰트가 나오려면 파일들을 woff eot파일로 변환을 해주는 과정이 필요합니다.

any conv 폰트 변환 사이트로 접속해서 파일들을 업로드 합니다.

any conv사이트

파일을 업로드한후 변환하고자 하는 타입으로 설정을 변경합니다.
타입 변경

파일 변환이 완료되었으면 다운로드를 한 이후 파일명을 변경해줍니다.
변환 완료

프로젝트에 설정하기

1
2
3
4
5
6
7
8
src/
    └── static/
        ├── images
        └── fonts/
            ├── Roboto-Regular.ttf
            ├── Roboto-Regular.woff
            ├── Roboto-Regular.eot
            └── font.css

폰트를 프로젝트의 src/static/fonts 폴더에 넣어 줍니다. 파일 경로는 이미지와 같이 정적 파일들을 저장하는 폴더에 넣으면 됩니다.

폰트 굵기에 대한 숫자 입니다.

1
2
3
4
5
6
7
8
9
10
Font Weight
100 Thin
200 Extra Light
300 Light
400 Normal
500 Medium
600 Semi Bold
700 Bold
800 Extra Bold
900 Ultra Bold

static/fonts파일 내부에 css파일을 생성하고 다음과 같이 작성합니다.

font.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@font-face {
  /* 사용할 폰트의 이름 */
  font-family: "Roboto";
  font-display: fallback;

  /* 
  src: 사용할 폰트의 위치 및 형식 
     Safari, Android, iOS => ttf
     Modern Browsers => woff
     IE6-IE8 => eot
  */
  src: url("./Roboto-Regular.ttf") format("truetype"), url("./Roboto-Regular.woff")
      format("woff"), url("./Roboto-Regular.eot?iefix") format("embedded-opentype");

  /* 사용할 폰트의 기본 스타일 */
  font-weight: 400;
  font-style: normal;
}

eot부분에 #iefix을 입력해주는 이유는 IE6~8의 경우 format()구문을 인식하지 못하기 때문에 삽입한 것입니다.

이후 최상단 루트 파일에 다음 css를 불러옵니다.

src/index.tsx
1
2
3
import React from "react";
import "./static/fonts/font.css";
//...

이후 css에서 다음과 같은 코드를 입력하면 폰트가 적용됩니다.

1
2
3
span {
  font-family: "Roboto";
}

마치며

두가지 방법으로 폰트를 설정할 수 있습니다. 글꼴파일 용량이 크거나 사이트에 추가적인 HTTP요청이 들어갈 수도 있기에 웹 사이트 로드 속도가 늦어질 수 있습니다. 글꼴을 꼭 사용해야 하는지 잘 고려해야합니다.

Share