웹문서에 Web font적용

React에서 단순히 html문서에 웹폰트 관련 링크와 적용법을 정리한 것이다.

이 포스트는 옛날 브라우저는 일찍이 갖다버렸으며 요즘 브라우저만 취급한다.

 

먼저 참고하면 좋을 글

네이버D2 웹폰트 관련내용 전반 

 

혹시 폰트 서브셋을 만들고 싶다면

폰트 파일이 너무 크다면 필요없는 글자를 지워 용량을 줄일 수 있다. 아래 두 가지 방법이 가장 마음에 들어 소개한다.

subfont : 웹페이지에 있는 문자에 대한 서브셋 만들기

fontforge : 그냥 알아서 열심히 서브셋 만들기

 

TTF를 웹폰트(WOFF2)로 변환하기

세 가지 서비스를 소개한다. 

Online Font Converter : 여기가 최고존엄이다.

CONVERT IO : 아쉽게도 WOFF2는 없고, WOFF만 지원한다.

fontsquirrel : TTF를 업로드하면 WOFF 및 WOFF2로 변환되고, 바로 사용가능한 코드가 함께 제공된다. 다만 한글이 깎여나가는지 HTML문서에서 한글에는 폰트적용이 되지 않는 현상이 있다. 네이버 나눔손글씨사용시 나타난 증상이고, 다른 폰트는 잘 모르겠다.

 

문서에 폰트 적용하기

폰트 파일에 문제가 없다면, css문서에 다음과 같은 형태의 코드로 폰트를 적용할 수 있다.

@font-face{ } 에서 css내에서 사용할 폰트 이름, 폰트가 위치하는 경로를 지정한다.

그 다음, 원하는 엘리먼트에 { font-family : '폰트이름'; } 구문을 통해 폰트를 적용한다.

/* app.css */

@font-face{
  font-family : 'Nanum_gangin';
  src: url('./fonts/nanum_gangin.woff') format('woff');
}

.App{
  font-family : 'Nanum_gangin';
  font-size : 200%;
}

 

구글폰트 사용하기

위에 있는 것들 전부 다 하기 싫다면, 구글폰트를 사용할 수도 있다. 구글 서버에 저장된 폰트를 필요한만큼 쪼개서 보내준다. 본인이 원하는 폰트가 마침 구글폰트에 있다면, 바로 사용하면 된다.

예를 들어 나눔고딕을 사용하고 싶다고 하자. 오른쪽의 사이드바에서 Embed를 선택하면 태그가 나타난다. link는 html의 head에, @import는 css에 사용할 수 있으니 맘에드는대로 고르면 된다.