CSS / 구글 웹폰트 사용하는 방법
구글에서 많은 웹폰트를 제공하고 있다. 어떻게 사용하는지, IE를 지원하는 방법은 무엇인지 알아본다.
글꼴 선택하고 코드 얻기
- 구글 웹폰트에 접속한다. 한글 웹폰트가 필요하다면 Languages를 Korean으로 설정한다.
- + 버튼을 클릭하여 글꼴을 선택한다. 여러 개를 선택해도 된다.
- 아래에 있는 검은 색 바를 클릭한다.
- 구글 웹폰트를 사용할 수 있는 코드가 있는데, 기본 스타일 외에 다른 스타일을 선택하거나 한글을 사용하려면 CUSTOMIZE를 클릭한다.
- 필요한 스타일을 체크한다.
- 이제 코드를 복사한다. STANDARD와 @IMPORT 중 고를 수 있다.
사용하기
- 다음은 위에서 선택한 나눔 고딕을 사용한 간단한 예제이다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&subset=korean" rel="stylesheet"> <style> p { font-family: "Nanum Gothic", sans-serif; font-size: 23px; } p.a { font-weight: 400; } p.b { font-weight: 700; } p.c { font-weight: 800; } p.d { font-weight: bold; } </style> </head> <body> <p class="a">400 : Lorem Ipsum Dolor 하늘 바다 시나브로</p> <p class="b">700 : Lorem Ipsum Dolor 하늘 바다 시나브로</p> <p class="c">800 : Lorem Ipsum Dolor 하늘 바다 시나브로</p> <p class="d">bold : Lorem Ipsum Dolor 하늘 바다 시나브로</p> </body> </html>
IE에서 구글 웹폰트를 사용하는 방법
- IE는 2022년 6월 15일에 지원 종료되었다. Windows 11에는 IE가 없고, Windows 10에서 IE를 사용하려 하면 Edge 설치를 안내하므로, 특별한 경우가 아니면 IE는 무시해도 된다.
- IE와는 무관하게, 구글 웹폰트를 다운로드 하는 방법은 알아두면 좋다.
구글 웹폰트의 CSS 소스는 다음처럼 되어 있다. woff2 형식의 웹폰트를 사용한다.
@font-face { font-family: 'Nanum Gothic'; font-style: normal; font-weight: 400; src: local('NanumGothic'), url(https://fonts.gstatic.com/s/nanumgothic/v9/PN_3Rfi-oW3hYwmKDpxS7F_z-7r_xFtIsPV5MbNOyrVj67GNc972x-dpix2LdhN-iTB6aWWhDX3G.0.woff2) format('woff2'); unicode-range: U+f9ca-fa0b, U+ff03-ff05, U+ff07, U+ff0a-ff0b, U+ff0d-ff19, U+ff1b, U+ff1d, U+ff20-ff5b, U+ff5d, U+ffe0-ffe3, U+ffe5-ffe6; }
IE는 woff 형식의 글꼴을 지원하므로, IE를 지원하고 싶다면 woff 형식의 글꼴을 다운로드 받아 자신의 서버에 업로드해서 사용해야 한다.
- google webfonts helper에 접속한다.
- google webfonts helper는 구글 웹폰트를 다운로드할 수 있게 도와주는 사이트이다. woff 뿐만 아니라 eot, ttf, svg 등도 다운로드할 수 있다.
- 다운로드하려는 글꼴을 검색하고 클릭한다.
- 한국어를 나타내야 한다면 korean을 선택한다. 필요한 style도 선택한다.
- 글꼴을 다운로드 한다.