구글 웹폰트 적용 및 문제점 정리

Posted by 넉넉한

2018. 3. 15. 21:58 웹페이지

구글 웹폰트 적용 및 문제점 정리

구글 폰트서비스는 현재(2018년 3월) 854개의 웹폰트를 제공하고 있으며 제공되는 폰트를 적용하는 방식도 제시하고 있습니다. 개발자 도구로 웹페이지를 보면 CSS 파일에 설정한 폰트(글꼴)로 표시되지 않는 경우가 더러 보입니다. 작성한 웹페이지(블로그 등)에 어느 폰트가 표시되는지 아래글을 참조하면 알 수있습니다.

▶2018/03/06 - [웹페이지] - 웹페이지 이 글꼴(font)은 무슨 글꼴인가 획인하기-WhatFont tool

티스토리 블로그에 나눔고딕 폰트 위주로 구글 웹폰트를 적용하는 방법과 문제점에대해서 몇가지 정리해봅니다.

1. 구글 웹폰트(google font api) 적용
★ link
★@import
★ font-family 작성

2. 구글 웹폰트 api 사용 문제점(IE 8 이하 문제)

3. 구글 웹폰트 다운로드 및 font-face 작성(IE 8 적용)
★다운로드 사이트
★CSS font-face 및 font-family 작성
★업로드

구글웹폰트

1. 구글 웹폰트(google font api) 적용

나눔고딕

▶구글폰트 사이트 에 접속하고 Nanum Gothic 폰트를 선택합니다. 화면에 표기되지 않은 경우 우측 사이드 메뉴에서 'nanum'을 검색하고(우측 상단 돋보기 아이콘)

▶나오는 화면에서 나눔고딕(Nanum Gothic) 선택 박스 우측 "+"를 클릭하면

▶화면 하단에 "1 Family Selected" 문구의 검은색 바가 나옵니다. 우측 "-"기호를 누르면 설정 화면이 팝업됩니다. 여러 폰트 선택도 가능한 것 같습니다.

구글 나눔고딕 api

▶설정화면에서 CUSTOMIZE를 선택합니다.

⚫regular 400은 기본 크기 글자 bold 700은 굵은 글자입니다. 800도 원하시면 선택하시구요.
⚫Language는 Korean Latin 둘 다 선택합니다.
⚫그리고 EMBED를 선택합니다.

구글 font api

▶스킨 HTML 상의 <head> 부분에 STANDARD탭의 link 태그를 복사하여 추가하고

<LINK rel=stylesheet href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700&subset=korean">

▶선택한 폰트를 적용할 요소(예: body, div, p, 등 CSS 파일에 font-family로 기재돼 있습니다.)의 font-family에 "Nanum Gothic"을 맨앞에 추기하고 쉼표(,)로 다음 글꼴과 구분합니다. ※주의 Nanum과 Gothic을 띄어씁니다(NanumGothic 아님). sans-serif는 예입니다.

font-family: 'Nanum Gothic', sans-serif;

font-family에 여러 글꼴이 있는 이유는 적용하려는 폰트를 브라우저가 표시 못할 경우 다음 글꼴로 표시키기 위함입니다.(fallback font: fallback system)

또는 @IMPORT탭에 나오는 style 속성을 CSS 파일의 처음 라인(@charset 밑)에 복사하여 추가합니다. STANDART와 동일하게 font-family를 수정합니다.

▶link 태그와 @import 중 link 태그 사용이 권장되고 있습니다(속도 면에서).

▶internet explorer에 적용되려면 link 태그를 맨 위에 배치하라는군요.

Note: For best display in IE, make the stylesheet tag the first element in the HTML <head> section. In IE, if the link is placed after <script> tags, the entire page will block and not display anything until the font is loaded. https://developers.google.com/fonts/docs/technical_considerations#microsoft_internet_explorer

2. 구글 웹폰트 사용 문제점

The Google Fonts API is compatible with the following browsers:
Google Chrome: version 4.249.4+
Mozilla Firefox: version: 3.5+
Apple Safari: version 3.1+
Opera: version 10.5+
Microsoft Internet Explorer: version 6+
https://developers.google.com/fonts/faq#what_browsers_are_supported

▶적용 결과를 보면 크롬에는 woff2 폰트 파일을 보내고

@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: local('NanumGothic'), url(https://fonts.gstatic.com/s/nanumgothic/v7/PN_3Rfi-oW3hYwmKDpxS7F_z-7r5xGVIsPV5MbNOjOAhqLLjcNn2k_5qiCeZRkw-iiZtZ2TFfg.0.woff2) format('woff2');
}

IE에는 woff 폰트파일을 보냅니다.

@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: local('NanumGothic'), url(https://fonts.gstatic.com/s/nanumgothic/v7/PN_3Rfi-oW3hYwmKDpxS7F_D89jY.woff) format('woff');
}

▶위에서 보면 google font api는 IE 6부터 적용된다고 하는데 IE 개발자도구로 IE 8 모드로 변경해보면 woff 폰트 파일을 보냅니다(모드 변경 emulation이 정확히 작동되는 지는 모르겠음).
▶IE 8 이하는 woff 폰트를 지원하지 않고 eot 폰트만 지원합니다.
▶IE 8 이하 통계상 사용비율이 1.5% 정도(한국기준: statcounter 통계)로 나오는데 제 경우로는 6개월 평균 15%입니다. IE 8 이하를 고려하지 않더라도 IE 8 이하 브라우저는 표시핳 수있는 폰트로 표시하므로 무시해도 별 문제는 아니지만 모두 적용하려면 아래의 방식을 적용합니다.

3. 구글 웹폰트 다운로드 및 font-face 작성

▶구글 웹폰트(나눔고딕) 다운로드: http://google-webfonts-helper.herokuapp.com/fonts/nanum-gothic?subsets=latin

google fonts

▶1. Select charsets: korean과 latin 둘다 선택

▶2. Select styles: regular, 700(bold체), 800(옵션) 선택

▶3. CSS style 생성
⚫IE 8이하에 적용시키기 위해 Best Support 탭 선택합니다.
⚫Customize folder prefix에서 ../fonts를 ./images로 변경합니다.

/* nanum-gothic-regular - korean_latin */
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: url('./images/nanum-gothic-v7-korean_latin-regular.eot'); /* IE9 Compat Modes */
  src: local('NanumGothic'),
       url('./images/nanum-gothic-v7-korean_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./images/nanum-gothic-v7-korean_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./images/nanum-gothic-v7-korean_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('./images/nanum-gothic-v7-korean_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./images/nanum-gothic-v7-korean_latin-regular.svg#NanumGothic') format('svg'); /* Legacy iOS */
}
/* nanum-gothic-700 - korean_latin */
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 700;
  src: url('./images/nanum-gothic-v7-korean_latin-700.eot'); /* IE9 Compat Modes */
  src: local('NanumGothic Bold'), local('NanumGothic-Bold'),
       url('./images/nanum-gothic-v7-korean_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./images/nanum-gothic-v7-korean_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('./images/nanum-gothic-v7-korean_latin-700.woff') format('woff'), /* Modern Browsers */
       url('./images/nanum-gothic-v7-korean_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./images/nanum-gothic-v7-korean_latin-700.svg#NanumGothic') format('svg'); /* Legacy iOS */
}

위와 같이 생성된 CSS style에서
⚫이 경우 font-family 명칭은 임으로 정할 수있습니다.
⚫생성된 font-face 스타일을 스킨 CSS 파일 맨위 @charset 밑에 붙혀놓습니다.
⚫적용하려는 요소의 font-family 맨 앞에 지정한 명칭의 font-family를 추가하고 쉼표(,)로 구분합니다.

▶4. Download files 업로드
⚫nanum-gothic-v7-korean_latin.zip을 클릭 폰트파일을 다운로드합니다.
⚫nanum-gothic-v7-korean_latin.zip 파일이 다운로드되면 압축을 풉니다.

Nanum Gothic 파일