워드프레스 폰트 설정 본문부터 모바일까지
이번 포스팅은 워드프레스 폰트 설정 및 변경을 위해 사용자 정의에서 글꼴을 바꾸었는데 일부 제목은 그대로이거나, 휴대전화에서 글자가 너무 크게 보이는 경우 케이던스 테마와 케이던스 블록을 기준으로 전체 글꼴을 정하고 개별 설정을 확인하는 순서를 알려드립니다.
워드프레스 폰트 설정 메뉴를 엽니다
관리자 → 외모 → 사용자 정의하기 → 색상 및 글꼴 → 타이포그래피로 이동합니다. 화면이 영문이라면 Colors & Fonts → Typography를 찾으시면 됩니다.
여기서 사이트 전체에 사용할 기본 글꼴과 제목 글꼴을 지정할 수 있는데요. 이후 목록에서 선택할 수 있는 폰트나 이미 등록된 글꼴을 선택해서 진행하세요.
별도 폰트 파일을 설치하는 과정은 별도로 다룰 예정이며, 포스팅이 완성되면 해당 글에 연결 링크를 업데이트 하겠습니다.
본문을 먼저 설정하고 제목을 맞춥니다
기본 글꼴(Base Font)에서 글꼴 종류와 두께, 크기를 우선 지정합니다. 처음이라면 본문 크기를 16~18px 정도에서 비교해 보고, 우측 미리보기 실제 문장을 보면서 조절합니다.
이어서 제목 글꼴(Heading Font Family)을 선택하고 H1, H2 등 제목별 크기와 두께를 설정합니다. 제목 단계는 내용의 구조에 맞게 사용하고, 크기는 각 설정에서 조절하면 됩니다.
실무 팁을 드리자면, H2~H4 까지는 소제목 태그에 해당하고, 실제 포스팅 과정에서 자주 활용하는 요소이니 글자 크기나 두께를 동일하게 설정하는게 포스팅 가독성에서 더 좋은 경험을 얻게됩니다.
크기 옆에 보이는 단위는 다음처럼 이해하시면 됩니다.
- px: 지정한 CSS 픽셀 크기를 기준으로 합니다.
- rem: 페이지 최상위 요소의 글자 크기를 기준으로 합니다.
- em: 글자 크기에 사용할 때 부모 요소의 글자 크기를 기준으로 합니다.
rem을 선택한다고 화면 너비에 맞춰 글자가 자동으로 줄어드는 것은 아닙니다. 그리고 처음에는 설정값을 이해하기 쉬운 단위로 맞춘 뒤 모바일 값을 별도로 확인하세요.
글자 크기와 간격을 어떤 기준으로 정할지 궁금하다면 아래 글을 함께 참고해 보세요.
특정 글자만 바뀌지 않으면 블록 설정을 확인하세요
전체 설정을 바꿨는데 일부 문구만 그대로라면 해당 페이지의 편집 화면으로 이동합니다.
페이지 편집 → 바뀌지 않은 텍스트 블록 선택 → 오른쪽 블록 설정 → 타이포그래피 항목을 확인하세요. 블록 종류에 따라 항목 이름과 위치는 조금 다를 수 있습니다.
글꼴이나 크기가 개별적으로 지정되어 있다면 전체 설정보다 우선 적용됩니다. 전체 기준을 따르게 하려면 해당 지정값을 초기화하거나, 제공되는 항목에서 상속(Inherit)을 선택합니다.
반대로 첫 화면의 강조 문구처럼 다른 크기나 두께가 필요한 부분은 개별 설정을 유지하면 됩니다. 모든 글자를 하나씩 수정하기 전에 전체 설정과 블록 설정 중 어디에서 값을 지정했는지부터 확인하는 게 핵심입니다.
모바일 화면 워드프레스 폰트 설정까지 확인한 뒤 저장합니다
케이던스 테마나 블록 플러그인은 글자 크기 설정에서 휴대전화 아이콘을 선택하면 모바일 값을 따로 조절할 수 있습니다. 개별 블록에 크기를 지정했다면 그 블록의 모바일 설정도 별도로 지정해 주는게 좋습니다.
이때는 다음 세 가지만 살펴보시면 됩니다.
- 제목이 커서 너무 많은 줄로 나뉘지 않는지
- 본문은 확대하지 않아도 읽을 수 있는지
- 줄 간격이 좁아 문장이 붙어 보이지 않는지
확인이 끝나면 사용자 정의하기에서는 발행 버튼으로 저장하고, 페이지에서 수정한 내용은 업데이트합니다.
마지막으로 실제 휴대전화에서 페이지를 열어보세요. 편집 화면의 미리보기와 실제로 읽을 때의 느낌은 다를 수 있으니까요.
여기까지 워드프레스 폰트 설정의 기본 개념인 테마 사용자정의 메뉴에서 사이즈를 조절하는 방법을 전해 드렸습니다. 다양한 테마들에서도 일정한 규칙에 따라 대부분 이와 같은 방식으로 폰트 설정이 가능하니 따라하시다 정말 모르는 부분들이 있다면 언제든 문의주시면 답변 드리도록 하겠습니다.
여기까지 오엠지에서 워드프레스 초보자 여러분들을 위해 기본 세팅에 관해 이야기 드렸습니다.
