워드프레스 폰트 설치 및 속도 느림 해결방법(2023년 최신)

[ 본 글은 GeneratePress 테마를 기준으로 작성하였습니다. ]

워드프레스 폰트 설치 및 속도 개요

근래 많은 분들이 워드프레스로 넘어왔는데, 대부분 블로그나, 티스토리를 하면서 넘어왔을 것으로 추정된다. 네이버 블로그나 티스토리를 이용하던 분들은 글꼴을 쉽게 바꿀 수 있는 기능이있었는데 워프는 그렇지 않다. 나의 테마나, CSS, Html 등에서 별도 설정을 해주어야 바꿀 수 있다.

▶ 네이버나 다음은 쉬운데, 워프는 쉽지 않다.

그렇게 워드프레스 글씨체는 별도 설정을 해주지 않으면 내가 설치한 테마의 기본 글꼴로 표시된다. 작성 시도 그렇고 발행하여도 따로 설정하지 않아도 기본 글꼴로 표시 되기 마련이다.

다시 말하지만 워프는 네이버 블로그나 티스토리가 아니다. 나의 집에 모든 것을 새로 꾸며야 하며 모든 시스템을 신경써야 한다. 심지어 서버 문제도, 이에 오늘은 워드프레스 글꼴 설치하는 방법과 이에 대한 영향 그리고 추천하는 설치방법을 설명해드리겠다.

설치하는 이유

먼저, 워드프레스 글꼴을 설치하는 이유는 말그대로 나의 만족과 심미성 그리고 독자들에게 보기 좋게 읽히기 위해서이다. 기본 글꼴이 상대적으로 나쁘고 좋고에 대한 의미 보다는 인터넷을 많이하는 현대인들에게 다소 가독성이 조금 떨어진다라는 통계가 있다.

▶ 워프는 독자가 읽기 쉽게 하여야 한다.

우리와 같은 유저들도 아래의 방법대로 쉽게 설치하여, 보기 좋은 블로그를 만들어 보도록 하겠다. 참고로<주의> 원하는 글꼴을 하나 이상 설치할 경우, 속도저하라는 워드프레스 품질과 관련된 문제가 발생한다. 본인은 이를 해결하기 위해 몇 시간 동안 연구하였다. 이에 대한 방법까지 설명할테니 천천히 따라오시기 바란다.

지난 번 가독성을 높이는 방법관련 포스팅은 이 곳을 클릭하여 참고하시기 바란다.

글꼴 사이트(구글 폰트 추천)

대표적인 폰트 사이트는 구글 폰트(클릭) 이다. 이외에도 눈누 폰트나 네이버에서 개별적으로 폰트를 확인하여 다운 받을 수 있는데, 이번 포스팅에서는 구글 폰트를 활용하여 변경하도록 하겠다.

참고로 많은 분들이 사용하고 있는 글꼴로는 대표적으로 Noto Sans Kr(본인이 사용하고 있음), Gothic A1, Nanum Gothic, Noto Serif Korea 등이 있다. 아래의 글꼴이외에도 좋은 것들이 많으니 사이트를 참고 하시기 바란다.

워드프레스 글꼴 설치 방법

설치 방법_1(Typography)

먼저, 가장 간단하게 설치하여 활용할 수 있는 방법이다. 먼저 관리자 로그인 후에, 외모(GeneratePress 무료버젼)에서 사용자 정의를 클릭한다. 그럼 아래의 사진과 같이 화면이 뜰 것인데, 여기서 ①Typography를 클릭 한뒤, ② Add Font를 누른다. 그 뒤, ③Search Fonts에서 ④원하는 폰트를 찾아서 클릭 한다음에, ⑤Use Google Fonts API를 클릭한다.

그리고 ⑥ 다시 타이포그래피 매니저로 돌아와 ⑦Add Typography를 누른 뒤, ⑧Target Element를 눌러서 ⑨원하는 설정(제목, 본문 등 어디에 폰트를 사용할지, 크기는 어떻게 할지 등을)을 하여주면 된다. 마지막으로 발행까지 클릭하여야 실제 반영 될 수 있다.

이게 아마가 가장 간단한 방법이라고 볼 수 있을 것이다.

설치 방법_2(추가CSS)

두번째 워드프레스 글꼴 설치 방법은 추가CSS를 통해 바로 변경해주는 것이다.

아래의 사진과 같이 먼저 제너레이트 프레스 외모인 사용자 정의를 클릭 한뒤, 추가 CSS를 클릭한다. 아래로 나오는 칸에 사진 하단의 코드를 입력하여 주면 바로 변경이 될 것이다.

▶ 외모 > 사용자 정의 > 추가 CSS

 @import url('https://fonts.googleapis.com/css?family=Inconsolata|Nanum+Gothic|Roboto');

body,
button,
input,
select,
textarea {
    font-family: Roboto, Nanum Gothic, sans-serif;
    font-size: 15px;
    font-size: 1.05rem;
    line-height: 2.3
}

 blockquote {
    font-size: inherit;
}


code,
kbd,
tt,
var,
samp,
pre {
    font-family: Inconsolata, monospace;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

설치 방법 3)

마지막 방법은 필자가 추천하는 방법이다. 본 글의 요라고도 할 수 있는 부분인데, 구글 폰트사이트의 링크와 임포트를 땡겨오는 방법이다.

그게 도대체 무엇이냐? 라고 할 수 있는데 정말 간단하다. 먼저, 복잡하게 생각하지 말고 먼저Header Footer Code Manager 플러그인을 설치한다.

설치가 됐으면 구글폰트 사이트로 들어가 원하는 글꼴을 클릭 한뒤 아래의 사진과 같이 어떤 굵기를 할지 선택(+를 클릭하면 추가가 된다.)하여 준다. 그뒤 우측 상단의 네모칸을 선택하여 준다.

▶ 구글폰트사이트 → 원하는 폰트 “+” 클릭하여 추가

위의 내용을 잘 따라왔다면 아래의 사진이 본인 화면에 나올 것이다. 우리는 여기서 Link를 이용할 것인데, <link ~ stylesheet”>의 주소는 위에 언급한 Head and Footer Code Manager로 넣어 줄 것이므로 일단 해당 주소를 복사해 준다.

그리고 헤드앤 푸터 플러그인으로 들어와 ADD New Snippet을 클릭하여준 다음, 아래의 사진과 같이, 설정 해주고 스니펫 코드에는 링크 주소를 넣어준다.

▶ Head And Footer → Add New Snippet → 설정 후 코드에 붙여넣기

마지막으로 제너레이트 사용자 정의 CSS추가에는 위의 추가CSS에 붙여넣기라고 넣은 코드를 추가CSS 코드를 넣어주면 끝이난다.

여기까지 잘 따라왔다면 바로 변경이 됐을 것이라 보는 바다.

이 절차는 사실 여러가지가 있지만 가장 간단한 방법을 말씀 드렸다. 혹시나 설명이 어렵게 느껴지신 분들은 댓글로 남겨주시면 천천히 다시 말씀 드리겠다.

본인 같은 경우 이 방법을 사용하는 이유는 속도저하를 최소화 해주기 때문이다. 워드프레스 폰트를 쓰는 것 자체가 웹속도 부하에 영향을 주는 행동이긴 한데, 글꼴은 정말 포기 못해서 사용하려고 한다.

▶ 과도한 폰트 사용은 워드프레스 품질 저하로 이어질 수 있다.

참고로 이 폰트를 사용 하기 전에는 모바일 성능 100이 나오나, 폰트를 사용하면 95~99로 떨어지게 된다. 물론 이 점수도 꽤나 높은 점수이나, 이 정도는 감안하고 써야하지 않을까 한다.(개인적으로)

결론

이외에도 Rocket 폰트와 같은 폰트 플러그인을 설치하여 편하게 바꾸어주는 방법도 있으나 개인적으로 여러 플러그인을 설치는 추천하지 않는 바다. 물론 로켓 정도는 가벼운 플러그인에 속하긴 할 것이다. 로켓 폰트는 설정이 굉장히 쉽기 때문에 별도 설명이 필요 없을 것이다.

워드프레스라는 프로그램 자체가 영어권에서 개발되었다보니, 기본 시스템 폰트가 영어가 기반이 된다. 이에 영어권이 아닌 나라에서 사용하게 되면 폰트를 변경해주곤 하는데 위와 같이 변경하는 방법으로 해주면 된다.

다들 고생하셨오이다.