HTML CSS 웹폰트 넣는 방법 & 안티앨리어싱

1. 폰트 패밀리 설정방법

• 오류 없이 사용할려면 폰트의 영문명을 사용한다.
• 폰트명에 띄어쓰기가 있을 수 있으므로, 따옴표 안에 담는다.
• 폰트명을 콤마( , )로  여러개 쓰면 제일 왼쪽에 있는 폰트부터 적용. 실패하면 뒤에 있는 폰트들을 차례로 적용한다.
• 웹사이트 이용자의 컴퓨터에 설치가 된 폰트들을 적용이 가능하다.

body {
  font-family : 'gulim', 'gothic'
}

 

 

- 사용자의 컴퓨터에 설치되지 않은 폰트를 사이트에서 이용하는 방법

• CSS파일 최상단에 @font-face 라는 명령어를 넣고, 그 안에 적용할 폰트의 경로와 이름을 적어두면 된다.
  
  • font라는 폴더안에 폰트(ttf 혹은 woff)파일이 필요
    • woff파일은 ttf대비 용량이 적은 폰트 파일로 woff파일을 구할 수 있다면 사용하는 것을 추천

@font-face {
  font-family : '다운받은폰트';
  src : url(../font/다운받은폰트.ttf)
}

 

 

 

2. 폰트를 빠르게 사용하기 위한 사이트

 

- 구글 폰트 사용

• fonts.google.com 사이트에 접속을 합니다.
• 원하는 폰트를 고른후 select 버튼 클릭
  • HTML에 첨부하고 싶다면 <link>로 시작되는 부분을 복사 붙여넣기
  • CSS에 첨부하고 싶다면 @import 로 시작되는 부분을 CSS 맨 위에 복사 붙여넣기
• 사용 하는 이유 
  • 구글에서 호스팅 해주는 폰트를 가져가 쓰는 거라 사이트의 트래픽을 절약
  • 크롬브라우저는 방문한 사이트를 캐싱해주기 때문에,
    사용자가 많이 이용 할수록 빠르게 폰트를 이용할 수 있다.

 

 

 

- 눈누 폰트 이용

• https://noonnu.cc/ 사이트를 접속을 합니다.
• 원하는 폰트를 클릭 후 웹폰트로 사용를 복사 CSS 최상단에 붙여 넣기를 하시면 됩니다.

 

 

 

3. font anti-aliasing

-  webkit-font-smoothing 방식

• CSS 스타일 속성에  -webkit-font-smoothing 속성이 있습니다.
  •  다만 모든 브라우저에서 사용이 되는 것이 아니며, Webkit기반 사파리, Mac에서만 작동을 합니다.

-webkit-font-smoothing: antialiased;

 

 

- transform: rotate 방식

• window 기반에서도 사용하는 방법(꼼수)가 있습니다.
• transform 속성으로 적은 값의 rotation을 적용하면 anti-aliasing과 비슷한 효과를 만들 수 있습니다.

body {
    transform: rotate(0.04deg);
}

적용 전

적용 후