워드프레스 폰트 변경 방법입니다. 추가 CSS 에서 폰트 코드를 추가하여 변경하였습니다. 추가 CSS에서 변경 한 후 스킨을 변경 하더라도 CSS에 추가 된 코드는 그대로 남아있습니다. 다른 폰트를 추가 하고 싶다면 눈누 홈페이지에서 코드를 받으시면 됩니다.
워드프레스 폰트 변경 방법
저는 워드프레스에 프리텐다드 폰트를 추가하였습니다. 우연히 보게 된 블로그에서 가독성이 좋아 보여 찾아보았더니 프리텐다드 폰트였습니다. 예쁜 폰트들도 많지만 블로그는 가독성이 좋고 가볍고 깨짐이 없는 폰트가 좋습니다.
눈누에서 웹폰트 보기
폰트 코드를 받기 위해 눈누 홈페이지에 들어가 원하는 폰트를 검색합니다.
눈누 홈페이지에서 폰트를 찾으면 아래와 같이 나옵니다. 오른쪽의 웹폰트로 사용에서 복사 버튼을 누릅니다. 이 코드는 추가 CSS 상단에 들어가게 됩니다.
그런데 추가 CSS에 넣어도 워드프레스 폰트가 바뀌지 않습니다. 그래서 다운로드 페이지로 이동을 눌러 공식 홈페이지로 들어갔습니다.
프리텐다드 공식 홈페이지에서 CSS 복사
url 부분이 cdn이 아니라서 공식 홈페이지에서 코드를 다시 받았습니다. 눈누에서 다운로드 페이지로 이동을 누르면 공식 홈페이지로 넘어갑니다.
프리텐다드 공식 홈페이지에 웹폰트에서 CSS를 복사할 수 있습니다. 아래와 같이 코드가 나옵니다.
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
워드프레스에 폰트 추가 하기
워드프레스의 관리자 화면에서 모양 – 사용자 정의로 들어갑니다. 하단의 추가 CSS 에 들어가 상단에 코드를 붙여넣기 합니다.
공식 홈페이지에서 font-family 이름은 Pretendard 입니다 라고 되어있습니다. CSS 붙여 넣은 다음 아래에 다른 코드들도 넣어줍니다.
아래에 전체 코드를 넣어두었으니 프리텐다드 폰트를 넣으실 분들은 아래의 코드를 복사하여 붙여 넣기 하고 다른 폰트를 넣으실 분은 위의 두 줄과 font-family의 프리텐다드를 바꿔주면 됩니다.
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
body, h1, h2, h3, h4, h5, h6, li, p, button {
font-family: 'Pretendard'; color: #1f1c1a;
}
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;
}위의 코드만 추가CSS에 넣고 저장하면 프리텐다드 폰트로 변경이 됩니다.
워드프레스 다른 글 보기