# font

**폰트 패밀리 설정법**



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

\- 버그없이 사용하려면 폰트의 영문명을 사용하셔야합니다.

\- 폰트명에 띄어쓰기가 있을 수 있으니 따옴표 안에 담는게 좋습니다.

\- 폰트명을 콤마로 여러개 쓰면 제일 왼쪽에 있는 폰트부터 적용합니다. 실패하면 뒤에 있는 폰트들을 차례로 적용합니다.

\- 웹사이트 이용자의 컴퓨터에 설치가 된 폰트들을 적용할 수 있습니다.

&#x20;

**사용자의 컴퓨터에 설치되지 않은 폰트를 사이트에서 이용하려면**&#x20;

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

CSS파일 최상단에 @font-face 라는 명령어를 넣고,

그 안에 적용할 폰트의 경로와 이름을 적어주시면 됩니다. (폴더 내에 폰트 파일이 필요합니다)

그럼 이제 원하는 곳에서 **font-family : '이쁜폰트'** 라는 폰트를 사용할 수 있습니다.

(그럼 그곳엔 nanumsquare.ttf 폰트가 적용됩니다)

&#x20;



**웹폰트용 woff파일**&#x20;

&#x20;

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

한글폰트 ttf 파일은 용량이 매우 크기 때문에 (한글폰트는 특히 몇천자가 들어있기 때문에)

구할 수 있다면 woff 파일을 사용하시는걸 추천드립니다. ttf와 호환성은 거의 비슷한 수준입니다.

어짜피 ttf나 woff 둘다 IE8 이하에선 적용되지 않습니다. 자유롭게 woff를 사용하도록 합니다.

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

&#x20;



**폰트를 빠르게 사용하기 위한 Google Fonts**

&#x20;

구글폰트라는 사이트를 이용하면 굳이 폰트파일을 구하지 않아도 됩니다.

Google Fonts 사이트에서 바로 폰트파일과 CSS 정의부분을 링크할 수 있으니까요.

[fonts.google.com](http://fonts.google.com/)

&#x20;

저 사이트에서 원하는 폰트를 고르신 다음&#x20;

HTML에 첨부하고 싶다면 \<link>로 시작되는 부분을 복붙하시면 되고,

CSS에 첨부하고 싶다면 @import 로 시작되는 부분을 CSS 맨 위에 복붙하시면 됩니다.

구글이 호스팅해주는 폰트가 미리 정의된 CSS 파일을 가져다 쓰는 것이라

내 사이트의 트래픽을 절약할 수 있다는게 장점이고

크롬브라우저는 이미 방문한 사이트는 캐싱해주기 때문에 많은 사람들이 이용할 수록 더 빠르게 폰트를 이용할 수 있습니다.&#x20;

&#x20;

&#x20;**폰트 Anti-aliasing 에 대해**

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

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

앤티앨리어싱이 뭐냐면 그 픽셀의 각진 부분을 스무스하게 바꿔주는건데&#x20;

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2FwFW5Z5C8JTsCUuc50siB%2F11.jpg?alt=media&#x26;token=c0d78133-7564-4989-80c5-54877fa99fff" alt=""><figcaption></figcaption></figure>

▲ 오른쪽이 안티앨리어싱 적용했을 때의 선입니다. 훨씬 부드러워보이죠?



맥 OS쓰시면 저렇게 알아서 해주지만 윈도우는 전혀 아닙니다.&#x20;

윈도우에서 돋움, 굴림 폰트를 매우 작게 축소하거나 아니면 매우 크게 확대했을 때 매우 각져보입니다.&#x20;

돋움, 굴림 뿐만 아니라 대부분의 폰트가 저런 현상이 일어납니다.&#x20;

디자인 잘하는 사람 입장에선 매우 거슬리는 문제인데

이 문제를 해결하고 싶다면 웹상의 글자를 살짝 돌려보십시오.&#x20;



```css
transform : rotate(0.04deg); 
```

CSS파일에다가 이거 쓰라는겁니다.&#x20;

글자를 정말 매우 살짝 회전시키면 윈도우에선 안티앨리어싱 된 듯한 느낌을 줍니다. 부드러워짐&#x20;

