워드프레스에 시스템 폰트를 적용했다. 구글 폰트인 ‘Noto Sans KR’를 엊그제 적용하였으나 사이트가 살짝 무거워져 속도 최강이라는 시스템 폰트를 적용하게 되었다.
이제 이 블로그의 글자는 사용하는 기기에 따라 폰트가 달리 보일 것이다. 아이폰 사용자는 Apple SD Gothic Neo이 보이고 갤럭시 폰에서는 Roboto 폰트가 보이게 된다.
구글의 것은 구글에게, 애플의 것은 애플에게 돌려주게 되는 셈이니 민주적인 방식이라고 할 수 있을지도 모르겠다. ㅋ
워드프레스에 ‘Noto Sans KR’ 폰트를 적용하는 방법은 아래 글 참고.
시스템 폰트 적용 장점
시스템 폰트의 가장 큰 장점은 브라우저가 사이트를 읽을 때 웹폰트 다운로드를 요청하지 않고 시스템에 이미 설치된 폰트를 그대로 사용하기 때문에 사이트의 속도가 엄청 빨라진다는 것이다.
사용자가 이용하는 시스템의 폰트를 사용함으로써 익숙하고 향후 라이선스나 업데이트를 신경쓰지 않아도 되는 장점이 있다.
시스템 폰트 적용 단점
운영체제마다 적용 폰트가 다르고 기기마다 시스템 폰트의 품질이 다를 수밖에 없어 사이트의 통일적인 디자인을 기대하기 어렵다는 것이 단점이다.
무엇보다 사이트 운영자가 기대하는 폰트를 선택할 수 없다는 것이 가장 큰 단점.
시스템 폰트 종류
| 폰트 이름 | 적용 시스템 | 주요 특징 | 한글 지원 여부 |
|---|---|---|---|
| -apple-system | iOS, macOS | 디바이스의 기본 시스템 폰트를 자동 적용 (SF Pro, SF Compact 등) | 직접 포함 안 됨 (Apple SD Gothic Neo로 대체) |
| BlinkMacSystemFont | 맥OS의 크롬, 엣지 등 Blink 엔진 브라우저 | 맥에서 San Francisco를 제대로 부르기 위한 백업 키워드 | 직접 포함 안 됨 (Apple SD Gothic Neo로 대체) |
| Segoe UI | 윈도우 OS 기본 폰트 (Vista 이후) | 영어/숫자는 세련되지만 한글은 품질 구림 | 있음 (한글 최적화 미흡) |
| Roboto | 안드로이드, 크롬OS 기본 폰트 | 구글이 만든 모바일 최적화 폰트. 가독성 좋음 | 있음 |
| Helvetica Neue | 구) macOS, iOS (요세미티, iOS 8 등) | 클래식한 고딕체. 깔끔하고 현대적 | 없음 |
| Lucida Grande | 구) Mac OS X 기본 폰트(10.9 이하) | 부드럽고 넓은 고전적 폰트 | 없음 |
| Malgun Gothic (맑은 고딕) | 윈도우용 공식 한글 시스템 폰트 | 윈도우에서 UI용 한글 폰트. | 한글 전용 |
| Apple SD Gothic Neo | iOS, macOS 한글 시스템 폰트 | 애플 디바이스 한글 UI용 공식 폰트. | 한글 전용 |
| sans-serif | 글로벌 대체 폰트 | 모든 기기 지원 |
-apple-system은 사실 하나의 폰트 이름이 아니라, iOS나 macOS 시스템이 최적의 시스템 폰트를 선택하게 하는 폰트 패밀리로 San Francisco (iOS 9+, macOS 10.11+), SF Pro, SF Compact(애플워치나 작은 화면) 등의 폰트 포함. -apple-system은 영어, 숫자는 San Francisco (SF Pro), 한글은 Apple SD Gothic Neo가 자동 적용된다.
BlinkMacSystemFont는 예전에 Blink(크롬, 엣지, 오페라 등)엔진 브라우저에서 macOS가 구될 때 Mac 시스템 폰트(San Francisco)를 사용하라는 명령어. -apple-system만 써도 되나, 옛날 브라우저의 호환성을 고려해서 사용.
정리하면, ▶맥/아이폰 = 영어: SF Pro + 한글: Apple SD Gothic Neo, ▶윈도우 =
영어: Segoe UI + 한글: Malgun Gothic, ▶안드로이드 = 영어/한글 모두: Roboto가 시스템 폰트라고 할 수 있다.
시스템 폰트 적용 방법
워드프레스에 시스템 폰트를 적용하기 위해서는 두 가지 작업이 필요하다.
속도 최적화를 위해서는 자식 테마를 만들어서 시스템 폰트를 적용할 것을 권장한다. 자식 테마에서 워드프레스가 디폴트로 사용하는 폰트의 호출을 끊고, 시스템 폰트의 스택(font-family)를 CSS에 추가하면 된다. 자식 테마 만드는 방법은 아래 글 참고.
부모 테마의 폰트 요청 끊기
아래 코드를 자식 테마의 functions.php 파일에 복사하여 붙여 넣기 한다.
// 부모 테마의 폰트 dequeue
add_action('wp_enqueue_scripts', function() {
wp_dequeue_style('twentytwentyfive-fonts');
}, 20);속도 최적화는 물론 사이트 경량화를 추구한다면 부모 테마의 폰트 파일을 모두 삭제하는 것도 하나의 방법이 될 수 있다. 부모 테마의 폰트 저장 경로 참고. /wp-content/themes/부모 테마명/assets/fonts/
시스템 폰트스택 CSS에 추가
아래 코드를 테마 파일 편집기에서 자식 테마의 style.css 파일에 추가하거나, 테마 편집기에서 “CSS 추가”에 붙여 넣기 한다.
body {
font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}폰트 스택(font-family)의 적용 우선 순위는 디바이스 시스템 폰트 → 한글 지원 폰트 → 글로벌 대체 폰트(sans-serif) 순으로 작성한다.
워드프레스 시스템 적용하는 방법은 이것이 전부다.
댓글