워드프레스 블록 편집기(Gutenberg)에서 폰트를 변경하는 방법을 찾고 계신가요? 기본적으로 블록 편집기에서는 테마가 지정한 스타일이 적용되지만, 직접 수정하여 원하는 글꼴을 적용할 수 있습니다.

1. 블록 편집기의 기본 폰트 확인하는 방법
현재 적용된 폰트를 확인하려면 개발자 도구(F12)를 사용하세요.
body {
font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
2. 테마의 style.css에서 폰트 변경하기
워드프레스 관리자 → 외모(Appearance) → 테마 파일 편집기(Theme Editor) → style.css 선택 후 아래 코드 추가:
body, p, .editor-styles-wrapper, .block-editor-writing-flow {
font-family: 'Noto Sans', sans-serif !important;
}
3. 관리자 페이지의 글쓰기 화면에서도 폰트 적용하기
functions.php에 아래 코드를 추가하여 관리자 글쓰기 화면에서도 폰트를 적용하세요.
function custom_admin_fonts() {
echo ''; } add_action('admin_head', 'custom_admin_fonts');
4. Google Fonts 추가하여 폰트 적용하기
Google Fonts를 추가하면 더 다양한 폰트를 사용할 수 있습니다. functions.php에 아래 코드를 추가하세요.
function add_google_fonts() {
wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;700&display=swap', false);
}
add_action('wp_enqueue_scripts', 'add_google_fonts');
5. 변경 후 적용되지 않는 경우 해결 방법
- – Ctrl + Shift + R 또는 Ctrl + F5를 눌러 브라우저 캐시 삭제
- – 테마의 editor-style.css 또는 editor.css 수정 확인
- – 캐시 플러그인이 폰트 변경을 막고 있는지 확인
6. 테마 자체 설정에서 폰트 변경 확인
일부 테마에서는 폰트 설정이 가능합니다. 관리자 → 외모(Appearance) → 사용자 정의하기(Customize) → 타이포그래피(Typography)에서 폰트 변경을 확인하세요.
7. 테마 파일에서 폰트 지정 확인 (CSS, PHP 코드 수정)
테마가 자체적으로 폰트를 강제 지정하는 경우 아래 파일을 수정해야 합니다.
- – style.css
- – editor-style.css
- – functions.php
body, .editor-styles-wrapper, .block-editor-writing-flow {
font-family: 'Noto Sans', sans-serif !important;
}
8. 폰트 변경 후 SEO에 미치는 영향
폰트 변경은 직접적인 SEO 영향은 없지만, 사용자 경험(UX)과 웹사이트 로딩 속도에 영향을 줍니다.
- – 가독성이 좋은 폰트 선택 (예: Noto Sans, Open Sans, Roboto)
- – Google Fonts 사용 시 display=swap 설정 추가
- – 폰트가 올바르게 로드되는지 개발자 도구(Network → Fonts)에서 확인
9. 요약 및 결론
워드프레스 블록 편집기(Gutenberg)에서 폰트를 변경하려면 다음 방법을 사용할 수 있습니다.
- – 현재 적용된 폰트를 개발자 도구(F12)에서 확인
- – style.css 수정하여 원하는 폰트 적용
- – functions.php 수정하여 관리자 페이지에서도 폰트 변경
- – Google Fonts 추가하여 다양한 폰트 사용
- – 브라우저 캐시 삭제 및 적용 확인
- – 테마 자체 폰트 설정 확인 후 필요하면 수정
- – SEO 및 웹사이트 로딩 속도 최적화 고려
이제 원하는 폰트를 블록 편집기에 적용하고, 사용자 경험을 개선할 수 있습니다.
🚀 워드프레스에서 폰트를 성공적으로 변경하고, SEO 최적화된 웹사이트를 운영하세요!