css 를 이용하여 웹페이지에 폰트 적용하기

 

 

기본적으로 웹페이지에 폰트를 적용하는 방법

구글 폰트를 사용하면 편합니다.

구글 폰트에 들어가서 임포트 하면 됩니다.

 

@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap'); body {   font-family: 'Do Hyeon', sans-serif; }

 

 

 

만약에 사용자의 컴퓨터에 폰트가 없고,

호스팅된 내 하드의 폰트를 사용하고 싶다면?

 

@font-face {   font-family : '내가원하는이름';   src : url(../font/nanumsquare.ttf) }

 

 

 

웹폰트용 woff파일 

 

웹폰트용으로 나온 woff 파일이 있습니다. ttf에 비해 용량이 3분의1 수준입니다.

한글폰트 ttf 파일은 용량이 매우 큽니다.

woff 파일을 사용하시는걸 추천드립니다. ttf와 호환성은 거의 비슷함!!

어짜피 ttf나 woff 둘다 IE8 이하에선 적용되지 않습니다.

자유롭게 woff를 사용하도록 합니다.

나눔스퀘어 woff 버전 : https://github.com/moonspam/NanumSquare

 

 

 

폰트 Anti-aliasing 에 대해

 

여러분 맥으로 웹개발하시면 폰트 뭘 쓰든 이쁘게 보일겁니다.

심지어 굴림, 돋움 같은 기본 폰트도 앤티앨리어싱이 되어서 부드럽게 나옵니다. 

그러나 윈도우에서는 부드럽게 해주지 않습니다.

 

rotate를 사용하면 됩니다.

 

@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap'); body {   font-family: 'Do Hyeon', sans-serif;   transform: rotate(0.04deg); }