워드프레스에서 한글과 영문에 다른 폰트 적용하기

다음과 같이 영문 폰트 이름을 한글 폰트 이름 앞에 추가하면 영문은 영문 폰트로 한글은 나눔고딕(Naum Gothic) 폰트로 표시됩니다.

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
body {
font-family: arial,'Nanum Gothic',helvetica,sans-serif!important;
}

위의 경우 본문(body)에만 적용되고 body 부분의 요소명을 바꾸어, 글 제목 등도 동일한 방법으로 글꼴을 지정할 수 있습니다.

추가: 스타일시트에서 CSS @import를 사용하면 웹 페이지 로드 중에 추가적인 딜레이(지연 현상)가 발생할 수 있습니다(참고). @import를 사용하여 웹폰트(예: 나눔고딕)를 로드할 때 속도가 저하되는 경우 다음 두 글을 참고해보시기 바랍니다:

• 올바르게 웹폰트 로딩하기
• Loading Web Fonts with the Web Font Loader(Web Font Loader를 사용하여 웹포트 로드하기)

위의 두 글에서 Flash of Unstyled Text 현상을 최소화하는 방법으로 다음과 같은 스크립트를 통해 캐시 기능을 사용할 것을 제안하고 있습니다.

WebFontConfig = {
// 기타 옵션 또는 설정
active: function() {
sessionStorage.fonts = true;
}
}