웹사이트 폰트 적용 - websaiteu ponteu jeog-yong

웹폰트

 웹에서 폰트를 적용하기 위해서는 크게 두가지 방법이 있다. TTF, OTF파일과 같은 폰트 파일을 다운받은 뒤 서버에 저장을 시키고, 이 파일을 불러와서 적용하는 방식과 다운받는 것 없이 url을 이용해서 웹 폰트를 적용하는 방식이다. 이 두가지 방법 중에서 두번째 방법인 웹 폰트를 적용하는 방법에 대해서 알아보자.

 웹 폰트 종류

 가장 많이 사용하는 웹 폰트에는 구글 폰트와 눈누가 있다. 구글 폰트에는 영어, 한국어 모두 있고, 눈누에는 한국어 폰트가 주로 있다. 이 웹사이트에 가보면 많은 폰트가 있으니 만드는 웹사이트에 어울리는 폰트를 골라서 사용하면 된다.

구글 폰트 적용하기

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

구글 폰트 웹사이트 상단에 이름으로 폰트를 검색할 수 있고, 언어, 카테고리, properties들을 설정할 수 있다. 그렇게 해서 원하느 폰트를 찾아서 들어가면 된다.

원하는 폰트로 들어가면 font weight에 따른 글들이 나오는데 쓰고싶은 weight의 옆에 + Select this style을 누르면 된다. 꼭 한개가 아니더라도 여러 weight, 여러 폰트들에서 버튼을 눌러도 한번에 적용을 할 수 있다. 그 후에 구글폰트 오른쪽 상단에 있는 아이콘을 클릭하면 된다.

아이콘을 클릭하면 오른쪽에서 웹 폰트로 쓸 수 있는 코드가 나올 것이다. html에 적용시키기 위해서는 <link>를 보면 되고, 이번에는 CSS에 적용을 시키기 위해서는 @import의 코드를 복사해서 붙이면 된다.

CSS 가장 위에 @import 로 된 부분을 붙이고 폰트를 적용하고 싶은 부분에 font-family에서 import한 폰트를 적용하면 된다. 웹사이트 전체에 노토산스 폰트를 적용하는 경우 아래와 같은 코드를 사용하면 된다.

* {
	font-family: 'Noto Sans KR', sans-serif;
}

눈누 폰트 적용하기

눈누 - 상업용 무료한글폰트 사이트

상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누

noonnu.cc

 눈누에서도 구글 폰트와 같이 폰트를 검색하고 볼 수 있다. 

이 중에서 마음에 드는 폰트를 선택하면 아래와 같이 폰트를 미리볼 수 있는 공간과 웹 폰트로 사용하는 코드, 다운로드 링크가 있다. 폰트를 다운받아서 사용하고 싶으면 다운로드 링크에 들어가서 ttf나 otf와 같은 파일을 다운받아서 설정하면 된다. 

웹 폰트로 적용하기 위해서는 @font-face부분을 복사하여서 CSS가장 위에 붙여넣어 준다. 그리고 사용하고 싶은 부분에 font-family를 font-face에 설정된 이름을 사용하면 된다. 전체에 해당 폰트를 사용하는 경우면 아래와 같은 코드를 적용하면 된다.

@font-face {
    font-family: 'SF_HambakSnow';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu//SF_HambakSnow.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
	font-family: 'SF_HambakSnow';
}

폰트 패밀리 설정법 

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

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

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

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

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

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

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

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

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

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

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

웹폰트용 woff파일 

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

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

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

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

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

IE 옛 버전에서도 호환성 좋게 폰트를 사용하려면

@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'); 
}

eot, woff, ttf 파일들을 구하신 후 이렇게 첨부하시면 되겠습니다.

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

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

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

fonts.google.com

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

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

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

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

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

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

폰트 Anti-aliasing 에 대해

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

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

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

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

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

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

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

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

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

transform : rotate(0.04deg); 

CSS파일에다가 이거 쓰라는겁니다. 

transform 어쩌구는 나중에 배울텐데 요소를 살짝 회전시키는 스타일입니다. 

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