워드프레스에 나눔스퀘어라운드 폰트 적용 방법

워드프레스에 특정 한글 폰트를 업로드하여 적용해야 하는 상황이 있습니다. 이 글에서는 Use Any Font 플러그인을 사용하여 워드프레스에 나눔스퀘어라운드 폰트 적용하는 방법에 대해 살펴보겠습니다. 이 방법을 사용하여 다른 글꼴도 업로드하여 적용이 가능합니다.

수동으로 글꼴을 적용하는 데 어려움이 있는 경우 이 방법을 이용하면 편리합니다. 이 방법으로 글꼴을 적용하면 아이폰의 사파리 브라우저에서도 잘 표시됩니다.

나눔스퀘어라운드 폰트 다운로드

네이버에서는 2008년부터 매년 새로운 글꼴을 만들어 무료로 배포하고 있습니다. '나눔스퀘어'는 2016년 만들어진 폰트로 제목에 어울리는 서체입니다.

먼저 나눔스웨어라운드 폰트를 PC로 다로운로드하도록 합니다. 나눔스웨어라운드 폰트는 나눔글꼴 공식 사이트에서 다운로드가 가능합니다.

나눔스웨어라운드 외에 나눔스퀘어, 나눔바른펜, 나눔바른고딕, 나눔글꼴에코, 나눔손글씨, 나눔고딕, 나눔명조 등의 글꼴을 다운로드할 수 있습니다. 원하는 폰트를 다운로드하도록 합니다. 여기에서는 나눔스퀘어라운드 폰트를 예시로 설명합니다.

워드프레스에 나눔스퀘어라운드 폰트 적용 -글꼴 다운로드

윈도우용 TTF 또는OFF 포맷으로 다운로드하면 무난할 것 같습니다. Use Any Font에서는 ttf, otf, woff 포맷을 지원합니다. 파일을 다운로드한 후에 반디집 등의 압축 해제 플러그인을 사용하여 압축을 풉니다. 압축을 해제하면 NanumSquareRoundB, NanumSquareRoundEB, NanumSquareRoundL, NanumSquareRoundR 등 총 4개의 폰트 파일이 있습니다.

Use Any Font 플러그인을 사용하여 워드프레스에 나눔스퀘어라운드 폰트 적용하기

Use Any Font 워드프레스 플러그인

Use Any Font 플러그인을 사용하면 맞춤형 폰트를 워드프레스 사이트에 적용할 수 있으며 CSS 지식이 필요하지 않습니다. 이 플러그인은 현재 20만 개 이상 사이트에 설치되어 사용되고 있습니다.

워드프레스 관리자 페이지에서 플러그인 > 새로 추가로 이동하여 'use any font'로 검색한 다음 Use Any Font 플러그인을 설치하고 활성화합니다.

이 플러그인을 활성화하면 관리자 페이지의 왼쪽 알림판 메뉴에 Use Any Font 항목이 추가됩니다. Use Any Font 설정 페이지로 이동합니다.

워드프레스에 한글 폰트 적용하기

위와 같은 화면이 표시되면 Generate Free Test API Key를 클릭하여 무료 테스트 API 키를 생성하거나 Use Any Font need API key to upload the font. You can get the premium key from here.의 링크를 클릭하여 프리미엄 버전을 구입할 수 있습니다.

무료 Test API Key로는 하나의 폰트만 변환이 가능합니다. 여러 개의 폰트를 사용하려는 경우 프리미엄 키가 필요합니다. 비용은 비교적 저렴한 편입니다. 오래 전에 발급받은 키를 입력하면 다음과 같은 메시지가 표시됩니다.

You are using old API Key. Please get your replacement key from here. You don't need to pay again. Use your old key as Discount Coupon and it will apply 100% discount. We are sorry for the inconvenience caused.

이 메시지가 표시되면 링크를 클릭하여 프리미엄 버전을 장바구니에 담고 Discount Coupon 필드에 기존 API 키를 입력하면 무료로 새로운 프리미엄 키를 발급받을 수 있습니다.

API 키를 입력했다면 Upload Fonts (폰트 업로드) 섹션에서 Add Fonts (폰트 추가) 버튼을 클릭합니다.

워드프레스에 글꼴 업로드하기

그러면 폰트 파일을 업로드할 수 있는 필드가 표시됩니다. Font Name에 글꼴 이름을 입력하고 Font File에서 파일을 선택한 다음 Upload 버튼을 클릭하여 업로드합니다. 허용되는 글꼴 형식은 ttf, otf, woff이며 최대 25MB까지 업로드가 가능합니다.

폰트 업로드가 완료되었으면 Assign Font에서 글꼴을 지정할 수 있습니다.

워드프레스에 글꼴 지정하기

Select Font (글꼴 선택)에서 적용할 글꼴을 선택합니다. Select elements to assign (지정할 요소 선택)에서 글꼴을 지정할 요소를 선택합니다. Custom Elements (사용자 정의 요소) 필드에 직접 요소를 입력하는 것도 가능합니다. 각 라인에 CSS 엘리먼트를 입력합니다. (예시: #content .wrap)

하단의 Assign Font 버튼을 클릭하면 적용됩니다. 원하는 모든 요소에 대하여 글꼴을 지정하도록 합니다. 페이지를 리로드하면 지정한 폰트가 적용되어 표시될 것입니다.

워드프레스에 나눔스퀘어라운드 글꼴 적용 예시
나눔스퀘어라운드 폰트 적용 예시.

경우에 따라 폰트 로딩 속도가 느려 페이지 콘텐츠가 로드된 후에 텍스트가 로드되는 현상이 발생할 수 있습니다. 글꼴 로딩 때문에 페이지 로딩 속도가 느려지는 현상이 발생하는 경우 Additional Settings (Usually not required) 부분에서 Use PHP uploader. Need PHP Curl. 항목을 체크하면 폰트가 빠르게 로드될 수 있습니다.

워드프레스에 나눔스퀘어라운드 폰트 적용 방법 2

이 옵션은 일반적으로 필요하지 않지만 글꼴 때문에 텍스트가 느리게 로드될 때 시도해볼 수 있습니다. 이 기능을 이용하려면 웹호스팅 서버에 PHP Curl이 설치되어 있어야 합니다.

마치며

이상으로 플러그인을 사용하여 워드프레스에 나눔스퀘어라운드 글꼴을 적용하는 방법을 살펴보았습니다. 이 방법으로 원하는 다른 폰트도 적용이 가능합니다.

이 플러그인을 사용해도 잘 적용되지 않는 경우 CSS로 강제로 폰트를 지정해보시기 바랍니다. 글꼴 적용에 어려움을 겪는 경우 여기에서 서비스(유료)를 의뢰하실 수 있습니다.

플러그인을 사용하지 않고 직접 글꼴을 적용하고 싶은 경우 아래 동영상을 참고해보시기 바랍니다.

참고


8개 댓글

  1. 안녕하세요
    말씀하신대로 Use Any Font 플러그인을 이용하여 웹사이트에 한글 폰트를 적용했는데...윈도우와 안드로이드에서는 어떤 CSS style, plugin, theme option 등을 활용해도 적용이 절대 안됩니다..이런 경우 어떻게 해결 가능할까요? ㅠㅠ

    1. 안녕하세요, Mel Lee님.

      Use Any Font를 사용하여 폰트를 로드하면 IE를 비롯하여 크롬, 사파리까지 문제 없이 폰트가 로드될 것입니다.

      글꼴 로드에 문제가 있는 경우 플러그인 개발자에게 문의해보시겠어요?

  2. 안녕하세요 이제 막 워드프레스를 알게 된 사람입니다.
    시작하기 전에 궁금한 사항이 있어 문의 드리려 합니다.
    PDF 파일 콘텐츠를 저뿐만 아니라 웹사이트 이용자들도 등록할 수 있게하여
    서로 PDF 파일을 사고 팔 수 있는 웹사이트를 구축하려고 하는데 워드 프레스로 그러한 기능들을 구현할 수 있을까요?

    1. 안녕하세요. 동일한 질문이 여러 군데 올리셨네요.

      전자 파일 판매와 관련하여 다음 두 글을 참고해보시기 바랍니다.

      https://www.thewordcracker.com/intermediate/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EB%94%94%EC%A7%80%ED%84%B8%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-%EA%B0%80%EB%8A%A5%ED%95%9C-%EC%83%81%ED%92%88-%ED%8C%90%EB%A7%A4%ED%95%98%EA%B8%B0/

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EC%9A%B0%EC%BB%A4%EB%A8%B8%EC%8A%A4%EB%A1%9C-%EB%A9%80%ED%8B%B0%EB%B2%A4%EB%8D%94-%EC%87%BC%ED%95%91%EB%AA%B0-%EA%B5%AC%EC%B6%95/

      하지만 원하는 대로 만들기 위해서는 코딩 지식이 필요할 것입니다.

      이런 류의 사이트는 초보자가 마음에 들게 구축하기가 쉽지 않을 수도 있습니다.

      원하는 사이트를 만들 수 있는 상용화된 솔루션이 있다면 그런 솔루션을 이용하는 것도 고려해보시기 바랍니다.

      1. 아 댓글 남긴 게 안보여서 안되는 줄 알고 여러번 올렸네요 ㅎㅎ,,

        워드 프레스로 제작한 사이트를 Visual code 등의 프로그램으로 코딩을 통해 수정할 수도 있는거죠?

        자세하게 답변해주셔서 정말 감사합니다.
        오늘도 좋은 하루 보내세요!

  3. 예전에 나눔스퀘어를 써봤는데
    14~16픽셀 정도는 웹폰트가 적용되지않았던것같어요 ㅠ
    이건방법이없겠죠?

    1. 구체적으로 어떤 문제인가요?

      이 글에서 소개하는 방법으로 나눔스퀘어 폰트를 적용하여 테스트해보시겠어요?

      무료 버전에서는 1개의 폰트를 업로드하여 적용할 수 있습니다.

    2. 이 문제를 알아보니 나눔스퀘어가 '타이틀' 같은 곳에 사용하도록 나온 폰트이기 때문에 17px 이하 사이즈에서는 깨져보인다고 하네요.

      나눔스퀘어라운드는 그런 현상이 없는 것 같습니다.

댓글 남기기

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