워드프레스 GeneratePress 테마에 프리텐다드 폰트 적용하는 2가지 방법
안녕하세요 하루페이퍼입니다. 그동안 하루페이퍼는 Noto-Sans 폰트를 메인 폰트로 사용하고 있었습니다. 그러다 얼마 전부터 Pretendard 폰트를 사용하기 시작했습니다. Noto-Sans와 Pretendard 폰트는 둘 다 고딕 계열로 비슷한 형태를 가지고 있습니다. 글자 하나하나를 비교하면 큰 차이가 없지만, 전체적인 가독성에서 꽤 차이가 납니다.
하루페이퍼는 심플하고 빠른 GeneratePress테마를 사용하고 있는데, 여기에 프리텐다드 폰트를 적용하니 더욱 깔끔해 보이네요. 오늘은 워드프레스 GeneratePress테마에 프리텐다드 폰트를 적용하는 2가지 방법을 소개해 드리겠습니다.
1. Pretendard 폰트란?
Pretendard는 오픈소스 한글 웹폰트로, Noto Sans의 안정성과 애플·네이버 서체의 디자인 장점을 결합한 서체입니다. 고해상도 화면에서 선명하게 보이고, 가독성이 뛰어나 블로그·뉴스레터·쇼핑몰 등 다양한 웹 환경에서 많이 사용됩니다.
2. Pretendard vs. Noto Sans Kr
노토 산스(본고딕)와 프리텐다드를 비교해 보면 다음과 같습니다. ‘하루페이퍼 Harupaper’를 비교해 봤습니다. 둘 다 24px입니다.
3. 적용 방식 2가지
GeneratePress에서 Pretendard를 적용하는 방법은 크게 두 가지입니다.
- CDN 방식
- 코드 몇 줄로 바로 적용 가능
- 외부 서버에서 폰트를 불러오기 때문에 서버 용량 차지 없음
- FTP 업로드 방식
- 폰트를 직접 서버에 업로드하여 불러옴
- 외부 의존성 없이 안정적, 로딩 속도 향상 가능
가. CDN 방식 적용법 (간단·빠름)
워드프레스 관리자 화면에서 외모 → 사용자 정의하기 → 추가 CSS로 이동합니다. 여기서 아래 코드를 복사해 붙여 넣은 다음, ‘공개‘를 눌러 저장하면 됩니다.
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');
body { font-family: 'Pretendard Variable', 'Noto Sans KR', sans-serif; font-weight: 400; /* 본문은 Regular */ line-height: 1.75; letter-spacing: -0.015em; color: #222; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; /* 제목은 Bold */ line-height: 1.4; letter-spacing: -0.02em; color: #111; }나. FTP 업로드 방식 적용법 (속도·안정성↑)
다운로드 받은 프리텐다드 폰트를 서버에 업로드 해두고 차일드 테마의 style.css 또는 사용자 정의 CSS에 코드를 추가해 적용하는 방법입니다. 따로 불러올 필요가 없으므로 안정적이고, 속도도 훨씬 빠르게 됩니다. 서버에서 가까울수록 더 안정적이게 되니, 한글 블로그라면 서버 위치가 한국일 때 더 빠르겠죠.
- 프리텐다드 폰트 다운로드 하기 – 눈누, 깃허브 등 어디로 가든지 다운로드 페이지는 아래 개발자 티스토리 블로그로 연결됩니다. ▶ 개발자 티스토리 블로그
- FTP로 접속 후
/wp-content/themes/generatepress_child/fonts폴더 생성 (차일드 테마 사용 권장) - 폰트 파일 업로드
- 차일드 테마의
style.css또는 사용자 정의 CSS에 아래 코드 추가하고 저장
@font-face { font-family: 'Pretendard Variable'; src: url('/wp-content/themes/generatepress_child/fonts/PretendardVariable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
body { font-family: 'Pretendard Variable', 'Noto Sans KR', sans-serif; }4. 폰트 통일 팁
인용문, 목록, 메뉴, 버튼 등 일부 HTML 요소들은 다른 폰트를 사용하도록 설정되어 있을 수 있습니다.
이때 font-family: inherit; 코드를 사용하면 부모 요소의 폰트를 그대로 상속받아 사용하게 됩니다. 이 방법을 통해 별도의 CSS 설정 없이도 블로그 전체의 폰트를 통일하여 일관성 있는 디자인을 유지할 수 있습니다.
인용문, 목록, 메뉴, 버튼 등에도 동일한 폰트를 적용하려면, CSS에 다음 코드를 추가합니다.
blockquote, ul, ol, nav, button { font-family: inherit; }프리텐다드 폰트를 기본 폰트로 먼저 표시되게 해서 깜빡이지 않게 하려면, 다음 코드를 추가하면 됩니다.
font-display: swap;이것은 웹폰트를 불러오는 동안 일시적으로 시스템 폰트를 보여주다가 웹폰트 로딩이 완료되면 교체하는 역할을 합니다. 이렇게 하면 독자가 폰트 로딩을 기다리는 동안 하얀 화면을 보는 것을 방지하여 사용자 경험을 개선할 수 있습니다.
5. 맺는말
이상으로 워드프레스 GeneratePress 테마에 프리텐다드 폰트 적용하는 2가지 방법을 알아보았습니다.
Pretendard 폰트는 깔끔하고 세련된 인상을 주면서도 한글 가독성이 좋아 블로그나 뉴스레터에 특히 잘 어울립니다. GeneratePress의 심플함과 Pretendard의 가독성을 결합하면, 속도와 디자인을 모두 잡을 수 있습니다. CDN 방식으로 간단하게 시작해 보고, 사이트가 커지거나 속도를 극대화하고 싶다면 FTP 방식으로 전환해 보세요.
함께 읽으면 좋은 글
파트너스 활동으로 소정의 수수료를 제공받을 수 있습니다.
