워드프레스 폰트 사이즈 조정 방법 (Feat. 카덴스 테마)

워플에서 제공하는 올백 테마를 많은 분들이 사용해주시고 계시는데, 본문 폰트, 특히 모바일에서의 폰트가 살짝 크다는 느낌을 받으신다고, 조정하는 방법에 대해 질문을 많이 주셔서 간략하게 정리 해봤습니다.

카덴스 테마 폰트 사이즈 바꾸는 방법

먼저 올백 테마는 카덴스 테마의 차일드 테마입니다. 따라서, 올백 테마를 잘 사용하시려면 카덴스 테마 사용법을 잘 아시면 됩니다.

카덴스 테마는 기본적으로 PC, 테블릿, 모바일 세가지 화면을 따로 조정하는 메뉴 시스템을 사용합니다. 그래서 반응형 웹을 만들기 정말 편리하죠. 폰트 조정 역시 마찬가지로 세가지 화면에서 조정하는게 따로 있습니다.

워드프레스 폰트 조정하는 법

워드프레스에서 폰트를 조정하기 위해서는 사용자 정의하기 > Colors & Fonts > Typography로 들어갑니다. 아래 그림과 같은 메뉴 섹션이 보였다면 성공입니다.

워드프레스 웹사이트는 크게 2가지 폰트 적용이 그룹이 있죠. 본문(Base) 폰트, 제목(Heading) 폰트. 위 화면은 본문 폰트를 조정하기 위해, 20px 부분을 선택한 화면입니다.

Base Font 부분에 써있는 부분이 폰트와 관련한 정보를 조정하는 곳입니다.

• 글꼴(Font): 현재 System Defult로 설정됨
• 스타일(Style): 현재 regular으로 설정됨, 굵게 표시하고 싶으면 여기서 조정
• 크기(Size): 현재 20px로 설정됨

크기 섹션에서도 세부적으로 적용할 수 있는 요소들이 많습니다. 글자 크기(Font size), 줄 간격(Line Height), 자간(Letter Spacing) 등이 있죠. 여기서 주목해야 할 것은 빨간 체크 박스 부분입니다.

현재 모니터 부분이 파란색으로 활성화 되어있고, 이 말은 본문 폰트가 20px로 설정되어 있다는 것을 뜻합니다.

카덴스 테마를 사용하시다보면, 위와 같이 생긴 아이콘 모양이 여기저기 보이는 것을 알 수 있습니다. 왼쪽에서부터 PC, 테블릿, 모바일 순입니다. 적용되는 순서도 동일하죠. 무슨말이냐면,

PC에서 적용해놓은 설정값이 특별히 따로 설정하지 않는 경우, 태블릿, 모바일에 모두 적용이 됩니다.

워플:WPlaybook

따라서, PC 본문 크기는 괜찮은데, 모바일 본문 크기를 줄이고 싶은 경우, 가장 오른쪽의 모바일 아이콘을 클릭 후, 모바일에 알맞은 폰트 크기를 따로 설정해줘야 합니다.

전체적으로 줄이고 싶다면, PC에서만 줄여주면 되겠죠? 🙂