코딩애플의 'HTML CSS 웹폰트 넣는 법과 안티앨리어싱' 강의 내용을 정리한 글입니다.

웹폰트

웹 폰트는 다음과 같이 CSS를 작성하여 적용합니다.

/* gulim 우선 적용, 문제 발생시 dotum 적용 */
body{
	font-family:'gulim', 'dotum','arial';
}

웹 폰트 적용 시 주의할 점은 font-family에 지정한 폰트가 시스템에 미리 설치되어 있어야 하며, 페이지 방문자들의 PC에도 설치되어 있어야 이용 가능합니다.

커스텀 폰트 넣는 법

준비한 폰트파일을 CSS에서 사용가능하게 등록하는 과정입니다.
+ @font-face는 여러개 등록 가능하지만, 한글폰트의 경우 사이즈가 너무 크기 때문에 1~2개만 사용하는 것을 추천합니다.
+ 용량을 줄이기 위해서는 .woff파일(웹폰트용)을 사용합니다.

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

위 url부분에 .ttf등 폰트파일의 경로를 작성해줍니다.

/* 작명한 폰트의 이름을 작성하여 적용 */
body{
	font-family:'이쁜폰트';
}

웹폰트 다운로드

Google Fonts에서 다운로드

• 방문자들이 구글폰트에서 다운받게 되므로 시간 단축 가능
• link태그나 @import를 사용해서 적용

Anti-aliasing

확대를 했을 때 깨지는 폰트를 부드럽게 처리하기 위한 방법 👉 회전

/* 사용할 태그들을 약간 회전 */
p,h4,h3,h2,h1,span{
	transform: rotate(0.03deg);
}

맥북은 원래 부드럽게 처리해주지만, 윈도우는 큰 효과를 볼 수 있습니다.