워드프레스 블록 편집기(Gutenberg) 폰트 변경 및 수정 방법 (SEO 가이드)

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 ;
        }
        

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 ;
        }
        

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 최적화된 웹사이트를 운영하세요!