블로그폰트 무료 웹폰트로 적용하기

새롭게 FastBoot 반응형스킨을 설치한 이 후, 제 취향대로 하나씩 바꿔나가고 있는데 시간이 제법 걸리네요. 제가 만든 스킨이 아니다 보니, 일단 FastBoot 스킨 구조와 Html과 CSS를 이해해야 변경이 가능하니까요. 하나 씩 코드를 건드려보면서 재밌게 커스텀 중입니다. 이번 포스팅의 주제는 내가 원하는 폰트(font)를 블로그에 적용하는 방법입니다. (참고로 어떤 스킨을 사용하던지 적용방식은 같습니다. )

가끔 제 블로그에 적용된 폰트에 대해 질문을 받는 경우가 있는데, 저는 본문에 제주고딕폰트를 사용하고 있습니다. 제주고딕은 제주시에서 만든 무료폰트로 이외에도 제주명조, 제주한라산 폰트를 제공하고 있습니다. 맑은고딕이나 나눔고딕은 이미 대중적이고 가독성이 좋지만 제주고딕은 개인적으로 조금 더 시원하다고나 할까요(?) 개인적으로 색다른 맛이 느껴져서 좋아서 좋아하는 폰트입니다. 

먼저 블로그에 폰트를 적용하는 방식에는 아래와 같은 방법들이 존재합니다.

1. 블로그 서버에 직접 원하는 폰트를 올린 후 적용시키기

2. 외부 서버에서 참조하게끔 적용시키기

     (1) Html에서 link 태그를 이용해서 적용하는 방법

     (2) CSS에서 @import 태그를 이용해서 적용하는 방법

이와 같이 3가지 방식이 있는데, 어떠한 방식을 취하든지, 사용자가 해당 폰트파일이 없다면 결국 다운로드 받게 되거나 아니면 대체 폰트를 사용하게 됩니다. 

그래서 폰트를 너무 많이 사용해서 용량이 너무 커지면, 사용자의 페이지 로딩속도가 늦어질 수 있기 때문에 좋지 않습니다. 보통 하나의 파일당 2~3MB정도의 용량을 차지하지만, 브라우저마다 지원하는 폰트파일 형식(eot, woff 등)이 다르기 때문에, 최소한 2~3개의 (다른확장자명을 가진) 폰트파일을 올리다 보니, 용량이 커지는 단점이 있습니다. 현재 제 블로그 파일용량 크기가 약 0.5MB 정도인데, 폰트 파일 2개만 올려도 4.5 ~ 6.5MB 정도가 되니 이전에 비해 엄청 늘어나게 되는거죠. 

하지만 각각의 방식에 따라 장점과 단점이 각각 존재하는 것도 사실입니다. 아무튼 본 포스팅에서는 가장 간편하게 적용시킬 수 있는 방식인 외부서버에서 지원하는 폰트를 CSS를 통해 참조하는 방법에 대해서 우선적으로 다루어 보려고 합니다.

외부서버에서 폰트 참조하기

외부서버라고 함은, 말 그대로 외부에서 폰트 파일을 지원하는 서버를 말합니다. 대표적인 것이 구글 폰트에서 제공하는 Early Access 서비스 입니다. 찾아보시면 구글 이외에도 개인이 제공하는 경우도 있습니다. (이러한 것들을 CDN이라고 부릅니다. Content Delivery Network의 줄임말이며, 웹 컨텐츠들을 보관하여 제공해주는 기능을 하는 네트워크 입니다.) 일단 아래의 링크를 통해 구글의 Early Access CDN으로 이동해보겠습니다.

Google Fonts Early Access 바로가기

살펴보시면 아시겠지만, 구글 폰트 Early Access에서는 세계 각국의 언어들을 지원하고 있습니다. 나눔폰트도 일부지원이 되고 있고, 제가 적용한 제주고딕도 지원되고 있습니다. 여기에 없는 폰트를 사용하시려면, 직접 서버에 올리시거나 다른 CDN을 검색하시면 됩니다. 

위에 그림에서 보는 바와 같이 사용방법은 간단합니다. @import로 시작하는 참조코드를 CSS 상단에 넣어주고 난 후에, 적용을 원하시는 태그 내에 font-family 항목에 'Jeju Gothic'을 제일 앞에 적어주시면 됩니다. 여러개의 폰트가 적혀있는 경우, 앞에서부터 적용가능한 순서대로 적용하라는 의미입니다. 간편하게 복사하시려면 아래 코드를 긁어가시면 됩니다.

복사용 코드

/* 제주고딕폰트 */
@import url(//fonts.googleapis.com/earlyaccess/jejugothic.css);

body { font-family: 'Jeju Gothic' }

# SyntaxHighLighter 최신버전 설치하기

적용시키기

위처럼 CSS 상단에 @import~ 해주시고, 원하는 태그에 적용시키시면 됩니다. 참고로, 기본적으로 CSS는 상속구조를 가지고 있기 때문에 복잡하게 얽혀있는 경우가 있습니다. 즉 특정 부분에만 폰트를 적용시키고 싶으신 경우에는 CSS구조를 파악하셔서 어떤 태그에 어떤식으로 폰트를 적용시켜야 할지를 정하셔야 합니다. 그런데 이런 방법은 시간도 많이 걸리고 좀 수고스럽습니다. 

하지만 쉽게 가려다가 적용 태그를 잘못 선택하시면, 뒤에 코드에서 특정 위치나 태그에서 강요된 폰트가 없는 한, 메뉴 등의 모든 글꼴이 바뀔 수도 있습니다. 그래서 CSS를 잘 모르겠고 자세히 살펴볼 시간이 없으신 경우에는 위와 같이 CSS내에 정의하는 것이 아니라, 그냥 HTML모드 글쓰기에서 적용하고 싶으신 태그 내에 일일이 직접 적용하시는게 가장 안전합니다. (저는 CSS파일 내에 <p>태그에 설정해서 사용하고 있습니다.)

예) <p style="font-family: 'Jeju Gothic';">

사용하고 싶은 다른 폰트들도 위와 같은 방식으로 사용하시면 됩니다.

참고로 제주고딕은 font-weight: 400만 지원합니다.

(font-weight은 폰트의 굵기를 의미합니다. 보통 100 ~ 900 범위 내에서 제공되며, 400과 700을 많이 사용합니다.) 

# 제주시에서 제공하는 제주고딕 다운로드 링크