React & Typescript Setup (without CRA) - 5 (Font 설정)

Asher·2021년 10월 22일

react typescript

React-Typescript Setup (without CRA)

목록 보기

5/6

Font 설정하기

프로젝트에서 사용할 폰트를 설정해보겠다.

1. 폰트 파일 추가

1) 폰트 파일 다운로드

구글폰트(google fonts)에서 폰트를 다운로드 받는다.
원하는 폰트가 없으면 구글링해서 폰트 파일을 받아도 무방하다.

폰트 파일 확장자가 다수 존재하는데, 여기에서는 woff 파일을 사용하도록 하겠다.

woff : 대부분의 최신 웹브라우저에서 지원되며, 글꼴이 압축되어 있어 로드속도가 빠름.
ttf : 맥과 윈도우에서 가장 오랫동안 많이 사용되었으며, 압축되지 않은 파일로써, 큰 용량으로 인해 로딩속도의 문제 발생.

(폰트 확장자 관련 참고 1)
(폰트 확장자 관련 참고 2)

2) (ttf 파일로 받았을 경우) 파일 변환하기

woff 파일을 사용할 것이기 때문에 ttf 파일을 woff 파일로 변환해야한다.
온라인에서 변환을 지원해주는 사이트(anyconv.com)에서 woff 파일로 변환한다.

3) woff 파일을 프로젝트에 추가

/src/Assets/Fonts 경로에 폰트 파일을 추가한다.

2. 폰트 관리 파일 생성

1) GlobalFont.ts 파일을 생성해서 src/Styles 경로에 넣어준다.

// GlobalFont.ts
import { createGlobalStyle } from 'styled-components';
// 각 폰트 파일 import
import Font_L from '../Assets/Fonts/Font-Light.woff';
import Font_R from '../Assets/Fonts/Font-Regular.woff';
import Font_B from '../Assets/Fonts/Font-Bold.woff';

export default createGlobalStyle`
    @font-face {
        font-family: "Font_test";
        src: local("Font_test"), url(${Font_L}) format('woff'); 
        font-weight: lighter;
    }
    @font-face {
        font-family: "Font_test";
        src: local("Font_test"), url(${Font_R}) format('woff');
        font-weight: normal;
    }
    @font-face {
        font-family: "Font_test";
        src: local("Font_test"), url(${Font_B}) format('woff');
        font-weight: bold;
    }
`;

2) src/Store/Type/Types.d.ts 파일을 변경해준다.

woff 파일을 typescript가 인식을 하지 못해서 에러가 발생하기 때문이다.

// Types.d.ts
declare module '*.jpg';
declare module '*.png';
declare module '*.jpeg';
declare module '*.gif';
declare module '*.woff';

3) GlobalFont 컴포넌트를 App.tsx에 추가해준다.

// App.tsx
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import RoutesComponent from './Pages/Routes';
import Globalstyle from './Styles/Globalstyle';
import GlobalFont from './Styles/GlobalFont';

function App(): JSX.Element {
  return (
    <>
      <Globalstyle />
      <GlobalFont /> // GlobalFont 추가
      <Router>
        <RoutesComponent />
      </Router>
    </>
  );
}

export default App;

3. GlobalStyle에서 폰트 설정

src/Styles/Globalstyle.ts 파일에서 폰트를 추가한다.

// Globalstyles.ts
import { createGlobalStyle } from 'styled-components';
import { reset } from 'styled-reset';

export default createGlobalStyle`
    ${reset}
    *, *::before, *::after{
        box-sizing: border-box;
    }
    html{
        font-size: 1vw;
    }
    body{
        font-family: "Font-test"; // 폰트 설정
    }
    a{
        color: inherit;
        text-decoration: none;
    }
    ul{
        list-style: none;
    }
`;