WordPress에서 폰트 삽입하는 방법

by

WordPress에서 사용자 지정 폰트를 삽입하는 방법은 여러 가지가 있습니다. 사용 목적과 편의성에 따라 적절한 방법을 선택하면 됩니다.

1. Google Fonts 사용 (가장 쉬운 방법)

Google Fonts는 무료 웹 폰트를 제공하며, WordPress에서 가장 간단하게 적용할 수 있는 방법입니다.

1) functions.php에서 Google Fonts 불러오기

function enqueue_google_fonts() {
    wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap', false);
}
add_action('wp_enqueue_scripts', 'enqueue_google_fonts');

2) style.css에서 폰트 적용

body {
    font-family: 'Noto Sans KR', sans-serif;
}

✅ 이 방법은 설정이 간단하며 빠르게 적용됩니다.

2. 웹폰트 파일 직접 업로드 (.woff, .ttf)

커스텀 폰트를 사용하려면 .woff, .ttf 등의 파일을 테마 폴더에 업로드한 후 CSS에서 정의해야 합니다.

1) 폰트 파일 업로드

  • 경로: /wp-content/themes/사용중인테마/fonts/
  • 파일 예시: custom-font.woff2, custom-font.woff

2) style.css에서 @font-face 설정

@font-face {
    font-family: 'CustomFont';
    src: url('fonts/custom-font.woff2') format('woff2'),
         url('fonts/custom-font.woff') format('woff');
}

body {
    font-family: 'CustomFont', sans-serif;
}

✅ 오프라인에서도 사용할 수 있으며, 커스텀 디자인이 가능합니다.

3. 플러그인 사용 (초보자 추천)

플러그인을 사용하면 코드를 수정하지 않고 폰트를 추가할 수 있습니다.

추천 플러그인

  • Easy Google Fonts: Google Fonts를 손쉽게 적용
  • Use Any Font: .woff, .ttf 등의 폰트를 직접 업로드하여 사용 가능

✅ 플러그인 설치 후 관리자 패널에서 손쉽게 설정할 수 있습니다.

4. 폰트 CDN 사용 (Adobe Fonts, Bunny Fonts 등)

Google Fonts 외에도 다양한 폰트 CDN을 활용할 수 있습니다.

1) Adobe Fonts (구 Typekit) 사용

function enqueue_adobe_fonts() {
    wp_enqueue_style('adobe-fonts', 'https://use.typekit.net/your-kit-id.css', false);
}
add_action('wp_enqueue_scripts', 'enqueue_adobe_fonts');

2) style.css에서 적용

body {
    font-family: 'YourAdobeFont', sans-serif;
}

✅ 글로벌 최적화가 되어 있어 빠른 로딩 속도를 제공합니다.

5. wp_enqueue_style()로 폰트 등록

테마 내부에서 폰트를 관리하려면 wp_enqueue_style()을 활용할 수 있습니다.

1) functions.php에서 등록

function enqueue_custom_fonts() {
    wp_enqueue_style('custom-fonts', get_template_directory_uri() . '/fonts/custom-font.css', array(), null);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_fonts');

2) /fonts/custom-font.css에서 설정

@font-face {
    font-family: 'CustomFont';
    src: url('custom-font.woff2') format('woff2'),
         url('custom-font.woff') format('woff');
}

body {
    font-family: 'CustomFont', sans-serif;
}

✅ 테마 내부에서 폰트를 통합 관리할 수 있어 유지보수가 편리합니다.

🚀 최종 정리

방법 장점 단점
Google Fonts 사용 쉽고 빠르게 적용 가능 인터넷 연결 필요
웹폰트 직접 업로드 오프라인 사용 가능, 완전한 커스텀 직접 파일 관리 필요
플러그인 사용 초보자도 쉽게 설정 가능 플러그인 의존성
CDN 사용 (Adobe, Bunny 등) 글로벌 최적화, 빠른 속도 일부 유료 서비스 필요
wp_enqueue_style() 활용 테마 내부에서 관리 가능 직접 설정 필요

📌 추천 방법:

  • 간단한 적용 → Google Fonts
  • 커스텀 폰트 사용 → 웹폰트 직접 업로드
  • 초보자 → 플러그인 활용

Leave a Comment