워드프레스에서 사용자 정의 폰트 사용하기 (원하는 한글 폰트 업로드)

얼마 전에 한 클라이언트가 워드프레스 사이트에 고객이 원하는 폰트를 설치하여 적용했는데 크롬에서는 잘 표시되지만 IE에서는 제대로 나오지 않는다면서 문제 해결을 요청해오셨습니다.

특수한 폰트를 설치하여 로드하면 사이트 속도도 아무래도 영향을 받을 수도 있으니 굳이 그럴 필요가 있을까 하고 생각했지만 고객이 특정한 폰트를 지정하여 '제목에 그 폰트를 사용해주세요'했기 때문에 무조건 그 폰트만 사용이 가능하다고 하네요.

인터넷에서 다운로드받은 웹폰트를 가지고 인터넷에 나와 있는 솔루션을 검색하여 적용해보아도 문제가 제대로 해결되지 않았습니다. 왜 크롬은 되는 데 IE는 안 될까요? 아마 인터넷 익스플로러가 woff2 포맷을 지원하지 않아 발생하는 문제인 것 같습니다.

IE가 woff2 포맷이 지원하지 않아서 발생하는 문제이므로, IE가 지원하는 woff 형식의 글꼴을 사용하면 해결됩니다.(woff는 IE9부터 지원합니다.) IE는 2022년 6월 15일에 공식적으로 서비스가 종료되었고 개발자 커뮤니티에서도 인터넷 익스플로러를 대응하지 않는 추세입니다.

[ 이 글은 2022년 8월 24일에 최종 업데이트되었습니다. ]

워드프레스 테마/페이지 빌더에서 제공하는 사용자 정의 폰트 옵션

일부 유료 테마나 페이지 빌더에서는 유료 또는 무료 한글 폰트를 업로드하여 적용할 수 있는 옵션을 제공합니다.

예를 들어, 베스트셀링 테마인 Avada에서는 Custom Fonts 섹션에 사용자 정의 폰트를 업로드할 수 있습니다("아바다 테마 커스텀 폰트 적용하는 방법" 참고).

엘리멘터 프로(Elementor Pro)에서도 커스텀 폰트를 등록하여 사용할 수 있는 기능을 제공합니다.

워드프레스 테마/페이지 빌더에서 제공하는 사용자 정의 폰트 옵션

테마나 페이지 빌더에 커스텀 폰트를 업로드할 수 있는 기능이 제공되는 경우 별도의 플러그인을 설치할 필요 없이 테마나 페이지 빌더에서 제공하는 기능을 활용할 수 있습니다.

사용자 정의 폰트 플러그인 Use Any Font

그러다가 Use Any Font라는 플러그인을 사용하여 폰트를 로드하고 설정해주니 문제가 해결되었습니다.

워드프레스에서 사용자 정의 폰트 사용하기

원하는 폰트를 임베드하여 사용할 수 있고 별다른 CSS가 필요하지 않습니다. 폰트가 ttf, otf, woff 형식 중 하나로 되어 있으면 플러그인에서 설치하여 사용이 가능합니다.

플러그인 사이트에서 설명하고 있는 특징을 대충 정리해보면:

  • 빠르고 쉬운 설정. CSS 지식 불필요
  • 모든 주요 브라우저 지원: IE 6 이상, 파이어폭스, 크롬, 사파리, iOS, 안드로이드, 오페라 등
  • 플러그인 인터페이스 폰트 업로더 내에서 폰트 변환
  • 업로드된 폰트를 Editor에서 곧바로 사용
  • ttf, otf, woff 등의 글꼴 형식 지원. 필요한 폰트가 자동으로 변환됨
  • 최대 15MB 폰트 파일 사용 가능
  • @font-face CSS를 사용하여 폰트 임베드. SEO 친화적, 빠른 로딩
  • 여러 개의 폰트 사용 가능
  • 사용자 서버에 폰트가 저장되므로 로드 시간이 더 빠름

API 키를 발급 받아야 플러그인 업체의 서버에 접속하여 폰트 변환이 가능합니다. 폰트가 브라우저에 따라 제대로 적용되지 않는 경우 이 플러그인을 사용하면 의외로 문제가 해결될 수 있습니다.

무료 버전을 사용하면 하나의 글꼴을 변환할 수 있습니다. 2개 이상의 글꼴을 적용하려면 유료 버전을 이용해야 합니다. 이 플러그인을 사용하여 워드프레스에 사용자 폰트를 업로드하여 적용하는 방법을 다음 글에서 참고해보시기 바랍니다.

참고로 보다 정교한 기능으로 폰트를 관리하고 싶은 경우 FontPress라는 워드프레스 폰트 관리자 플러그인을 사용해볼 수 있습니다.

참고:

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

14개 댓글

  1. 안녕하세요.
    위에 말씀 주신 fontpress 를 사용하면
    속도 저하 없이 나눔고딕 폰트를 업로드 하여 사용이 가능할까요?

    1. 폰트를 설치하면 속도에 영향을 미칠 것 같습니다.

      폰트를 woff2 포맷으로 변환하여 업로드하고 enquque 방식으로 폰트를 로드하면 속도 영향을 최소화할 수 있을 것 같습니다.

      예를 들면, 차일드 테마를 설치하고 폰트를 업로드한 후에 차일드 테마 내의 함수 파일에 다음과 같은 코드를 추가합니다.

      function custom_fonts() {
      wp_enqueue_style('custom-font', get_stylesheet_directory_uri() . '/fonts/your-font-name.woff2', array(), null);
      }
      add_action('wp_enqueue_scripts', 'custom_fonts');

      스타일 시트 파일(style.css)에 다음과 같은 코드를 추가해 보세요:

      @font-face {
      font-family: 'YourFontName';
      src: url('fonts/your-font-name.woff2') format('woff2'),
      url('fonts/your-font-name.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      }
      /* Applying the font to elements */
      body, h1, h2, h3, p {
      font-family: 'YourFontName', sans-serif;
      }

      잘 되는지 테스트해 보세요.

      상기 코드는 예시일 뿐이니, 적절히 응용하세요.

      1. 답변 주시어 감사합니다!!
        혹시 이 사이트도 위의 방식으로 폰트를 변경 하신 것일까요??

      2. 이 블로그에는 커스텀 폰트가 사용되지 않았고 테마 설정값을 그대로 사용하고 있습니다. 플러그인을 사용하여 구글 글꼴은 비활성화했습니다.

      3. 질문이 잦아 죄송합니다..
        저의 경우 generatepress 의 기본 시스템 폰트들을 사용하면, 한글이 너무 이상하게 보이는데, 지금 이 사이트의 경우, 한글이 웹에서 보기 좋게 나오고 있어서, generatepress에서 이 사이트처럼 설정할 수 있는 방법이 있을까요?

      4. 안녕하세요, WooKang님. 질문은 언제든지 환영입니다.😊😊😊

        이 부분에 대해서는 제가 살펴보고 별도의 글로 정리하여 올릴 수 있으면 올려 보겠습니다. 추석 연휴 때문에 조금 지연될 수도 있습니다.

  2. 안녕하세요. Astra테마와 엘레멘토 프리 버전을 cafe24 호스팅 센터에서 이용중인데요, cafe24에 FTP로 웹폰트 파일 .woff을 업로드하고 아스트라 숏코드, 커스텀 css에서 불러오려니 여러 코드를 시도해 봐도 불러오기가 안됩니다. 더구나 hide my WP를 활성화하니 그나마 연결되던 FTP도 연결이 안되네요. 호스팅을 옮겨야만 할까요? 옮긴다면 현재 작업중인 파일은 FTP로 크롤링해서 FTP로 업로드하면 될까요? 머리가 아픕니다 .. 도와주세요

      1. cafe24 호스팅은 my wp gost lite 플러그인 초기화 후 삭제, 엘레멘토 업데이트, 엘레멘토 도구-설정 초기화-브라우저 강력한 새로고침-쿠키, 데이터 삭제-강력한 새로고침 후 재시작해서인지 단순히 시간이 지나서인지 제가 초기에 뭘 잘못했었는지 몰라도 잘 되었구요, 엘레멘토 편집기도 안되었는데 제한 메모리 512MB로 변경(wp_config.php 수정)하여 해결했습니다. 해당 플러그인은 1개 이상에 대해 유료라서 다양한 스타일을 위해 알려고 했던 것인데 혹시 css, php를 통해 해결할 방법이 있나요?

  3. 안녕하세요. 항상 상세한 콘텐츠 잘 보고 있고 감사드립니다.
    다름 아니라, use any font 관련입니다.
    제가 유료로 구매하고 메뉴 등에 폰트를 적용해보려고 하니, 적용이 안되서 문의 메일을 보냈고, 답장이 왔는데요. 아래서 custom element box에 코드를 넣으라는 것 같은데, custom element box가 무엇일까요? (어디에 코드를 넣어야 할지 몰라서 해결 못하고 있습니다)
    --------------------
    Please keep this in custom element box and assign font to it from Font assign tab.
    ul.sf-menu li a
    This should fix the issue.

    1. 안녕하세요, Andrew님. https://www.thewordcracker.com/basic/%ec%9b%8c%eb%93%9c%ed%94%84%eb%a0%88%ec%8a%a4%ec%97%90-%eb%82%98%eb%88%94%ec%8a%a4%ed%80%98%ec%96%b4%eb%9d%bc%ec%9a%b4%eb%93%9c-%ed%8f%b0%ed%8a%b8-%ec%a0%81%ec%9a%a9/ 글을 참고해보시겠어요? Assign Font 섹션에 보면 아래에 Custom Elements 박스가 있을 것입니다. 그곳에 넣으시면 될 것입니다.

      경우에 따라 서체 로딩 속도가 느려 페이지 콘텐츠가 로드된 후에 텍스트가 로드되는 현상이 발생할 수 있습니다. 글꼴 로딩 때문에 페이지 로딩 속도가 느려지는 문제가 발생하는 경우 Additional Settings (Usually not required) 섹션에서 Use PHP uploader. Need PHP Curl (PHP 업로드 사용. PHP Curl이 필요) 항목을 체크하면 폰트가 빠르게 로드될 수 있습니다. 이 기능을 활성화하려면 PHP Curl이 웹서버에 설치되어 있어야 합니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.