워드프레스 글쓰기 폰트 바꾸기

워드프레스 테마는 영어에 맞추어 폰트가 적용되어 있습니다. 따라서 한글에 맞는 폰트를 적용해는 것이 좋습니다. 폰트만 바꾸어도 글의 퀄리티가 한층 업그레이드 된것 같은 느낌을 받을 수 있습니다. 추가로 폰트는 페이지 로딩 속도에 영향을 줄 수 있습니다. 폰트 변경후 최적화 확인을 해주는것이 좋습니다. 

 

 

 

목차

 

---

워드프레스 폰트 바꾸기

 

플러그인 > 새로 추가 > WP Google Fonts 설치로 플로그인을 직접 설치 할 수 있습니다. 하지만 플러그인이 많아질수도록 페이지 속도에 영향을 줍니다. 따라서 사용자 정의하기의 CSS를 이용하는 것을 권장합니다. 

 

 

 

---

 

 

 

 

나늠고딕 폰트 바꾸기

외모 > 사용자 정의하기 > 추가 CSS 를 선택합니다. 다음의 코드를 복사해서 붙여 넣습니다. 실시간으로 나눔 폰트가 변경되는 것을 확인할 수 있습니다. 

@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700&subset=korean');
body,h1,h2,h3,h4,h5,h6,li,a,textarea,p,span,dl,dt,dd,td,th,button,strong,label,input { font-family: 'Nanum Gothic','Open Sans',dashicons, IcoMoon !important; }

 

 

---

 

Noto Sans KR 폰트 바꾸기

외모 > 사용자 정의하기 > 추가 CSS 를 선택합니다. 다음의 코드를 복사해서 붙여 넣습니다. 실시간으로 Noto Sans KR 폰트가 변경되는 것을 확인할 수 있습니다. 

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css) ; body, h1, h2, h3, h4, h5, h6, li, p { font-family: 'Noto Sans KR'; !important ; }

 

 

 

---

 

Robot, Naum Gothic, Sans-serif 폰트 바꾸기

외모 > 사용자 정의하기 > 추가 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.06rem;
    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;
}

 

 

---

 

 

 

 

블로그 속도 측정하기

폰트를 블로그에 적용하면 로딩 속도에 영향을 미칩니다. 1~2개 정도는 괜찮지만 3개 이상의 폰트는 페이지 로딩 속도에 매우 안좋은 영향을 줍니다. 

 

webPageTest 에서 블로그 속도를 측정할 수 있습니다 .