본명조, Noto Serif CJK는 2017년 4월 구글과 어도비 시스템즈가 함께 만들어 공개한 무료(오픈소스) 폰트입니다. 한중일 모든 서체를 포함하고 있고 글자 굵기별로 7개 폰트를 제공하고 있습니다. 그리고 글자 자체가 상당히 미려해서 활용도가 매우 높습니다. 폰트는 Google Noto Fonts에서 내려받을 수 있습니다.

이 글에서는 워드프레스, 그리고 Activello 테마에서 이 본명조 폰트를 사용하는 방법을 설명하려고 합니다. Activello 테마Colorlib에서 제공하는 블로그용 무료 테마입니다. 이 블로그도 Activello 테마를 사용하고 있습니다.

Activello 테마는 본문에 Lora 폰트를 사용하고 있습니다. 영문을 보시면 아시겠지만, 이 Lora 폰트는 폰트 끝에 돌기가 있는 Serif 계열의 폰트에 해당됩니다. 따라서 명조체 폰트와 잘 어울립니다.

워드프레스에서 폰트를 포함시키는 방법은 여러가지 있지만, 크게 3가지로 구분할 수 있습니다.

  1. Use Any Font, Rocket Font와 같은 플러그인을 사용하는 방법입니다. 별다른 조치 없이 플러그인에서 제공하는 폰트를 바로 사용할 수 있어 많이 활용되는 방식입니다. 다만, 플러그인에서 제공하지 않거나, 플러그인의 조건과 맞지 않으면 원하는 특정 폰트는 쓸 수 없다는 단점이 있습니다.

  2. 웹서버에 폰트를 올려 놓고 페이지에 그 폰트를 임포트하는 방식입니다. 폰트 파일만 있다면 손쉽게 워드프레스에 폰트를 포함할 수 있다는 장점이 있지만, 해당 페이지가 열릴때마다 그 폰트를 다운받도록 해 서버나 클라이언트측에서 트래픽 소모가 많고 따라서 페이지가 열리는 시간이 다소 걸린다는 단점이 있습니다.

  3. 특정 서버에서 제공하는 폰트를 활용하는 방식입니다. 예를 들어 구글 얼리 억세스에서는  다양한 폰트를 웹페이지에서 임포트하여 사용할 수 있도록 제공하고 있습니다. 이 글에서 소개하고 있는 본명조, Noto Serif CJK의 자매 폰트인 Noto Sans CJK 폰트도 구글 얼리 억세스에서 제공하고 있습니다. 특정 서버에서 제공하는 폰트를 임포트하여 활용하는 방식은 트래픽을 줄일 수 있는 장점이 있습니다. 예를 들어 A라는 웹페이지에서 구글 얼리 억세스에서 제공하는 Noto Sans CJK 폰트를 사용하고 있고, B 웹페이지에서도 구글 얼리 억세스의 Noto Sans CJK를 사용하고 있다면, A 페이지에 들어 갔다 B페이지로 들어가면 다시 폰트를 다운받지 않고 A 페이지 방문시 다운받은 폰트를 사용하게 되어 트래픽을 줄이고 속도를 높일 수 있다는 장점이 있습니다.

여기서는 3번 방식으로 Activello 테마에 Noto Serif CJK 폰트를 임포트 해보고자 합니다. 내용은 매우 간단합니다. Activello 테마에서는 추가 CSS를 넣을 수 있도록 옵션을 제공하는데, 여기에 다음을 적어 넣으면 한글 폰트는 Noto Serif CJK 폰트로 표현됩니다.

첫번째 줄은 Noto Serif CJK 폰트를 임포트 하는 것이고, 이를 임포트 하면서 폰트명을 ‘Noto Serif KR’로 명명하게 됩니다. 그리고 다음 줄에서는 HTML에서 body 등의 태크에는 폰트를 Lora, Noto Serif KR, serif 순으로 적용하게 됩니다.

현재 쓰는 테마는 Scrawl 테마입니다. Scrawl 테마에서 Noto Serif CJK를 쓰기 위해 다음과 같이 추가 CSS를 설정하였습니다.

워드프레스에서 본명조(Noto Serif CJK KR) 폰트 사용하기”에 대한 3개의 생각

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다