워드프레스에 구글 웹폰트 로더와 @font-face로 한글 적용

드프레스에 한글을 적용하는 방법으로 지난번에 cufon을 소개드렸습니다. 이번에는 Goolge WebFont Loader를 이용해 font-face를 적용하는 방법에 대해 소개하겠습니다.


@font-face(폰트페이스)

@font-face는 여러분의 서버에 저장된 특정 폰트를 불러와 웹사이트의 폰트를 꾸며주는 css 룰입니다. font-face를 사용하는 이유도 Cufon과 비슷합니다. 여러분의 웹사이트에서 사용하는 폰트가 방문자들의 컴퓨터에 없을 수도 있기 때문이죠. font-face는 Cufon에 비해 사용법이 간단합니다. 원하는 폰트를 저장하고 그 폰트를 css로 정의한 후에 원하는 영역에 font-family를 추가하면 됩니다.

특별히 구글 웹폰트 로더를 사용하지 않고도 여러분의 웹사이트에 폰트페이스 적용은 가능합니다. 구글 웹폰트 로더 사용법이 익숙하지 않으신 분들은 아래 기본 사용법으로 이용하셔도 됩니다.

기본 사용법:

1. 폰트 파일(예: Daum_Regular.ttf)을 서버에 저장한 후에 테마의 style.css 파일에 다음과 같이 적용

2. 적용된 font-family를 원하는 영역에 지정

Google WebFont Loader(구글 웹폰트 로더)

구글 웹폰트 로더는 자바스크립트 라이브러리로 Google WebFonts에서 제공하는 것 이외의 폰트 로딩을 제공할 수 있도록 도와줍니다. 폰트페이스를 위에서 말한 기본방법으로 사용해도 되지만 구글 웹폰트 로더를 사용하면 폰트 로딩시 몇가지 옵션을 사용할 수 있습니다.(Goolge WebFont Loader참고) 또한 css파일을 구글 웹폰트 로더로 불러오면 원본 폰트(예: Daum_Regular.ttf)가 없는 다른 사이트에도 동일한 폰트를 사용할 수 있도록 할 수 있습니다.

구글 웹폰트 로더로 폰트페이스 적용 화면

아래는 Daum_Regular 폰트를 적용하기 전과 적용한 후의 화면입니다.

적용 전
hwangc-wordpress-font-face
적용 후
hwangc-wordpress-font-face

폰트 적용 방법

1. 구글 웹폰트 로더 페이지에서 아래의 소스를 참고합니다.

2. 1번의 소스는 구글 웹폰트를 적용하는 소스이며 커스텀 폰트를 로딩하기 위해 구글 웹폰트 로더 페이지에서 아래 소스 참고합니다.

3. 위의 1,2번 소스를 합쳐보세요.
아래의 소스에서 1번의 google: 영역이 2번의 custom:으로 대체되었습니다.

4. 원하는 폰트 파일을 여러분 서버에 저장하세요.
예제로 Daum_Regular.ttf파일을 다음 사이트에서 다운받아 FTP로 ../fonts/Daum_Regular.ttf 의 디렉토리에 저장하였습니다. 저장된 파일의 위치를 메모해놓으세요.

5. custom URL에서 호출할 css파일을 만들어서 여러분 서버에 저장하세요.
아래와 같이 Daum_Regular폰트를 font-face 룰에 적용하여 Daum_Regular.css파일을 FTP로 서버에 저장했습니다. * http://fontface.kr/ 참고

6. 3번 소스에서 custom 영역의 families와 urls를 수정하세요.
families에 Daum_Regular를 ulrs에는 4번에서 저장한 css파일의 url주소를 넣었습니다.

7. 6번 소스를 복사하여 header.php의 head영역에 붙여넣기 하세요.

8. 테마의 style.css에 위에서 적용한 font family를 적용하세요.
저는 body에 Daum_Regular 폰트를 적용하기 위해 아래의 소스를 style.css파일에 붙여넣기 하였습니다. *.wf-active가 같이 표시되어야 합니다.

마치며

구글 웹폰트 로더에서는 다음과 같은 – Typekit, Ascender, Fonts.com web fonts, Fontdeck – 폰트 업체의 폰트도 로딩할 수 있는 코드를 제공하고 있으니 사용하는 업체가 있으면 구글 웹폰트 로더 페이지에서 코드를 참고하세요.

그럼 여러분도 구글 웹폰트 업로더와 font-face를 사용해서 한글 폰트를 적용해보세요. 🙂

글쓴이

HwangC

안녕하세요! 여러분의 편안한 워드프레스 안내자 황씨입니다.

“워드프레스에 구글 웹폰트 로더와 @font-face로 한글 적용”에 대한 12개의 생각

  1. 안녕하세요

    css 링크로 하는것과 속도차이는 어떻한가요?
    나눔고딕을 사용하고 싶은데요… 나눔고딕은
    구글 웹폰트에서 소스코드를 받을수가 없지 않나요?,,,

    답변 부탁드립니다.

        1. 답변 감사합니다

          현재

          구글의 Early Access 코드로 적용이 되어있는데요, 구글 템플렛에 웹폰트 코드를 넣어버리면 사이트 속도가 저하되지 않을까요?… 그냥 사용해야하나요?….

          조금이라도 용량이 적게 된 나눔고딕이나 나눔명조 링크 나 코드파일이 있으시면 알려주셨으면합니다.

        2. 구글 서버보다 좋은 서버가 있다면 그 곳에 폰트 파일을 넣어 사용하시면 됩니다. 개인적으로는 전세계 웹의 리더인 구글 서버를 신뢰합니다.

  2. 감사합니다. IE에서는 적용이 잘됩니다. 그런데 크롬에서는 적용이 되지않네요..검색해도 문제제기는 많은데 확실한 답변을 찾기가 힘드네요 혹시 방법을 알고계신가요?

  3. 현재 급한데로 wordpress.com에서 도메인과 폰트,css를 변경할수 있다고 해서 년 99달러 프리미엄회원에 가입했습니다.

    그런데 문제가 생겼습니다.

    메뉴 폰트 (영문)크기가 너무 작고 바디폰트가 너무 커서 사용자정의 폰트 크기로 조절을 했는데… 크롬에서는 폰트 크기가 잘 수정되는데 ie와 ff에서는 전혀 수정되지 않습니다.
    아주 미칠지경입니다.ㅠㅠㅠ 그래서 책도 사고 봤는데 이런 내용은 없네요.

    밑에 분도 이거와 비슷한 내용을 질문했는데 답변이 없어서 직접 올립니다. 꼭좀 도와주세요…제발요..ㅠㅠ
    현재 사이트는 http://stmaryspilgrimage.wordpress.com 입니다.

    1. 위에서 언급한 내용이네요. 아래를 참고하세요.

      “폰트페이스를 위에서 말한 기본방법으로 사용해도 되지만 구글 웹폰트 로더를 사용하면 폰트 로딩시 몇가지 옵션을 사용할 수 있습니다.(Goolge WebFont Loader참고) 또한 css파일을 구글 웹폰트 로더로 불러오면 원본 폰트(예: Daum_Regular.ttf)가 없는 다른 사이트에도 동일한 폰트를 사용할 수 있도록 할 수 있습니다.”

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.