다음과 같이 영문 폰트 이름을 한글 폰트 이름 앞에 추가하면 영문은 영문 폰트로 한글은 나눔고딕(Naum Gothic) 폰트로 표시됩니다.
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); body { font-family: arial,'Nanum Gothic',helvetica,sans-serif!important; }
위의 경우 본문(body)에만 적용되고 body 부분의 요소명을 바꾸어, 글 제목 등도 동일한 방법으로 글꼴을 지정할 수 있습니다.
참고). @import를 사용하여 웹폰트(예: 나눔고딕)를 로드할 때 속도가 저하되는 경우 다음 두 글을 참고해보시기 바랍니다:
스타일시트에서 CSS @import를 사용하면 웹 페이지 로드 중에 추가적인 딜레이(지연 현상)가 발생할 수 있습니다(위의 두 글에서 Flash of Unstyled Text 현상을 최소화하는 방법으로 다음과 같은 스크립트를 통해 캐시 기능을 사용할 것을 제안하고 있습니다.
WebFontConfig = { // 기타 옵션 또는 설정 active: function() { sessionStorage.fonts = true; } }
@import 대신 http://www.wpbeginner.com/wp-themes/how-add-google-web-fonts-wordpress-themes/ 글에서 설명하는 enqueue하는 방식으로 다음과 같은 코드를 header.php에 추가하는 것이 로딩에 도움이 될지 모르겠습니다.
Font Awesome을 사용하는 경우 위의 코드를 적용하면 Font Awesome이 깨져나올 것입니다.
그런 경우
위와 같이 FontAwesome을 맨 앞에 추가하면 됩니다.