워드프레스 블로그에 구글폰트 적용하기 – 사용자 CSS 메뉴 사용

나눔고딕 폰트, 참 좋은데요. 구글님 덕분에 코드 몇 줄만 추가하면 즉시 사용할 수 있습니다.

하나. 구글폰트 찾아 코드 얻기

마음에 드는 폰트 장바구니 넣기

fonts.google.com에 접속합니다. 우측 상단의 검색 버튼을 눌러서 원하는 폰트를 찾습니다. Serif = 명조체 계열, Sans Serif=고딕체 계열입니다. Handwriting은 손글씨 종류, Monospace는 html 코드 표현 등에 적합한 고정폭 글꼴입니다. 언어별 필터링 가능해서 한글 폰트만 볼 수 있네요. 나눔고딕, 나눔명조, 나눔펜글씨, 나눔고딕코딩, 나눔붓글씨, 배달의 민족의 주아체, 도현체, 연성체 등 꽤 인기있는 폰트가 서비스되고 있습니다. 미리보기가 표시되는데, 직접 원하는 문구로 수정 가능하니 타이핑해보세요.

마음에 드는 폰트 옆의 + 마크를 눌러서 담으면 화면 하단에 “2 Families Selected”와 같이 담은 폰트를 함께 담아갈 수 있는 막대기가 표시됩니다.

소스 얻기


적용했을 때 속도 저하에 대한 조언도 나오지요. 위 화면에서는 Load Time: Fast 이므로, 두 개 폰트 불러들여도 사이트 로딩 속도에 큰 영향을 주지 않을 거라 기대할 수 있습니다. 평균적으로 보았을 때 그렇단 거지요.

이제 여기서 복사할 자료는 @IMPORT 섹션 아래의 @import로 시작하는 부분과, font-family로 시작하는 부분입니다.

@import url('https://fonts.googleapis.com/css?family=Cute+Font|Yeon+Sung');

그리고,

font-family: 'Cute Font', cursive;
font-family: 'Yeon Sung', cursive;

까지 복사해서 메모장에 붙여넣어주세요.

소스 다듬기

다음으로 확보한 두 부분을 복사하여 아래와 같이 다듬어 봅시다. 테마의 특성과 개인의 기호에 따라 만져주시면 됩니다.

@import url('https://fonts.googleapis.com/css?family=Cute+Font|Yeon+Sung');

body, button, input, select, textarea {
    font-family:  'Cute Font', 'Yeon Sung', cursive;
    font-size: 15px;
    font-size: 1.5rem;
}

 blockquote {
    font-size: inherit;
}

익숙한 분들이야 설명이 따로 필요하지 않겠습니다만, 위 소스는 @import 명령으로 구글폰트 사이트에서 Cute FontYeon Sung 폰트를 가져온 뒤에, 전체 블로그의 기본 폰트(body)와 버튼(button)이나 텍스트 입력란(textarea) 등에 걸쳐 폰트를 지정하겠다는 겁니다.

이 때 폰트(font-family)의 우선 순위는 Cute Font를 우선으로 하고, 없거나 표현할 수 없으면 Yeon Sung체를, 이도 없으면 컴퓨터에 있는 서체 중에 cursive(필기체 느낌) 느낌을 지닌 폰트로 표현합니다.

폰트 사이즈 같은 선언은 안 넣으셔도 되는데, 제 경우에는 워드프레스 테마 twentyfifteen를 쓰거든요. 이 녀석이 디스플레이 가로폭에 대응하여 계속 본문 폰트의 크기를 변형하더라고요. 꼭 필요할까 싶어 15px로 강제 고정시키는 소스를 넣어서 사용하고 있습니다. 또한 blockquote의 폰트 사이즈를 기본 설정에 맞추어 따라가도록 고정시켰습니다. 일반적으로 현재 글꼴의 크기에 불만 없으시면 패스하시면 됩니다.

만약 기본 폰트는 ‘Cute Font’로, 인용 블록의 폰트는 Yeon Sung체로 하고 싶으면, 아래와 같이 하면 되겠지요?

@import url('https://fonts.googleapis.com/css?family=Cute+Font|Yeon+Sung');

body, button, input, select, textarea {
    font-family:  'Cute Font', cursive;
}

 blockquote {
   font-family:  'Yeon Sung', cursive;
  font-size: inherit;
}

적용 예시 추가

제 블로그에 적용한 예시입니다. Inconsolata, 나눔고딕, Roboto 세 개의 폰트를 불러와 적용하고 있습니다.

일단 영어폰트 Roboto가 이쁘기 때문에 영어 기준으로 Roboto로 최우선 표현하고, 한글이 등장하면 나눔고딕을 적용합니다. 두 개 모두 실패한 경우 기기의 sans-serif(고딕 계열) 폰트로 대체합니다.

<code><kbd> 태그에는 고정폭 글꼴인 Inconsolata를 적용합니다. 실패하면 monospace(고정폭) 글꼴을 기기에서 불러와 사용합니다.

@import url('https://fonts.googleapis.com/css?family=Inconsolata|Nanum+Gothic|Roboto');

body,
button,
input,
select,
textarea {
    font-family: Roboto, Nanum Gothic, sans-serif;
    font-size: 15px;
    font-size: 1.5rem;
}

 blockquote {
    font-size: inherit;
}


code,
kbd,
tt,
var,
samp,
pre {
    font-family: Inconsolata, monospace;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

둘. 블로그에 적용하기

위와 같이 다듬은 CSS 코드를 이제 블로그에 적용합시다.

적용하는 방법으로, 1) 직접 테마의 style.css 파일을 수정하는 방법과, 2) 테마에서 만약 제공하는 경우 child css 파일을 만지는 방법이 있지만, 3) 워드프레스 관리자 페이지에서 직접 사용자 CSS 를 추가하는 것을 추천합니다.

3)번과 같은 방법을 선택하면 여러모로 유리합니다.

  • 테마의 중요 파일을 직접 건드리지 않기 때문에 나중에 문제가 생기더라도 원상복구가 쉽고,
  • FTP 프로그램의 도움 없이 간편하게 관리자 페이지 안에서 소스를 추가하고 적용할 수 있으며,
  • 관리자 페이지에서 이 사용자 CSS 적용에 관한 리비전 히스토리와 복구 기능을 제공해서 예전에 적용했던 소스로 회귀하거나 잃어버린 설정을 다시 복구하여 검토하고자 할 때 편리합니다.

코드 붙여넣기

이제 관리자 페이지에 마련한 소스를 붙여넣어 적용해봅시다. 자신의 블로그 관리자 대시보드에서, 외모 > CSS 편집 메뉴로 진입하세요.

이제 추가 CSS 제목 아래의 빈 공간에 아까 복사한 소스를 붙여넣기 하면 됩니다. @import 앞에 빈 칸이 없는지 확인하시고, 가장 왼쪽 위에 먼저 등장하도록 합니다.

붙여넣은 뒤, 공개하기 버튼을 눌러 발행해주시고 접속하여 적용되었는지 체크하시면 됩니다.

셋. 구글폰트 적용 시 사이트 속도 저하

구글폰트를 적용하면 사이트가 느려집니다. 특히 최초 접속자인 경우 폰트를 처음 내려받아야 하기 때문에 더 체감 시간이 길어지죠. 우리나라처럼 인터넷 속도 빠른 곳에서 페이지가 바로바로 안 열리면 그냥 나가버리는 사람이 많습니다.

구글폰트 적용하면 .. 얼마나 느려질까요? 시험삼아 Webpagetest.org를 통해서 대한민국+크롬 브라우저 접속 환경에서 나름 이미지가 많이 포함된 문서 하나를 로드하는 데 걸린 시간을 측정했습니다. 2018-06-10 현재 워드프레스 최신 버전(v. 4.9.6)이고, 테마는 twentyfifteen입니다.

구글폰트 사용하지 않음

3.3초 정도입니다.

나눔고딕만 설정한 경우 (구글폰트 표시: Fast)

3.7초로 10% 정도 속도 저하를 보입니다.

총 세 개의 폰트 적용 시 (구글폰트 표시: Moderate)

Inconsolata, Nanum Gothic, Roboto 세 개를 적용한 경우입니다. 4.1초로 나눔고딕 하나만 설정한 경우보다 10% 더 느려집니다. 아무 폰트도 설정하지 않은 경우보다 약 1초 정도 더 기다려야 페이지가 로딩된다고 보면 될 거 같아요. 구글폰트에서도 세 개 폰트 퍼가려고 하니 ‘Moderate’으로 표시하면서 Fast에서 한 단계 강등하더군요. 사실 1초 정도 차이나면 체감이 꽤 되는 편일 겁니다.

결론

1~2개 정도를 적용해보는 건 나쁘지 않아 보입니다. 3개 이상을 적용하는 경우 무거운 폰트인지, 주로 접속하는 사람들의 인터넷 환경과 체감이 어떨까 고민이 필요할 거 같습니다.

이미지가 없는 포스트의 경우 세 개의 폰트를 로딩해도 1.9초만에 열리는 결과도 보입니다. 포스트 자체가 많이 무겁지 않으면 큰 부담은 아니지 않나 생각하고요. 게다가 캐시 플러그인이 적용되거나 재방문일 경우 로딩은 더 빨라지겠습니다.

amp 플러그인 사용자의 경우 모바일 접속자의 빠른 접속을 위해 과감하게 폰트 적용을 포기하거나, amp plugin 의 커스텀CSS 메뉴를 제공하는 경우 최소한으로 적용해보는 걸 추천합니다.

평균적으로 저는 아마존 라이트세일 서비스를 사용, 일본 리전의 서버를 통해 블로그를 호스팅하는데 구글폰트 3개를 적용했을 때 2초~4초 사이에서 글 하나가 열린다고 보면 될 거 같습니다.

이것은 또 접속 시간대와 사용자의 기기, 운영체제, 인터넷 환경에 따라 많은 차이가 있을 겁니다.

지금 이 페이지를 non-amp 버전으로 보고 계시다면, 피드백 주시면 감사하겠습니다.

(2018년 6월)

댓글 남기기