여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. 웹폰트 사용 방법
웹폰트 사용 방법
2년전 작성
2년전 수정

브라우져별로 기본 폰트가 조금씩 차이가 있다.

모든 폰트의 모양을 동일하게 만들려면 웹폰트를 이용해야한다.

웹폰트

서체 파일을 서버에 탑재해 클라이언트로 보내주는 방식의 기술이다.

웹폰트로 사용되는 파일 형식으로는 EOT, WOFF, WOFF2 등이 있다.

WOFF가 호환성이 가장 좋으므로 나는 WOFF를 사용한다.

웹폰트 만들기

웹폰트를 만들려면 라이선스 요구 사항을 충족하는지 확인을 먼저 해야한다.

Webfont generator 이용하여 웹상에서 웹폰트 만들거나 폰트의 용량이 크다면 sfnt2woff-zopfli for converting ttf to woff 참고하여 웹폰트를 만들자.

Webfont generator

1. Webfont generator 접속
2. [Upload Fonts] 버튼을 눌러서 폰트(ttf) 파일 업로드
3. Yes, the fonts I’m uploading are legally eligible for web embedding. 체크
4. [Download your kit] 클릭

sfnt2woff-zopfli

1. sfnt2woff-zopfli for converting ttf to woff 접속
2. sfnt2woff를 컴파일하고 설치한다.

git clone https://github.com/bramstein/sfnt2woff-zopfli.git woff && cd woff && make && chmod 755 woff2sfnt-zopfli sfnt2woff-zopfli && mv woff2sfnt-zopfli sfnt2woff-zopfli /usr/local/bin && rm -rf ../woff 

3. TTF 또는 OTF 파일을 WOFF로 변환한다.

sfnt2woff-zopfli 웹폰트 경로/웹폰트 이름.tff

웹폰트 사용하기

웹폰트 선언
@font-face {
font-family: '웹폰트 이름';
src: url('웹폰트 경로/웹폰트 이름.woff') format('woff');
font-weight: normal;
font-style: normal;
}
웹폰트 사용
font-family: '웹폰트 이름';

웹폰트 사이트에서 코드 가져오기

Google Fonts

Google Fonts 사이트로 접속한다.

원하는 폰트를 고른다.

원하는 스타일의 폰트 옆에 있는 [Select this style]을 누른다.

<link>나 @import 중 원하는 방식을 선택한 후 코드 복사한다.


CSS
@import url('https://fonts.googleapis.com/css2?family=Kirang+Haerang&display=swap');

스타일 시트를 CSS 파일이나 해당 포스트 <style> … </style> 사이에 넣고 이 폰트가 적용되면 좋겠다 싶은 요소에 스타일 시트 font-family: ‘Kirang Haerang’, cursive;를 추가한다.

기본 예시
기랑해랑체

눈누

눈누 사이트로 접속한다.

원하는 폰트를 고른다.

웹폰트로 사용 부분에 있는 코드를 복사한다.

CSS
@font-face {
font-family: 'SBAggroM';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff');
font-weight: normal;
font-style: normal;
}

스타일 시트를 CSS 파일이나 해당 포스트 <style> … </style> 사이에 넣고 이 폰트가 적용되면 좋겠다 싶은 요소에 스타일 시트 font-family: ‘SBAggroM’;를 추가한다.

기본 예시
어그로체M
참고

Mingg`s Diary
밍구
공부 목적 블로그