워드프레스 폰트 추가 하는 법 (Use any font 플러그인)

워드프레스 블로그를 하다 보면 폰트가 거슬릴 때가 많습니다. 그래도 웹페이지 로딩 속도 때문에 가급적 아무것도 설치 안 하려고 노력하는데, 참을 수 없을 때가 다가옵니다. 오늘은 Use any font 플러그인 이용하여 워드프레스 폰트 추가 하는 법 이야기해 보겠습니다.

워드프레스 폰트 추가

워드프레스 폰트는 말 그대로 워드프레스 블로그 작성하실 때 쓰는 글자체를 의미합니다. 워드프레스 테마 자체에 설치되어 있는 기본 폰트를 사용하셔도 되고, 구글 또는 네이버 등 기업에서 무료로 사용할 수 있게 해주는 폰트를 가져다 와 사용할 수도 있습니다.

원하는 워드프레스 폰트 추가로 인해 방문자들의 가독성을 높임으로써 이탈율도 줄일 수 있다는 것이 저의 생각입니다.

1) 워드프레스 폰트 나눔스퀘어 네오체

그동안 워드프레스 거의 9개월 동안 운영하면서, 정말 폰트를 변경하고 싶었지만, 그렇게 하지 않았던 단 하나의 이유가 바로 PSI 성능 때문이었습니다. 그러다가 워플 커뮤니티에 계시는 집돌이 님의 블로그를 우연 찮게 보게 되었습니다.

정말 제가 좋아하는 폰트로 블로그가 꾸며져 있는 것이었습니다. 커뮤니티에서 단 한번의 대화도 나눠본 적이 없었지만, 염치를 불구하고 어떤 폰트를 사용하시는 지, 그리고 어떻게 설치하는 지에 대하여 여쭤보았습니다.

그리고 얼마 지나지 않아, 집돌이 님께서 너무나 친절하게 다 설명해 주셨고, 그 폰트는 바로 나눔스퀘어 네오체 였습니다. 지금부터 제가 어떻게 워드프레스 블로그에 이 폰트를 설치했는지 알려 드리도록 하겠습니다.

2) 나눔스퀘어 네오체 다운로드

검색 엔진에서 나눔스퀘어 네오 검색하시면 네이버 부터 시작해서 눈누까지 여러 글들이 많이 나옵니다. 하지만 저는 콤마군의 은밀한 사생활 이라는 블로그에서 다운로드를 받았습니다.

제가 거기서 다운로드 받았던 이유는 바로 집돌이 님의 조언 때문이었습니다. 폰트가 이쁘기는 하지만 설치 후에는 분명히 PSI 성능 점수에 좋지 않은 영향을 끼칠 것이기 때문에 되도록 적은 용량의 폰트를 선택하라고 하셨습니다. 그리고 확장자 Woff2도 찾아야 했기 때문입니다.

위에서 언급한 블로그에 가면 확장자가 otf, ttf, eot, woff, woff2 등 다양하게 있으며, 용량도 적은 것보다 많은 것으로 이뤄져 있었기 때문입니다. 저는 위와 같이 0.32MB, 확장자 woff2 인 것을 다운로드 받았습니다.

3) 워드프레스 Use any font 플러그인

다운로드 받은 폰트를 워드프레스에 설치하기 위해서는 Use any font 라는 플러그인을 설치해야 합니다.

워드프레스 관리자 화면에 들어오셔서 플러그인 추가를 위해 Use any font를 입력하고 검색합니다. 그러면 숫자 2번 Use Any Font 플로그인을 설치, 활성화 하시면 됩니다.

그 다음으로 우리가 다운로드 받은 폰트를 업로드 하기 위해 3번에 있는 Use Any Font 메뉴를 클릭합니다. 설치를 하시면 메뉴에 보이실 겁니다.

플러그인에 들어가서는 우선 API Key 메뉴로 들어갑니다. 바로 옆에 Upload Font에 가야 하지만, 선행적으로 API Key 검증을 먼저 마셔야 업로드를 할 수 있는 메뉴가 뜹니다.

API Key 메뉴에 들어가면 3개의 버튼이 나옵니다. 그 중 가운데 가장 긴 버튼을 클릭하시면, API Key가 칸에 채워집니다. 그리고 Verify 버튼을 클릭하시면 됩니다.

그러면 위의 사진과 같이 Active 되었다고 나오는 화면을 맞이하실 수 있습니다.

API Key 검증을 마쳤기 때문에 이제는 폰트를 업로드 하실 수 있습니다. Upload Font 메뉴로 들어오셔서 폰트 이름을 작성하시고, 처음에 다운로드 받은 폰트를 선택하고, Upload 하시면 됩니다. 이것으로 본인의 워드프레스에 폰트가 추가 완료되었습니다.

4) 업로드한 폰트 블로그에 적용

워드프레스에는 이제 업로드 된 폰트가 있습니다. 이제는 우리가 그 폰트를 우리 블로그에 적용되도록 설정을 하셔야 합니다. 워드프레스(카덴스 워플 테마)에서 폰트를 설정하는 곳을 알려드리도록 하겠습니다.

• 워드프레스 관리자 화면 – 외모
• 사용자 정의하기
• Colors & Fonts
• Typograghy
• base font (위의 사진)

아마 아무것도 변경하지 않으신 분들은 아마 system Default 폰트로 설정되어 있으실 텐데, 그 system Default를 클릭하시면 워드프레스 테마가 가지고 있는 폰트를 설정하실 수 있습니다.

우리가 원했던 워드프레스 폰트 추가 업로드한 “nanumsquareneo” (나눔스퀘어네오) 가 보이네요.

5) 폰트 굵게 하는 법

이렇게 폰트를 설정하면 블로그 전체에 폰트가 적용됩니다. 변경을 하고 나서 한가지를 깨달은 것이 있습니다. 폰트는 완벽한데, 제 기준에서 글자가 화면에서 잘 보이는 듯한 느낌을 받은 것 입니다.

그래서 블로그에 적용된 이 폰트 전체를 조금은 굵게 만들 필요가 있었습니다. 그 방법에 대하여 알려 드리도록 하겠습니다. 이 부분은 본인 취향 이오니, 괜찮으시면 하실 필요가 없습니다.

워드프레스 관리자 화면에서 [외모]-[사용자 정의하기]-[추가CSS]로 들어가시면 됩니다. 거기에서 빨간색 네모로 둘러싼 2줄만 작성해서 공개하시면 됩니다.

참고로 p는 본문 글 폰트를 의미하고, ul은 문서 목차에 있는 글 폰트를 의미합니다. 이렇게 bold(굵게) 지정하면 본인 블로그 폰트가 모두 굵게 표시되어 나오게 되는 것입니다.

다른 부분들은 제가 추가적으로 입력한 부분으로 개의치 않으셔도 될 듯 합니다. 이렇게 워드프레스 폰트 굵게 하는 법 까지 보여 드림으로써 워드프레스 폰트 추가 과정은 끝이 났습니다.

마무리

많은 분들이 예쁜 폰트를 워드프레스에 적용하고 싶지만, 고민하시는 이유가 바로 PSI 성능 때문입니다. 폰트를 설치하기 위해 플러그인도 설치했습니다. 이런 부분들이 성능을 떨어뜨리는 원인이 되기도 합니다.

저는 워플 올백 테마로 전체가 다 100을 유지하고 있었으나, 워드프레스 폰트 추가 후 성능은 94(모바일)로 하락하였습니다. 저는 그것을 감안하더라도 이 폰트를 유지하지만, 올백을 고집하시는 분들은 폰트 추가를 하지 않으시기를 권해 드립니다.

그리고 폰트 추가 후 다시 올백으로 돌아가기 원하신다면, 폰트를 다시 system default로 변경하시고, Use any Font 플러그인에서 업로드한 폰트를 삭제하시면 되니, 너무 걱정하지 않으셔도 될 듯 합니다.

혹시 워드프레스 로고를 아직 만드시지 않으셨거나, 만들었는데 조금 더 전문가 스러운 로고를 원하시는 분들은 워플 홈페이지에서 제공하는 로고 서비스를 이용해 보시기를 추천 드립니다.