워드프레스에서 구글 폰트를 사용하는 것은 매우 쉽습니다. 800개 이상의 웹 폰트를 무료로 제공하는 디렉토리로, 웹사이트에서 자유롭게 사용할 수 있습니다. 구글 폰트 서비스는 수백만 개의 워드프레스 웹사이트에서 웹사이트의 디자인과 사용성을 향상시키는 데 사용되는 최고의 무료 서비스입니다. 워드프레스에서 구글 폰트를 사용하면서 사이트 성능 저하 없이 PageSpeed 점수를 높이는 방법을 알아보겠습니다.
방법 1: 워드프레스 서버에 Google 글꼴 호스팅하기
1단계: Google 글꼴 선택
구글 폰트 사용량을 줄이면 요청 횟수가 줄어듭니다(폰트 수가 적을수록 요청 횟수가 줄어듭니다).
글꼴 두께를 신중하게 선택하세요. 사용하는 글꼴 두께의 개수는 페이지 로딩 속도에도 영향을 미칩니다. Google Fonts에서 필요한 두께만 로드하도록 하려면, 필요한 두께를 제외한 나머지 두께는 선택 해제하여 필요한 두께만 로드되도록 하세요.
2단계: 글꼴 다운로드
글꼴 다운로드는 두 번째 단계입니다. 구글은 모든 글꼴 두께를 자동으로 다운로드하므로 이 단계에서는 글꼴 두께를 선택할 필요가 없습니다. 글꼴 두께 선택은 세 번째 단계에서 필요합니다.
3단계: 글꼴을 웹 글꼴로 변환
해당 사이트에서 '글꼴 추가' 버튼을 클릭하고 웹사이트에서 사용할 글꼴만 선택하여 업로드하세요. 업로드할 글꼴은 roboto-regular.ttf 파일과 roboto-bold.ttf 파일이며, 두 가지 굵기가 모두 포함됩니다. WOFF와 WOFF2는 주요 브라우저를 모두 지원하므로 설정을 그대로 두세요. '변환' 버튼을 클릭하여 변환 프로세스를 시작하세요.
4단계: 변환된 글꼴 파일 다운로드
글꼴 변환이 완료되면 바로 다운로드할 수 있습니다. 두 개의 글꼴이 컴퓨터에 다운로드되었으므로 압축 파일에는 총 4개의 글꼴 파일이 포함됩니다.
5단계: 글꼴 파일을 워드프레스 파일에 업로드합니다
웹 폰트 파일은 FTP 또는 cPanel을 . 테마 및 코어 업데이트로 인해 덮어쓰기되는 것을 방지하기 위해 가급적 wp-content/uploads 폴더에 업로드해 주세요. 저희는 폰트 파일을 다른 파일과 분리하기 위해 "fonts" 폴더에 업로드했습니다. 링크를 브라우저에서 열면 폰트를 다운로드할 수 있으므로 업로드가 성공적으로 완료되었는지 확인할 수 있습니다.
6단계: CSS에 사용자 지정 글꼴 추가
압축 파일을 다운로드한 후, 해당 파일에 stylesheet.css CSS 파일을 추가합니다. 아래 CSS 코드는 글꼴을 기존 CSS에 연결하여 사용할 수 있도록 합니다.
CSS 코드는 functions.php 파일에 넣거나 style.css 파일의 시작 부분에 넣을 수 있습니다. 외부 CSS 파일이나 WordPress의 wp_enqueue_style 함수를 CSS 코드에서 사용할 수 있습니다. 여기서는 테마의 기본 style.css 파일에 코드를 붙여넣겠습니다. 상대 URL은 절대 URL로 바꿔야 합니다. 코드를 복사하여 스타일시트에 붙여넣으세요.
stylesheet.css 파일의 테마 기본 URL:
src: url('Roboto-Bold.woff2') format('woff2'),
url('Roboto-Bold.woff') format('woff');
다음으로 변경하세요:
src: url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff2') format('woff2'),
url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff') format('woff');
현재 HTML에서 글꼴을 쉽게 사용하려면 사용자 지정 클래스를 만드세요. CSS 클래스로는 roboto_font 와 roboto_bold_font를 .
.roboto_font {
font-family: “Roboto”, “Arial”, sans-serif; }
.roboto_bold_font {
글꼴 패밀리: "Roboto", "Arial", 산세리프;
글꼴 두께: 굵게;
}
7단계: 기본 글꼴 설정
이 글꼴을 웹사이트의 기본 글꼴로 설정하려면 style.css 파일에 해당 CSS 코드를 포함해야 합니다.
기존 글꼴 패밀리 속성을 바꾸려면 디버깅을 하거나 글꼴을 편집해야 할 수도 있습니다.
다음 단계는 다운로드한 stylesheet.css 파일을 업로드하고 CSS 코드를 추가하는 것입니다. 아래 CSS 코드는 기존 CSS와 함께 글꼴을 적용하여 바로 사용할 수 있도록 해줍니다. 외부 스타일시트를 사용하거나 WordPress 함수인 `wp_enqueue_style`을 사용하여 스타일시트를 추가할 수 있습니다.
방법 2: 웹 글꼴 사전 로드 - 화면 상단 최적화
Google Fonts를 사용하는 경우 Google에서 준비하여 Google 서버에서 WordPress 웹사이트로 전송한 스타일시트를 참조해야 할 수 있습니다. Google Chrome에서 제공하는 개발자 도구를 사용하여 웹사이트를 검사하면 이러한 과정을 엿볼 수 있습니다. 소스 코드에서 Google Fonts 항목이 두 개 나타날 수도 있습니다.
첨부된 사진을 참조해 주십시오.
fonts.googleapis 클릭하면 해당 URL을 생성한 스타일시트가 열린 페이지에 표시되는 것을 확인할 수 있습니다. 또한, 각 font-face 선언에 대해 특정 글꼴 파일이 호출됩니다.
이는 사용자가 fonts.gstatic.com 필요한 글꼴 두께를 다운로드해야 함을 의미합니다. 이 과정으로 인해 WordPress 페이지 로딩 시간이 길어질 수 있습니다.
따라서 현재 테마의 functions.php 파일에 접근하여 글꼴 관리를 담당하는 함수 안에 다음 PHP 코드를 입력하십시오.
function twentyeleven_resource_hints( $urls, $relation_type ) {
만약 wp_style_is('rumi-fonts', 'queue') && 'preconnect' === $relation_type)이면 {
$urls[] = 배열(
'href' => 'https://fonts.gstatic.com',
'크로스오리진'
);
}
$urls를 반환합니다
}
add_filter( 'wp_resource_hints', 'twentyeleven_resource_hints', 10, 2 );
방법 3: 플러그인을 사용하여 Google Fonts WordPress 최적화
대부분의 워드프레스 관련 작업과 마찬가지로 플러그인을 사용하면 Google Fonts 최적화가 훨씬 간편해집니다. 또한 플러그인이 소프트웨어적인 부분을 처리해 주기 때문에 시스템 내 코드 위치에 대해 걱정할 필요가 없습니다.
WordPress 웹사이트에 Google Fonts가 설치되어 있고 PageSpeed Insights 또는 GTmettrix를 사용하여 성능 테스트를 실행하면 fonts.googleapis.com 오류 메시지가 표시됩니다.
이는 Google Fonts가 WordPress 플랫폼과 호환되지 않기 때문에 발생합니다. WordPress 사이트의 Google Fonts 최적화가 필요함을 나타냅니다.
이 문제를 해결하기 위해 무료 플러그인을 사용할 수 있습니다. 바로 OMGF | Host Google Fonts Locally
설치가 완료되면 플러그인은 즉시 WordPress의 `wp en queue script()` 메서드가 `wp head()` 함수로 전환되도록 합니다. 이 플러그인은 모든 작업을 자체적으로 처리합니다.
Seahawk Media 에서 이와 유사한 기사를 더 찾아보세요 .
