워드프레스 쇼핑몰이든 워드프레스 블로그 사이트든 사이트 콘텐츠를 가장 미려한 폰트를 이용해 보여주기 위해서는 웹폰트를 사상할 수 밖에 없는데요.

여기에서는 한글 웬폰트를 적용하면서도 속도나 트래픽을 최소로 사용하는 방법에 대해서 살펴봅니다.

[사용 경험 개선] 가장 효과적인 웹폰트 적용법 – 나눔바른고딕을 중심으로

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는  https://puripia.com로 아직도 공사중이기는 합니다.) 

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이  공유합니다. 조금 사심이 있기는 합니다.

[사용 경험 개선] 가장 효과적인 웹폰트 적용법 – 나눔바른고딕을 중심으로

쇼핑몰이든 블로그 사이트이든 우선 보기에 좋아야하기 때문에 사용자들이 좋아할 웹폰트를 적용하게 됩니다.

여기서는 웹폰트를 적용하되 가장 효율적으로 그리고 가장 빠른 속도를 낼 수 있는 방안에 대해서 살펴 보겠습니다.

웹폰트 적용에 대해서는 많은 글들이 있지만 아래 글을 참조했고, 동의를 얻어 일부 내용을 가져왔습니다.

[Tips] 본고딕(노토산스CJK) 경량화 버젼 적용법

1. 폰트 적용 방향

어떠한 폰트를 보여주느냐는 사이트 운영 철학 또는 브랜드 정책에 따라 달라집니다.

예를 들어 회사에서 브랜드 홍보용으로 특별히 만든 폰트가 있다면 기본적으로 이 회사 개발 폰트가 가능하면 적용해야 합니다. 그래야 회사의 일관된 메세지가 잘 전달 될 수 있을 것이니깐요.

저희 사이트는 아직 특정 폰트만을 고집할 필요는 없다는 생각했습니다. 사용자들이 어느 정도 좋아할만한 폰트라면 별 문제가 없을 것이죠.

그래서 아래와 같은 원칙을 적용했습니다.

• 폰트는 사용자들에게 어느 정도 호응을 얻은 폰트라면 적용 가능
• 애플 기기 사용자들은 애플 SD 산돌고딕 Neo, 윈도우즈 사용자는 나눔바른고딕, 본고딕을 기본적으로 추천
• 사이트 속도를 최적화하기 위해서 가능하면 사용자의 시스템에 설치된 폰트를 사용토록 유도
• 시스템폰트에 원하는 폰트가 없다면 나눔바른고딕을 다운, 적용

2. 웹폰트 적용법

위에서 정한 원칙에 따라 아래의 포인트들을 점검했습니다.

2.1. 사용자 PC의 시스템 폰트 활용

사용자의 시스템에 있는 폰트를 이용하려면 local()이라는 명령을 사용합니다.

애플 사용자라면 맥킨토시 컴퓨터 시스템안에 애플 SD 산돌고딕 Neo이 설치되어 있을 것이고, 위도우즈 사용자라면 나눔바른고딕이나 본고딕 또는 최소한 맑은고딕체가 설치되어 있을 것입니다.

사이트 메인 페이지가 로딩되면서 이러한 폰트를 찾아서 띄워주는 것이죠.

그런데 이 시스템에 설치된 폰트이름이 다른 경우가 많으므로 가장 일반적으로 사용하는 이름들은 전부 적용해 줍니다.

• 나눔 바른 고딕 : 나눔바른고딕, NanumBarunGothic, 나눔바른고딕OTF, NanumBarunGothicOTF (NanumBarunGothicOTF와 나눔바른고딕OTF는 맥용 safari, Firefox, Chrome에서 필요)
• 애플 SD 산돌고딕 Neo : ‘애플 SD 산돌고딕 Neo’, ‘Apple SD Gothic Neo’
• 맑은고딕 : ‘맑은 고딕’, ‘Malgun Gothic’
• 나눔고딕 : 나눔고딕, NanumGothic

2.2. 나눔바른고딕 웹폰트 적용

위에서 설정한 폰트들이 없는 경우 나눔바른폰트를 내려받도록 합니다.

• IE8이하 브라우저들은 EOT 파일을 내려 받도록 합니다.

src: url('https://puripia.com/Font/nanumbarungothicregular.eot'); /*For IE6~8*/Code language: PHP (php)

• IE 6~8은 EOT 파일만 지원하고 포맷명을 해석하지 못하기 때문에 파일명뒤에 물을표(?)를 추가하면 물음표 이후 구문을 모두 쿼리문으로 인식해 무시하도록 합니다. 관련 추가 명령을 추가합니다.

url('https://puripia.com/Font/nanumbarungothicregular.eot?#iefix') format('embedded-opentype'),Code language: PHP (php)

• IE9+이상은 용량이 조금 크지만 가독성이 좋은 WOFF를 다운받도록 한다면 아래 코드로 대신 합니다.

 src: local(☺),Code language: PHP (php)

• WOFF 포맷을 30% 더 압축해 용량을 줄인 WOFF2를 지원하는 브라우저는 WOFF2를 내려 받도록 먼저 위치시킵니다. Chrome, Fire Fox, Opera, Edge가 지원합니다

url('https://puripia.com/font/nanumbarungothicregular.woff2') format('woff2'),Code language: PHP (php)

• 나머지 모던 브라우저들은 WOFF 포맷을 지원하므로 이를 다운토록 합니다. WOFF를 지원하는 IE9+, Chrome, Safari, Opera 등등 대부분이 지원하지만 압축율이 좋은 WOFF2를 지원하는 Chrome, Fire Fox, Opera, Edge를 빼고 IE9이상, Safari에서 적용됩니다.

url('https://puripia.com/font/nanumbarungothicregular.woff') format('woff'),Code language: PHP (php)

• WOFF 포맷이 적용안되는 경우는 이전부터 사용되던 TTF를 다운하도록 합니다. TTF형식은 용량도 크고 쉽게 복제 가능해 이를 대체코자 WOFF가 만들어졌습니다.

url('https://puripia.com/font/nanumbarungothicregular.ttf') format('truetype'),Code language: PHP (php)

• WOFF나 TTF 포맷을 지원하지 않은 구 모바일 브라우져(Safari 4.3 이하, Android 4.3 이하, Opera Mobile 10 이하 등)를 위해서 CSS2에서 폰트로 활용 가능한 SVG(Scalable Vector Graphics)를 적용합니다.

url('https://puripia.com/Font/notokr-demilight.svg') format('svg');Code language: PHP (php)

3. 폰트 적용 위치 지정

다음으로는 이 폰트를 어디에다 적용할지를 정해줍니다.

대부분은 body를 비롯해 모든 장소에 이 폰트를 적용하는 것으로 지정하죠. 사용위치 그리고 font-family를 정의합니다.

• 테마의 css 파일에서 지정하는 것들을 무시하고 싶다면 font-family 마지막 부분에 !important를 추가합니다.
• font-family 마지막 부분에 !important를 넣었다면 아마 대부분 FontAwesome 폰트가 적용되지 않습니다. 이를 해결하려면 별도 명령어를 추가해야 합니다.
• 테마의 css 파일에서 지정한 명령이 어느 정도도 필요하다면 font-family 마지막 부분에 !important를 적용하지 않습니다. 그러면 FontAwesome 폰트도 적용되는데요. 저는 Edge 등에서 일부 글꼴이 적용되지 않는 현상이 발견되더군요.

3.1. font-family 마지막에 !important 미지정 시

저는 아래와 같이 지정했습니다.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
 {
    font-family: '애플 SD 산돌고딕 Neo','Apple SD Gothic Neo','Helvetica Neue','Helvetica','나눔바른고딕','NanumBarunGothic','나눔바른고딕OTF','NanumBarunGothicOTF','Noto Sans','Noto+Sans','notokr-demilight','나눔고딕','NanumGothic','맑은 고딕','Malgun Gothic','sans-serif';
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
 }Code language: PHP (php)

이렇게 적용 시 저의 경우는 Edge나 IE에서는 우커머스 부분에서 일부 제목 폰트가 적용되지 않더군요.

3.2. font-family 마지막에 !important 지정 시

가끔 폰트 적용 위치를 지정했음에도 불구하고 폰트가 제대로 나오지 않은 경우가 있습니다. 그러는 경우는 font-family 끝에 !important를 붙여줍니다.

이 경우 강제로 모든 경우 이 폰트로 적용해 버리기 때문에 FontAwesome 적용이 안되는 경우가 많습니다.

요즘 FontAwesome 폰트 적용이 많이 늘고 있기 때문에 필히 해결해야하는 문제인데요. 저는 아래와 같은 코드를 추가해서 해결했습니다.

.fa {
	font-family: 'FontAwesome' !important;Code language: PHP (php)

아래는 최종적으로 확정, 적용한 코드입니다.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
 {
    font-family: '애플 SD 산돌고딕 Neo','Apple SD Gothic Neo','Helvetica Neue','Helvetica','나눔바른고딕','NanumBarunGothic','나눔바른고딕OTF','NanumBarunGothicOTF','Noto Sans','Noto+Sans','notokr-demilight','나눔고딕','NanumGothic','맑은 고딕','Malgun Gothic','sans-serif' !important;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
 }

.fa {
  font-family: 'FontAwesome' !important;
Code language: PHP (php)

4. 최종 적용 코드

아래는 최종적으로 나눔바른고딕체를 적용하기 위해서 적용한 코드이니 참고하시기 바랍니다. 적어도 이 OceanWP 테마에서는 잘 작동합니다.

 @charset “utf-8″
 @font-face {
 font-family: '나눔바른고딕';
 font-style: normal;
 font-weight: normal;
 font-display: swap;
 src: local('나눔바른고딕'),local('NanumBarunGothic'),local('나눔바른고딕OTF'),local('NanumBarunGothicOTF'),local('애플 SD 산돌고딕 Neo'),local('Apple SD Gothic Neo'),local('Noto Sans'),local('Noto+Sans'),local('notokr-demilight'),local('나눔고딕'),local('NanumGothic'),local('맑은 고딕'),local('Malgun Gothic');
 src: url('https://puripia.com/Font/nanumbarungothicregular.eot'); /*For IE6~8*/
 src: local(☺),
     url('https://puripia.com/Font/nanumbarungothicregular.eot?#iefix') format('embedded-opentype'), 
     url('https://puripia.com/font/nanumbarungothicregular.woff2') format('woff2'), 
     url('https://puripia.com/font/nanumbarungothicregular.woff') format('woff'), 
     url('https://puripia.com/font/nanumbarungothicregular.ttf') format('truetype'),
     url('https://puripia.com/Font/notokr-demilight.svg') format('svg');
 }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
 {
    font-family: '애플 SD 산돌고딕 Neo','Apple SD Gothic Neo','Helvetica Neue','Helvetica','나눔바른고딕','NanumBarunGothic','나눔바른고딕OTF','NanumBarunGothicOTF','Noto Sans','Noto+Sans','notokr-demilight','나눔고딕','NanumGothic','맑은 고딕','Malgun Gothic','sans-serif' !important;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
 }

.fa {
  font-family: 'FontAwesome' !important;Code language: PHP (php)