본문 바로가기

워드프레스 나눔폰트 적용 및 글꼴 크기 변경 방법

태비니 2025. 2. 4.

워드프레스에서 구글 나눔폰트를 적용하고 글꼴 크기를 변경하는 방법을 알아보세요. CSS 코드 활용부터 사용자 정의 옵션까지, 자세한 설정 가이드를 제공합니다.

워드프레스에서 폰트와 글꼴 크기 변경하기

워드프레스는 다양한 테마와 플러그인을 통해 유연한 디자인 옵션을 제공하지만, 기본적으로 제공되는 폰트와 글꼴 크기가 만족스럽지 않을 수 있습니다. 특히 한글 웹사이트에서는 가독성을 위해 나눔고딕과 같은 깔끔한 폰트를 사용하는 것이 중요합니다. 아래에서 구글 나눔폰트를 적용하는 방법과 글꼴 크기를 조정하는 다양한 방법을 단계별로 설명합니다.

 

👇👇👇 내용 자세히 보기  👇👇👇

나눔폰트 적용 방법

워드프레스에 나눔고딕과 같은 구글 웹폰트를 적용하려면 다음 단계를 따라야 합니다.

구글 폰트 사이트에서 폰트 가져오기

  1. Google Fonts에 접속합니다.
  2. 언어를 "Korean"으로 설정한 후 원하는 폰트를 선택합니다. 예: Nanum Gothic.
  3. 선택한 폰트의 <link> 태그를 복사합니다. 예: 
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">

워드프레스 테마에 폰트 추가

  1. 워드프레스 관리자 페이지로 이동합니다.
  2. 외모 > 테마 편집기로 들어가 style.css 파일을 엽니다.
  3. 복사한 <link> 태그를 <head> 섹션에 추가합니다.
  4. CSS 파일에 아래 코드를 추가하여 기본 글꼴로 설정합니다: 
    body {
    font-family: 'Nanum Gothic', sans-serif;
}

사용자 정의 CSS 활용

  1. 외모 > 사용자 정의하기 > 추가 CSS 메뉴를 선택합니다.
  2. 아래 코드를 붙여넣어 적용합니다: 
    body {
    font-family: 'Nanum Gothic', sans-serif;
}

글꼴 크기 변경 방법

워드프레스에서 글꼴 크기를 조정하는 방법은 테마 옵션, CSS 수정, 또는 플러그인 사용으로 나뉩니다.

테마 옵션 활용

대부분의 유료 테마는 Typography 메뉴를 통해 글꼴 크기를 조정할 수 있습니다.

  1. 외모 > 사용자 정의하기 > Typography 메뉴로 이동합니다.
  2. 본문, 헤딩(H1~H6) 등 각 요소의 글자 크기를 조정합니다.

CSS를 통한 직접 수정

CSS를 사용하면 특정 요소의 글자 크기를 세부적으로 조정할 수 있습니다.

  1. 외모 > 사용자 정의하기 > 추가 CSS 메뉴로 이동합니다.
  2. 아래와 같이 코드를 추가하여 본문과 리스트 항목의 글자 크기를 조정합니다: 
    p {
    font-size: 16px;
}
ul {
    font-size: 14px;
}

플러그인 사용

CSS 수정이 어렵다면 플러그인을 사용해 간단히 해결할 수 있습니다.

  • Elementor: 페이지 빌더로 각 블록의 텍스트 스타일을 조정 가능.
  • Advanced Editor Tools (TinyMCE Advanced): 기본 편집기의 글꼴 크기 옵션을 확장.

반응형 폰트 설정

다양한 디바이스에서 최적의 가독성을 유지하려면 반응형 폰트를 설정해야 합니다.

  1. CSS 미디어 쿼리를 활용하여 화면 크기에 따라 글자 크기를 조정합니다: 
    body {
    font-size: 16px;
}
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
}

자주 묻는 질문

Q1: 무료 테마에서도 나눔폰트를 적용할 수 있나요?
A1: 네, 가능합니다. 위에서 설명한 대로 CSS 파일에 구글 폰트를 추가하면 어떤 테마에서도 사용할 수 있습니다.

Q2: 특정 페이지나 섹션에만 다른 폰트를 적용할 수 있나요?
A2: 가능합니다. CSS 클래스나 ID를 지정하여 특정 영역에만 별도의 스타일을 적용할 수 있습니다.

Q3: 플러그인 없이도 반응형 폰트를 설정할 수 있나요?
A3: 네, CSS 미디어 쿼리를 사용하면 플러그인 없이도 반응형 폰트를 설정할 수 있습니다.

결론

워드프레스에서 구글 나눔폰트를 적용하고 글자 크기를 조정하는 것은 사이트의 가독성을 높이고 디자인을 개선하는 중요한 작업입니다. 위의 가이드를 따라 테마 옵션, CSS 수정, 또는 플러그인을 활용하여 원하는 스타일을 구현해 보세요.

'IT 인터넷 > PC' 카테고리의 다른 글

윈도우 탐색기 검색 속도 느릴 때, 색인 설정으로 해결하는 방법  (0) 2025.02.05
구글 크롬 팝업 차단 해제 및 캐시 삭제, 초기화 방법 총정리  (0) 2025.02.04
유튜브 영상 품질을 위한 해상도 및 프레임 레이트 완벽 정리  (0) 2025.02.04
엑셀 파일 암호 설정 및 저장 방법: 안전한 문서 관리 비법  (0) 2025.02.03
윈도우 바탕화면 위치 오류 해결 방법: 복사 붙여넣기 문제까지 완벽 정리  (0) 2025.02.03

관련글

댓글

티스토리툴바