브라우져별로 기본 폰트가 조금씩 차이가 있다.
모든 폰트의 모양을 동일하게 만들려면 웹폰트를 이용해야한다.
웹폰트
서체 파일을 서버에 탑재해 클라이언트로 보내주는 방식의 기술이다.
웹폰트로 사용되는 파일 형식으로는 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 중 원하는 방식을 선택한 후 코드 복사한다.
@import url('https://fonts.googleapis.com/css2?family=Kirang+Haerang&display=swap');
스타일 시트를 CSS 파일이나 해당 포스트 <style> … </style> 사이에 넣고 이 폰트가 적용되면 좋겠다 싶은 요소에 스타일 시트 font-family: ‘Kirang Haerang’, cursive;를 추가한다.
눈누
눈누 사이트로 접속한다.
원하는 폰트를 고른다.
웹폰트로 사용 부분에 있는 코드를 복사한다.
@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’;를 추가한다.
참고
