Webfont 의 적용 (Google Fonts)

웹페이지를 작성하다보면 자신이 원하는 형태의 폰트로 글자가 표시되기를 원할 때가 있다. 이 때 좀 더 쉽게 원하는 폰트를 적용시키는 방법은 웹폰트(webfont)를 적용하는 것이다. 

https://fonts.google.com/

구글에서는 위 사이트를 통해 다양한 폰트를 제공하고 있고, 쉽게 적용할 수 있도록 가이드를 하고 있다. 

크게 원하는 폰트를 고르고, 그 폰트를 자신의 사이트에 적용하는 것이 큰 골자이다. 

 

사이트에 접속하면 2018년 10월 11일 기준으로 900여개의 font를 제공하고 있다.

화면 오른쪽에는 Languages 를 선택하여 해당 언어에 맞는 폰트를 필터링해서 보여준다. 

아래 화면은 언어를 Korean으로 필터를 했을 때의 결과로 보여지는 한글 폰트들이다. 

폰트를 보면 Sentence, Paragraph, Alphabet, Numerals, Custom 등의 형태로 폰트가 어떻게 표현되는지 볼 수 있다. 그리고, 폰트의 Bold 및 크기를 설정해서 확인해 볼 수도 있다. 

이런 식으로 자신이 사용하기를 원하는 폰트를 찾았다면 오른쪽 위 + 버튼을 눌러 해당 폰트를 선택한다.

처음 선택한 직후에는 기본 설정의 폰트를 확인할 수 있는 반면, CUSTOMIZE 탭을 선택하면 자신이 원하는 특징을 선택할 수 있다.

선택을 하게 되면 기능이 늘어난 만큼 아래와 같이 Load Time이 Fast 에서 Slow 로 변하는 것을 확인할 수 있다. 

다시 EMBED 탭으로 돌아오면 추가할 HTML tag가 좀 더 길어진 것을 확인할 수 있다. 

기본적으로 <link> tag를 통해 추가하는 방법을 제공하기도 하지만 @IMPORT 를 통해서 font를 loading 하는 방법도 알 수 있다.

오른쪽 위 화살표 버튼 (Preview and share) 을 누르면 아래와 같이 상세한 폰트의 내용을 볼 수도 있다.

Preview and share 옆에 "SkyFonts"와 같은 fonts manager를 이용하는 방법 또한 제공하고 있다. 

앞에서 봤듯이 <link> tag를 이용하거나 @import를 이용하여 font를 추가하고 실제 이용하는 곳에 font-family 를 추가하여 사용하면 된다.