워드프레스 프리텐다드 폰트 속도저하없이 적용하는법

글을 읽을 때 폰트는 굉장히 중요한 역할을 합니다. 특히 가독성에 큰 영향을 주는데요 워드프레스 프리텐다드 폰트 적용을 통해 가독성을 올립시다.

처음에 웹폰트 적용을 해봤는데 장점은 쉽게 적용이 가능하지만 치명적인 단점이 존재했습니다. 사이트 속도가 많이 떨어지는 문제가 발생해서 계속 찾다가 해결책을 발견해서 공유합니다.





워드프레스 폰트 속도저하없이 적용하기

코딩에 관해서 잘모르지만 이것저것 공부하면서 프리텐다드 폰트를 워드프레스에 적용하는 방법을 찾았습니다.

열심히 구글링해도 웹폰트 적용방법은 많지만 속도가 떨어지는 단점을 감수해야했기에 어떻게 속도가 떨어지지 않으면서 폰트를 적용할 수 있을지 고민했습니다.

방법은 사이트 자체에 폰트 파일을 올리고 적용하는 것이었습니다. 코딩을 잘하시거나 관련 지식이 있으신 분들은 아주 쉬운 문제지만 저 처럼 코딩에 관한 지식이 없는 사람은 관련 글을 아무리 읽어도 외계어 처럼 보여서 힘드셨을거에요.

오늘 이 글을 따라하기만 하면 바로 적용가능하게 알려드리겠습니다.


1.눈누에서 폰트 파일 다운로드

눈누 프리텐다드 폰트 다운 링크로 접속해 다운로드 페이지 버튼을 눌러 글꼴을 다운로드해주세요.

다운로드 받을 파일에서 Web 폴더 – variable 폴더 – PretendardVariable.woff2 파일을 사용할거에요.

한글폰트는 용량이 커서 사용하지 않는 글자를 없앤 서브셋 폰트를 사용하면 용량을 줄일 수 있고 Woff2 파일이 용량이 적다고하여 선택했습니다.

프리텐다드는 굵기가 다양하게 존재하는데 사이트 속도저하 없이 폰트를 적용하는것이 목표이므로 폰트 하나만 올렸습니다.


2. 워드프레스에 폰트 파일 업로드

폰트 파일을 업로드하는 방법은 여러가지가 있지만 복잡한 과정은 잘모르기도하고 귀찮으니 플러그인을 통해 해결했습니다.

커스텀 폰트 설치

워드프레스 관리자 페이지에서 플러그인 – 새 플러그인 추가 화면에서 “Custom Font”를 검색하시고 설치해주세요.

이제 설치한 플러그인에서 Setting을 눌러주시고 ‘Add New Font’를 눌러주세요. Choose File 버튼을 누르고 파일 업로드 탭에서 파일 선택을 눌러 ‘PretendardVariable.woff2’파일을 업로드해주세요.

폰트 업로드

워드프레스 관리자페이지에서 미디어 – 라이브러리에 들어가주세요. 우리가 방금 업로드한 ‘PretendardVariable.woff2’ 파일을 클릭해주세요. 파일 URL을 복사해서 약간 수정하겠습니다.

https://주소.com/wp-content/uploads/2024/07/PretendardVariable.woff2

이런식으로 주소가 나오는데 여기서 wp-content 뒷부분만 사용하기 때문에 복사하겠습니다.

wp-content/uploads/2024/07/PretendardVariable.woff2 부분을 복사해주세요. / 여러분의 주소는 년도와 날짜 때문에 다를 수 있습니다.


3. 추가 CSS 수정하여 적용하기

디자인 – 사용자 정의하기 – 추가 CSS 순서로 들어와주세요. 아래 내용을 복사하여 붙여넣기 해주세요.

표시된 부분을 아까 복사한 주소로 바꿔주시고 발행하기를 눌러주세요.

/* PretendardVariable*/
@font-face {
font-family: 'PretendardVariable';
   src: local('PretendardVariable'), url('/wp-content/uploads/2024/07/PretendardVariable.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}

body {
font-family: 'PretendardVariable', sans-serif;
}
h1 {
font-family: 'PretendardVariable', sans-serif;
}

h2 {
font-family: 'PretendardVariable', sans-serif;
}

h3 {
font-family: 'PretendardVariable', sans-serif;
}

h4 {
font-family: 'PretendardVariable', sans-serif;
}

h5 {
font-family: 'PretendardVariable', sans-serif;
}

h6 {
font-family: 'PretendardVariable', sans-serif;
}
.entry-button {
font-family: 'PretendardVariable', sans-serif;
}


자 이제 폰트가 적용된 것을 확인 할 수 있습니다.

구글 PageSpeed Insights 에서 속도를 비교해보세요.

웹폰트를 적용했을 때 사이트 속도가 모바일은 50점대로 떨어졌었는데 모바일, PC 모두 100점이 나온 것을 확인할 수 있습니다.

티스토리나 블로그스팟으로 내집없이 고통받지 말고 클라우드웨이즈를 통해 워드프레스를 시작해보세요.

아직도 워드프레스를 고민중이시라면 아래 글 추천드릴게요!

이제 빠른 속도와 가독성 모두 살린 예쁜 워드프레스를 운영하시면 되겠습니다 🙂

Leave a Comment