React 로컬에 있는 글씨체를 디폴트값으로 설정하기

서론

react를 각잡고 한지가 오래되어 전역으로 글꼴 가져오는 것도 검색해야 했다.

 

우선 나는 다운로드 받은 fonts를 관리하는 디렉토리를 assets라는 폴더 밑에 넣기로 했다.

그리고 해당 폰트들을 @font-face를 사용하여 관리할 css도 만들었다.

 

해결방법

참고로 나는 Noto Sans KR를 쓰려고 한다. 

해당 글꼴은 아래 링크에서 다운로드 받을 수 있다.

Noto Sans Korean - Google Fonts

Noto Sans Korean - Google Fonts

 

코드 내용

fonts.css에서는 방금 받은 글꼴들을 다음과 같이 정의한다.

@font-face {
    font-family: 'Noto Sans KR Black';
    src: local('Noto Sans Korean Black'), 
         url('./fonts/NotoSansKR-Black.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans KR Bold';
    src: local('Noto Sans Korean Bold'), 
         url('./fonts/NotoSansKR-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans KR ExtraBold';
    src: local('Noto Sans Korean ExtraBold'), 
         url('./fonts/NotoSansKR-ExtraBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans KR ExtraLight';
    src: local('Noto Sans Korean ExtraLight'), 
         url('./fonts/NotoSansKR-ExtraLight.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans KR Light';
    src: local('Noto Sans Korean Light'), 
         url('./fonts/NotoSansKR-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans KR Medium';
    src: local('Noto Sans Korean Medium'), 
         url('./fonts/NotoSansKR-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans KR Regular';
    src: local('Noto Sans Korean Regular'), 
         url('./fonts/NotoSansKR-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans KR SemiBold';
    src: local('Noto Sans Korean SemiBold'), 
         url('./fonts/NotoSansKR-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans KR Thin';
    src: local('Noto Sans Korean Thin'), 
         url('./fonts/NotoSansKR-Thin.ttf') format('truetype');
}

 

@font-face 규칙의 src 속성은 웹 페이지에서 사용하려는 폰트의 위치와 이름을 지정하는 데 사용된다.

여기서 src 속성의 값은 여러 부분으로 구성될 수 있으며, 이러한 여러 부분은 웹 브라우저가 폰트를 찾는 순서를 나타낸다.

예를들어 
local('Noto Sans Korea Regular')

의 경우, local() 함수는 사용자의 컴퓨터에 이미 설치된 폰트를 참조하는 데 사용된다.
이 경우, 웹 브라우저는 먼저 "Noto Sans Korea Regular" 라는 이름으로 로컬 폰트를 찾게 된다.
만약 사용자의 컴퓨터에 해당 폰트가 이미 설치되어 있다면, 그 폰트가 사용된다.

 

없으면 다음에 지정된 소스 (url 경로)에서 폰트를 다운로드한다.

url('./fonts/NotoSansKR-Regular.ttf') format('truetype');

 

 

위에서 @font-face로 지정한 글꼴은 이제 global.css에서 다음과 같이 지정할 수 있다.

body, button, input, textarea {
    font-family: 'Noto Sans KR Regular', sans-serif;
}

 

그리고 index.js에서 아래와 같이 앞서 만들어둔 global.css를 import 한다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
//생략
import './global.css';  

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

 

이렇게 하면 내가 원하는 글꼴을 전역에서 디폴트 값으로 사용할 수 있다.