앞서 가장 효과적으로 웹폰트를 적용하는 방법에 대해서 살펴 보았습니다. 그러한 방법을 통해서 자신이 원하는 웬폰트 중심으로 콘텐츠가 보여지도록 설정했죠.

그럼에도 불구하고 대부분의 테마나 플러그인은 대부분 구글 웬폰트를 사용하도록 프로그램되어 있다보니 자동으로 구글 웬폰트를 로딩합니다. 이는 불필요하게 속도를 저하시키고 슬데없는 트래픽을 발생시킵니다.

여기에서는 속도와 트래픽에 좋지않은 영향을 미치는 구글 폰트가 로딩되지 못하도록 막는 방법에 대해서 살펴봅니다.

[쇼핑몰 속도 개선] 구글 폰트 로딩 방지법

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

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

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

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

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

[쇼핑몰 속도 개선] 구글 폰트 로딩 방지법

워드프레스의 대부부능 테마나 플러그인들은 기본적으로 구글 폰트를 사용하는 것을 전제로 프로그램됩니다. 더우기 워드프레스 자체도 구글 폰트 사용을 당연시하고 구글 폰트 로더를 기본으로 제공하고 있기도 하죠.

그러나 구글 폰트는 구글 서버에서 폰트를 가져오고, JS를 사용하므로 중간에 다른 콘테츠 로딩을 막으면서 속도를 저하시키는 원인이 되기도 합니다.

구글 폰트를 적극적으로 사용한다면 큰 문제는 없지만 구글 웹폰트를 사용하지 않는다면 구글 폰트관련 설정 파일들이 로딩되는 것을 막아 최적화할 필요는 있습니다.

1. 구글 폰트 미적용시에도 설정은 로딩된다.

많은 테마에서는 구글 폰트를 사용하지 않는 옵션을 제공합니다.

그러나 이 옵션을 적용해도 다른 플러그인등에서 구글 폰트를 사용하도록 되어 있어서인지 모르지만 구글 폰트 관련 제반 파일들이 로딩됩니다.

https://fonts.googleapis.com/css?....Code language: PHP (php)

이렇게 구글 폰트 관련 설정 내용들이 로딩되면서 테ㅏ에 따라서 50k ~ 250k정도의 용량을 다운받더군요. 대세에 큰 지장은 없지만 일정정도 속도 지연도 발생합니다.

2. 구글 폰트 로딩을 근본적으로 막기 – 플러그인 이용

그러면 구글 폰트를 사용하지 않을 시 구글 폰트 설정 및 폰트들이 로딩되고 다운받아지는 현상을 어떻게 막을 수 있을까요?

구글링을 통해서 구를폰트 로딩을 막는 다양한 코드들을 테스트해 보았지만 효과가 없었습니다.

또한 구글 폰트 사용을 막아준다는 플러그인들이 몇가지 존재합니다.

아래는 “Disable Google Fonts”라는 키워드로 검색한 구글 폰트관련 플러그인들입니다.
Autoptimize와 Disable Google Fonts와 같은 플러그인들이 보이는군요. 그러나 이중에서 제대로 효과를 내는 것은 딱 하나만 보았습니다.

2.1. Autoptimize 플러그인

Autoptimize 플러그인은 다양한 기능과 함께 CSS 파일들을 묶어 다운할 수 있도록 만들어 서버 요청 회수(request)를 획기적으로 줄여줍니다. 저의 경우 106개 정도의 request가 40여개로 줄더군요, 

그러나 서버 요청 회수(request)를 획기적으로 줄어 들어도 전체 로딩 시간은 별 차이가 없더군요. 조금 아이러니하기는 했습니다.

또한 이 플러그인은 Elementor와 궁합이 맞지 않은 것 같았습니다. 이 플러그인을 적용하면 Elementor로 편집한 화면은 설정이 엉키더군요.

예를 들어 메인 페이지 Link color를 화이트로 설정해 놓았는데 플러그인 적용후에는 블랙으로 바뀌어 버립니다. 그리고 다시 변경하려면 또 디자인이 틀어져 버립니다.

또한 이 플러그인은 구글 폰트 사용을 막아주기는 하지만 구글 폰트관련 설정이 로딩되는 것을 막지는 못하더군요. 그래서 지웠죠.

2.2. Disable Google Fonts

Disable Google Fonts 플러그인은 아준 단순하게 구글 폰트 사용만을 막아줍니다.

사용 자체는 막아주지만 구글 폰트와 관련된 설정이 로딩되는 것을 막지는 못합니다.

그래서 이 플러그인도 삭제될 운명에 처했습니다.

2.3. Remove Google Fonts References

이 Remove Google Fonts References 플러그인은 다소 덜 알려져 있지만 제가 테스트했을 시 확실하게 효과를 보여준 플러그인입니다.

“[워드프레스 Tips] 워드프레스에 설치된 구글웹폰트 제거 방법 – 매뉴얼 제거 또는 플러그인 사용”라는 글에서도 이 플러그인을 추천하고 있더군요.

다만 이 플러그인은 지난 3년간 업데이트가 없었습니다. 이는 조금 불안한 요소로 보입니다.

Remove Google Fonts References 적용 후 속도

Remove Google Fonts References 르 적용 후 전체 로딩 속도가 크게 개선된 것은 아닙니다.

왜냐하면 이전에도 구글 폰트 로딩 용량과 숫자가 많지는 않았기 ㄸ문입니다. 구글 폰트 수가 많고 많은 용량을 다운 받는 경우 효과는 클 것으로 보입니다.

아무튼 Remove Google Fonts References 적용 후 테스트해보니 속도도 괜찮게 나왔고 더우기 그글 폰트와 관련된 설정 파일 로딩도 없어졌습니다.

Web Page Performance Test for puripia.com

3. Content-Security-Policy 활용

Content-Security-Policy를 적용하면 등록된 화이트 리스트(White list)만 로딩되고 작동하기 때문에 등록 화이트 리스트(White list)에서 제외하면 외부의 어떤 소스도 작동할 수 없다는 점을 이용하는 것입니다.

이를 응용하면 구글폰트의 외부 로딩을 원천적으로 막을 수 있습니다.

저의 경우 Content-Security-Policy의 style-src를 아래와 같이 세팅했습니다.

여러 유명회사들이 들어가 있는 이유는 이런 저런 서비스를 이용하다보면 이들 회사것을 알게 모르게 사용하게 때문에 화이트 리스트(White list)에 올려 놓았습니다.

add_header Content-Security-Policy "style-src 'self' 'unsafe-inline' 'unsafe-eval' *.google.com *.twitter.com *.facebook.com  *.google-analytics.com *.daumcdn.net *.daum.net *.gstatic.com *.naver.net *.naver.com *.inicis.com ;" always;Code language: PHP (php)

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

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

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

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

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

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

그 쇼핑몰의 주소는  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)