워드프레스 글자 크기 변경하는 방법 (제목, 본문 등)

워드프레스에서 제목, 본문 등의 글자 크기를 변경하고 싶은 경우가 많을 것입니다. 테마에서 글자 크기를 변경하는 옵션을 제공하면 테마 기능을 사용할 수 있고, 그렇지 않으면 CSS를 사용하여 워드프레스 글자 크기 변경이 가능합니다.

저는 테마를 변경하면 가장 먼저 본문 글자 크기를 키우는 작업부터 시작합니다. 이제 노안이 진행되는 나이라서 작은 글씨를 보면 눈이 금방 피로해집니다. 그래서 제 블로그 글의 본문 폰트 사이즈가 다른 사이트보다 조금 클 수 있습니다.

[ 이 글은 2023년 1월 18일에 마지막으로 업데이트되었습니다. ]

테마 옵션에서 워드프레스 글자 크기 변경하기

아바다, 엔폴드 등 많은 유료 테마에서는 테마 옵션을 통해 폰트와 글자 크기를 세부적으로 변경할 수 있습니다. 그리고 일부 무료 테마에서도 폰트와 폰트 사이즈 설정을 변경할 수 있는 옵션을 제공합니다.

글자 크기, 폰트 종류 등을 지정하는 옵션은 보통 Typography 섹션에서 제공됩니다. 사용하는 테마의 옵션이나 사용자 정의하기 페이지(워드프레스 알림판 > 외모 > 사용자 정의하기)에서 Typography 섹션이 있는지 체크해보시기 바랍니다.

테마에서 글자 크기 조정 옵션을 제공하더라도 특정 부분의 글자 사이트를 조정하려면 CSS를 이용해야 할 수도 있습니다.

아바다 테마에서 제목, 본문 글자 크기 변경하는 방법

Avada 테마에서는 워드프레스 알림판 > Avada > Options (옵션) > 타이포그래피 (Typography) 섹션에서 글꼴과 글자 크기를 조정할 수 있습니다.

워드프레스 글자 크기 변경 - 아바다 테마

Body Typography에서 본문 글자와 관련된 옵션을 설정할 수 있고, Headers Typography에서 헤딩(소제목)과 관련된 폰트 옵션을 지정할 수 있습니다.

IMPORTANT NOTE(중요한 알림)에서 안내하고 있듯이 이 탭에는 일반적인 타이포그래피 옵션이 포함되어 있으며, 특정 영역에 대한 추가적인 타이포그래피 옵션은 다른 탭에서 제공됩니다. 예를 들어, 메뉴 타이포그래피 옵션은 메뉴 탭에서 지정이 가능합니다.

Headers Typography에서는 헤딩(h1, h2, h3, h4, h5, h6) 태그에 대한 글자 크기 등을 설정할 수 있습니다.

특정 페이지나 카테고리 페이지 등의 글자 크기를 다르게 설정하고 싶은 경우에는 CSS를 사용하여 수동으로 변경이 가능합니다.

엔폴드 테마에서 글자 크기 조정하는 방법

Enfold 테마에서는 워드프레스 관리자 페이지 > Enfold > General Styling > Fonts에서 font family, 폰트 컬러, 폰트 크기를 설정할 수 있습니다.

Enfold 테마에서 워드프레스 본문 글자 크기 변경

Quick CSS에서 직접 CSS 코드를 추가하여 스타일을 조정할 수 있습니다.

Enfold > Advanced Styling에서 body, p, strong, 헤딩(소제목). 메뉴, 버튼, 타이틀 등에 대한 일반적인 스타일을 지정할 수 있습니다. 예를 들어 Select an element to customize 드롭다운에서 H1을 선택하면 H1 태그에 대한 글자색, 배경색, 글자 크기, 줄간격(행간), 폰트 패밀리, 폰트 웨이트, Text Transform 등의 스타일을 변경할 수 있습니다.

워드프레스 엔폴드 테마에서 제목 글자 크기 변경

Apply to Section에서 스타일이 지정될 섹션(로그 영역, 메인 콘텐츠, 대체 콘텐츠, 푸터, Socket 등)을 지정할 수 있습니다. (엔폴드에서 푸터 아래의 영역을 소켓(Socket)이라고 합니다.)

엔폴드는 아바다보다 직관적이지 않지만, 익숙해지면 정교하게 폰트 스타일을 지정할 수 있을 것 같습니다.

뉴스페이퍼 테마의 폰트 설정 옵션

인기 워드프레스 매거진 테마인 Newspaper의 경우 워드프레스 알림판 > Newspaper > Theme panel > THEME FONTS에서 폰트 관련 설정을 지정할 수 있습니다.

워드프레스 뉴스페이퍼 테마 폰트 설정 Newspaper Theme Font Settings

뉴스페이퍼 테마의 경우 별도의 CSS 작업이 필요 없을 정도로 상세하게 폰트 관련 설정을 지정할 수 있도록 많은 옵션이 제공됩니다.

GeneratePress 테마에서 글자 크기 조절하는 방법

이 블로그에 현재 적용되어 있는 GeneratePress 테마에서는 워드프레스 알림판 > 외모(테마 디자인) > 사용자 정의하기 > Typography 섹션에서 폰트와 관련된 옵션을 설정할 수 있습니다.

GeneratePress 테마의 타이포그래피 설정

Typography 섹션 아래에 본문 (Body), 헤더 (Header), 메뉴 (Primary Navigation, Secondary Navigation), Off Canvas Panel, 버튼, 헤딩, 위젯, 푸터 등에 대한 타이포그래피 설정을 지정할 수 있는 하위 섹션이 있습니다.

CSS를 사용하여 워드프레스 글자 크기 변경하는 방법

테마 옵션을 통해 글자 크기를 조정할 수 없거나 특정 부분의 글자 스타일을 조정하고 싶은 경우 CSS를 사용할 수 있습니다.

예를 들어, Astra 테마에서는 테마 디자인 > 사용자 정의하기 > 글로벌 > 글자에서 기본 글자헤딩에 대한 글자 스타일을 변경할 수 있습니다. 테마 옵션에서의 설정만으로 글자 크기를 조정하는 데 한계가 있는 경우 CSS를 사용하여 조정이 가능합니다.

기본적으로 크롬 등의 브라우저에서 요소 검사를 실시하여 글자 크기 등의 스타일을 테스트한 후에 해당 코드를 복사하여 워드프레스 관리자 페이지 > 테마 디자인 > 사용자 정의하기 > 추가 CSS에 코드를 붙여넣기 하면 됩니다.

다음 예시 영상에서는 아스트라 테마에서 블로그 글 본문 글자 크기와 줄간격을 조정하는 방법을 보여줍니다. (아래는 예시 목적으로만 참고하세요.)

기본적인 CSS를 이해하면 웬만한 글자 크기, 글자색 등의 스타일을 변경할 수 있습니다. 위의 영상은 매우 기본적인 사항이므로 이를 참고하여 응용해보시기 바랍니다.

참고로 글자 크기를 지정할 때, px, em, rem을 사용할 수 있습니다. "%, rem, em, px 차이"에 의하면 em, rem의 차이점은 다음과 같습니다.

폰트 사이즈에 비례해야 되는 값은 rem, em을 사용해야 한다.

rem은 html(root) 폰트 사이즈를 기준으로 계산
em은 부모 태그의 폰트 사이즈를 기준으로 계산

워드프레스에서 사용자 정의 CSS는 여러 가지 방법으로 추가할 수 있습니다. 자세한 내용은 "워드프레스에서 CSS 추가하기"를 참고해보세요.

기본적인 CSS를 익히고 싶은 경우 서점에서 CSS 관련 책을 하나 구입하거나 생활코딩과 같은 무료 CSS 강의를 들어보시기 바랍니다. 그리고 구글에 '글자 크기 css' 또는 'font size css'와 같이 검색해보면 다양한 문서가 검색되므로 참고할 수 있습니다.

CSS에 익숙해지면 헤더에서 푸터까지 거의 모든 부분의 글자색, 배경색, 글자 크기 등을 자유롭게 변경이 가능합니다.

※ 파트너스 활동으로 일정액의 수수료를 제공받을 수 있습니다.

참고:

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

25개 댓글

  1. 안녕하세요 워드님 항상 잘보고 있습니다. 한 가지 궁금한게 있어서 여쭤보자면, 현재 저는 제너레이트 프레스 유로 테마를 사용중인데요. 제너레이트 프레스 사용자 정의하기 타이포그래피에서 모바일 바디 폰트를 따로 설정해놨는데 모바일에서 새로고침되면 자꾸 바디 폰트 크기가 한 1~2px정도 바뀌더라구요. 19px이상이면 거의 바뀌지 않는데 그 이하부터는 계속 폰트 크기가 바뀝니다. 인터넷에 검색을 해봐도 나오지 않더라구요.. 혹시나 이유를 알고 계신다면 알려주시면 감사하겠습니다..ㅜㅜ

    1. 안녕하세요, Ken님. 어떤 폰트를 사용하시나요? 제목에 사용하도록 만들어진 폰트가 있을 수 있습니다. 그런 폰트를 사용하면 글자 크기가 작을 경우 글자가 제대로 표시되지 않을 수 있습니다.

      이런 문제가 아닌 경우라면 CSS로 글꼴 크기를 설정해보시겠어요?
      모바일에서는 CSS 쿼리를 사용하여 모바일 기기에 대하여만 글자 크기를 조정할 수 있습니다.

      다음 글에서 GeneratePress 테마의 모바일 분기점에 대하여 살펴볼 수 있습니다.

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-generatepress-%ED%85%8C%EB%A7%88-css-%EB%AF%B8%EB%94%94%EC%96%B4-%EC%BF%BC%EB%A6%AC/

      1. 네 워드님, 일단 답글 달아주셔서 감사합니다.
        바디 폰트는 open sans라는 폰트를 사용중이긴 합니다만 폰트를 select로 설정해 보기도 하고 이리저리 다 바꿔봤는데도 똑같았습니다.

        css도 모바일 폰트만 적용되게 추가해 보았지만 결국엔 똑같네요..

      2. 캐시 플러그인의 캐시를 삭제해보시고, 모바일 기기에서 브라우저 캐시도 삭제한 후에 테스트해보시겠어요?

      3. 근데 현재 캐시 플러그인을 사용하고 있지 않은지라 캐시 플러그인을 설치한 다음 캐시를 삭제해도 될까요?

      4. 추가한 CSS 코드가 정확한지도 체크해보시겠어요?
        그리고 플러그인을 모두 비활성화한 후에도 확인해보시기 바랍니다.
        서버 캐시가 활성화되어 있는 경우에는 서버 캐시를 삭제하여 확인해볼 수도 있습니다.

  2. 워드님 안녕하세요.
    자료 잘 보고 있습니다.
    워드님 글 중에서 목차 관련 글 봤는데요.
    전 toc 말고 럭키wp 쓰고 있습니다.
    근데 궁금한게 있는데요. 바쁘시겠지만
    혹시 목차 제목 글자색은 바꾸는게 쉽던데
    왜 그 아래 목차 소제목들은 글자색 변경이 안될까요?
    혹시 바꾸는 방법이나 css코드가 있을까요?
    제 사이트 주소는 tgwwjob.co.kr 입니다.
    여기에 목차 색이 자꾸 변경을 해봐도
    파란색 고정이거나 3줄중에 1번째는 검정인데
    아래 두줄은 회색 등으로 표기 되더라구요.
    목차 소제목들도 전부 검은색으로 하고 싶은데
    방법이 있을까요?

  3. 근데 이미 발행한 글들에는 버튼 텍스트 크기 조정한게 적용이 되어 있는데 글을 쓰고 미리 보기를 해보면 적용이 안되어있네요.

  4. 버튼 텍스트 크기를 일괄적으로 조정하려고 동영상 참고해서 개발자 모드에서 아래와 같은 코드를 찾아 폰트 사이즈만 조정해서 일괄 적용은 되었는데요. 코드가 여러 개 뜨던데 제가 찾은 코드가 맞는 건가요?ㅎㅎ

    .wp-block-buttons>.wp-block-button.has-custom-font-size .wp-block-button__link {
    font-size: 36px;
    }

  5. 안녕하세요, 워드프레스 시작한 지 3일차입니다.
    본문 등록 후 PC로는 글자 크기가 적당해 보이는데 모바일에서는
    너무 크게 보입니다. 가독성도 떨어지구요.

    현재 제너레이트 프레스 유료 버전 사용 중이고
    포스트 X로 유료 테마를 설정하였습니다.

    CSS로 수동 설정해야 하는 건가요?
    블로그인데 가독성이 떨어지니 막막하고 난감합니다..

  6. 워드프레스 엘리멘토 pro에서 블로그 만들어서 글 4개 써봤는데 워드프레스에서 이메일이 왔습니다. "모바일에서 글자가 너무 작다"고 하는데 선생님 사이트는 글자 사이즈가 몇인가요 구글 검색에 최적화된 사이즈가 있는지 궁금합니다

    1. 안녕하세요, 박철훈님. 먼저는 글(포스트) 작성 시 엘리멘터 페이지 빌더 대신 기본 에디터(블록 에디터)를 사용할 것을 권장합니다. 글 작성 시 Elementor 등 페이지 빌더를 사용해서는 안 되는 이유에 대하여 다음 글을 참고해보세요.

      https://avada.tistory.com/1811

      이 블로그에는 현재 가볍고 빠른 테마로 평가 받고 있는 GeneratePress 테마가 사용되고 있습니다. GP 테마에서는 Typography에서 본문 글자 크기를 조정할 수 있습니다.

      https://www.screencast.com/t/x3aOauxzxdp

      현재 사용자 정의하기에서는 18px 크기로 설정되어 있지만, 살펴보니 CSS로 설정된 글자 크기가 적용되고 있는 것 같습니다.

      .single .entry-content p {
      font-size: 1.13em;
      }

      저는 이제 노안이 올 나이가 되어서 글자 크기를 일부러 크게 설정하고 있습니다. 글자 크기는 적절한 크기로 지정하시기 바랍니다. CSS를 이용하면 모바일 기기와 PC 크기에서 텍스트 글자 크기 등을 다르게 지정할 수 있습니다.

    1. 아바다, 엔폴드, 뉴스페이퍼 등 일부 유료 테마에서는 글자 굵기, 링크 색상 등도 테마 옵션 내에서 지정할 수 있는 섹션을 제공합니다. 테마 옵션에서 그런 기능을 제공하지 않거나 보다 정교하게 제어하고 싶다면 CSS로 스타일을 지정할 수 있습니다.

    1. 안녕하세요? ColorMag 테마 내에서 글자 크기를 조정하는 옵션을 제공하는지부터 체크해보시기 바랍니다. 그런 옵션이 없다면 본문에서 소개하는 CSS 코드를 이용한 방법으로 조정이 가능합니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.