HTML CSS 웹폰트 적용 법 및 안티앨리어싱

폰트 패밀리 설정법

- 버그없이 사용하려면 폰트의 영문명, 따옴표 사용

- 사용자의 컴퓨터에 설치가 된 폰트 적용

 

 

컴퓨터에 설치되지 않은 폰트 사이트 적용 방법

@font-face {
font-family : '이쁜폰트';
src : url(nanumsquare.ttf)
}

- CSS 상단에 @font-face 명령어 추가

- 적용할 폰트의 경로와 이름을 적용 (폴더 내에 폰트 파일 필요)

 

 

웹폰트용 woff 파일

웹폰트용으로 나온 woff 파일은 ttf에 비해 3분의 1 수준이므로 woff 파일 사용을 추천!

@font-face {
font-family: 'NanumSquare';
font-weight: 400;
src: url(NanumSquareR.eot);
src: url(NanumSquareR.eot?#iefix) format('embedded-opentype'),
url(NanumSquareR.woff) format('woff'),
url(NanumSquareR.ttf) format('truetype');
}

 

 

구글 폰트 적용 방법

- HTML 첨부는 <link>로 시작되는 부분을 사용

- CSS 첨부는 @import로 시작되는 부분을 사용

 

 

폰트 안티앨리어싱에 대해 🍯TIP

안티앨리어싱을 적용하면 굴림, 돋움 같은 기본 폰트를 부드럽게 보여준다.

맥 OS와는 다르게 윈도우는 폰트가 예쁘게 보이지 않으므로, 안티앨리어싱을 적용하는 것이 좋다.

CSS에 폰트를 아주 살짝 회전시키면 폰트가 부드러워 보인다.

transform : rotate(0.04deg);