[React] Font 파일 적용하기

프로젝트를 할 때 구글 포트와 같은 웹 폰트는 적용해본 적은 있지만, 직접 폰트 파일을 사용해본 적은 없다. 구글 폰트는 종류가 제한적인 반면 폰트를 직접 다운 받으면 더 예쁜 폰트를 많이 사용할 수 있어서 이번에는 폰트 파일로 폰트를 설정해보았다. 

폰트 다운 사이트 추천

무료폰트(목록) | 공유 마당

여기에서 다양한 정부 기관의 무료 폰트를 다운 받을 수 있다! 상업적 이용만 아니면 사용이 자유롭다. 예쁘고 가독성 좋은 폰트가 많아서 강추한다. 나는 광양시 서체가 마음에 들어서 광양시 서체를 다운 받았다.

폰트 파일 변환하기

폰트를 다운 받았으면 제일 먼저 할 일은 파일을 변환하는 것이다. .otf 파일로 다운을 받았는데, react에 적용하기 위해서는 .woff 나 .eot 파일로 변환해야 한다. anyconv 사이트에 들어가서 스크롤을 내리면 더 다양한 변환 옵션을 확인할 수 있다.

온라인에서 OTF를 WOFF로 변환하십시오 - AnyConv

그 다음에는 font 파일을 src 폴더 안에 저장해주면 된다. 

 

fonts 파일에 넣었다.

@font-face 설정하기

MDN에 따르면 @font-face는 '웹 페이지의 텍스트에 온라인 폰트를 적용할 수 있게' 해준다. 

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [,<source>]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

나는 SCSS라서 font.scss 파일에 @font-face를 설정해주었고, Bold 버전이 따로 있어서 font-weight까지는 설정 안했다.

@font-face {
  font-family: 'Gwangyang';
  src: url('./Gwangyang-Sunshine-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Gwangyang Bold';
  src: url('./Gwangyang-Sunshine-Bold.woff') format('woff');
}

사용할 때는 @font-face에서 설정한대로 font-family : 'Gwangyang' 을 쓰면 예쁜 글씨체가 적용이 된다!

광양 글씨체 최고!

폰트에 따라 사이트가 촌스러워보이기도 하고, 세련돼 보이기도 한다. 디자인에서 폰트가 중요한 만큼 심심할 때 예쁜 폰트들을 찾아놔야겠다.