베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

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

Last Updated: 2021년 12월 12일 | 4개 댓글
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

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

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

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

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

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

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

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

Avada 테마에서는 워드프레스 알림판 > Avada > 테마 옵션 > 타이포그래피 (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에 익숙해지면 헤더에서 푸터까지 거의 모든 부분의 글자색, 배경색, 글자 크기 등을 자유롭게 변경이 가능합니다.

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

참고:



4 개 댓글

Leave a Comment

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

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

      응답