[워드프레스 최적화] 깔끔한 웹폰트 스포카산스(Spoqa Han Sans) 로컬에 적용하기

웹폰트 스포카산스(Spoqa Han Sans) 로컬에 적용하기

작성배경

폰트를 구글이나 CDN으로 불러들이면 로딩속도에 영향을 미쳐서 구글SEO 및 웹사이트 로딩속도가 약간 느려지는 현상이 있습니다. 이런 경우 폰트를 로컬에서 불러들이면 좀더 최적화가 가능하며 SEO에서도 빠른 로딩으로 플러스 점수를 받을 수 있습니다.

 

웹폰트 두 가지 적용 방법

웹폰트를 적용하는 방법으로는 CDN 을 이용하는 것과, Local에 저장해서 사용하는 방법 두가지로 가능합니다.

1. CDN 방식으로 웹폰트 사용하기

스포카 한 산스를 웹폰트로 사용하시려면 두 가지 방법이 있습니다.

1. 스타일 시트에 아래의 코드를 넣거나,

@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);

 

2. 스타일 안에 직접 아래의 코드를 넣어주면 됩니다.

<link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css' rel='stylesheet' type='text/css'>

그 후 style 태그 안에 필요에 따라서 font-family를 설정해주시면 됩니다.
전체에 적용하는 경우에는 아래 처럼 합니다.

*{ font-family: 'Spoqa Han Sans', 'Sans-serif'; }

하지만 이 방식은 간편하게 사용이 가능하지만 CDN을 통해서 로딩되기 때문에 약간 느릴 수 있다는게 단점이라면 단점일 수 있습니다.

2. Local 에 저장해서 사용하기

먼저 아래 폰트를 내려받아 FTP상에서 Root 폴더에 fonts 라는 폴더를 만들어 넣어줍니다.

SpoqaHanSans.zip

4.71MB

fonts 폴더에 저장된 폰트 모습

 

 

그 다음에 css 파일에 아래와 같이 작성해 주면 됩니다.
저는 편하게 절대경로로 / 로 많이 사용합니다.

@font-face {
    font-family: 'Spoqa Han Sans';
    font-weight: 700;
    src: local('Spoqa Han Sans Bold'),
    url('../fonts/SpoqaHanSans/SpoqaHanSansBold.woff2') format('woff2'),
    url('../fonts/SpoqaHanSans/SpoqaHanSansBold.woff') format('woff'),
    url('../fonts/SpoqaHanSans/SpoqaHanSansBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans';
    font-weight: 400;
    src: local('Spoqa Han Sans Regular'),
    url('../fonts/SpoqaHanSans/SpoqaHanSansRegular.woff2') format('woff2'),
    url('../fonts/spoqa-han-sans/SpoqaHanSans/SpoqaHanSansRegular.woff') format('woff'),
    url('../fonts/spoqa-han-sans/SpoqaHanSans/SpoqaHanSansRegular.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans';
    font-weight: 300;
    src: local('Spoqa Han Sans Light'),
    url('../fonts/SpoqaHanSans/SpoqaHanSansLight.woff2') format('woff2'),
    url('../fonts/SpoqaHanSans/SpoqaHanSansLight.woff') format('woff'),
    url('../fonts/SpoqaHanSans/SpoqaHanSansLight.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans';
    font-weight: 100;
    src: local('Spoqa Han Sans Thin'),
    url('../fonts/SpoqaHanSans/SpoqaHanSansThin.woff2') format('woff2'),
    url('../fonts/SpoqaHanSans/SpoqaHanSansThin.woff') format('woff'),
    url('../fonts/SpoqaHanSans/SpoqaHanSansThin.ttf') format('truetype');
}

css에 작성한 코드 모습

 

— font-family : src   url 에 넣은 폰트 파일을 사용시 입력할 이름

— font-weight : src  url 에 넣은 폰트 파일 사용시 입력할 굵기

— font-style : src  url 에 넣은 폰트 파일을 사용시 입력할 스타일

— src : url 은 인자로 폰트 파일을 받음 & format은 폰트 포맷.

폰트 포맷이 왜 여러개 일까?

아래의 예시와 주석을 참고하시면 각 브라우저 별로 호환성을 위해 이렇게 포맷이 여러개 존재함을 알 수 있습니다.
호환성의 문제로 글을 보는 사람이 어떤 브라우저를 사용하는지 모르기 때문에 다양하게 대응하기 위한 방법이라고 생각하시면 쉽습니다.

웹폰트 로컬 적용으로 사이트 최적화하기.

 

적용한 후 사이트가 좀더 빨리 뜹니다.
또한 역시 폰트에 따라 확실히 가독성이 달라집니다.
Spoqa Han Sans 의 경우 홈페이지에 아래와 같이 주의 사항이 기재되어 있기 때문에 로컬로딩이 훨씬 최적화에 도움이 됩니다.

웹폰트로 사용할 때 CDN방법을 사용하시면 무료로
서브되는 버전이기에 불러오는 속도가 느릴 수 있습니다.

폰트로딩속도가 SEO에 미치는 영향이 생각보다 커서  local에 저장해서 사용해보니 로딩되는 렌더 속도가 확연하게 빨라짐을 알 수 있습니다. 대부분의 제작사에서는 CDN 보다 로컬폰트로 제작합니다.

 

깔끔한 폰트를 원하신다면 적용해보시는 것을 추천합니다.

https://spoqa.github.io/spoqa-han-sans/ko-KR/

Spoqa Han Sans Neo