WordPress에서 로컬로 Google 글꼴을로드하는 방법 : GTmetrix, Pingdom 및 Google PageSpeed ​​Insights에있는 최적화 항목

03.06.2020
ปลั๊กอินแคช 'WordPress에서 로컬로 Google 글꼴을로드하는 방법 : GTmetrix, Pingdom 및 Google PageSpeed ​​Insights에있는 최적화 항목
0 11 мин.

귀하의 WordPress 사이트에 구글 폰트 오류 GTmetrix/핑돔, Google 글꼴을 로컬로로드하면 수정해야합니다.


일부 외부 리소스 및 스크립트를 제어 할 수 없으므로 압축, 축소 또는 최적화가 불가능합니다. 이것은 워드 프레스 속도에 심각한 영향을 줄 수 있습니다. 가장 일반적인 외부 리소스 중 하나는 Google Fonts입니다. WP Rocket 또는 WP Fastest Cache와 같은 캐시 플러그인을 이미 구성한 경우 등급 +로드 시간에 영향을 미치는 글꼴과 같은 외부 리소스를 인식하기 시작할 수 있습니다. 여기에서 Google Fonts를 로컬로로드 할 수 있습니다. 이를 통해 캐시 플러그인은 사용자 정의 글꼴과 관련된 모든 리소스를 압축 할 수 있습니다.

변경하기 전에 사이트 (또는 최소한 편집중인 파일)의 전체 백업을 수행하십시오..

Google- 글꼴 -GTmetrix

1 단계 : Google 글꼴 선택

이 예에서는 로보 토 폰트 두 가지 글꼴 가중치 (일반 (400) 및 굵게 (700)).

Google 글꼴 선택

더 적은 Google 글꼴 사용 – Google 글꼴을 최소로 유지하십시오 (글꼴이 적을수록 요청 수가 적음).

글꼴 가중치를 사용하여 선택하십시오 – 가중치의 수는로드 시간에도 영향을줍니다. 굵은 체 만 필요한 경우 다른 가중치를 선택 취소하여 Google Fonts에 필요한 크기 만로드하십시오..

2 단계 : 글꼴 다운로드

준비되면 글꼴을 다운로드하십시오. Google은 모든 글꼴 두께를 자동으로 다운로드하므로이 단계에서는 글꼴 무게를 선택할 필요가 없으며 대신 3 단계에서 필요합니다..

Google 글꼴 다운로드

3 단계 : 글꼴을 웹 글꼴로 변환

다음으로 이러한 글꼴 파일 (.ttf)을 웹 글꼴 파일로 변환합니다. 사용하겠습니다 트랜스 폰터. 그들의 사이트로 이동하여 클릭하십시오 폰트 추가, 그때 웹 사이트에서 사용할 글꼴 유형 만 업로드. 사용하고 있습니다 Roboto-Regular.ttfRoboto-Bold.ttf 그래서 나는 규칙적이고 대담한 무게를 가지고 있습니다. WOFF 및 WOFF2는 모든 주요 브라우저를 포함하므로 설정을 기본값으로 유지하십시오. 이제 변환을 클릭하십시오.

Transfonter-Google-Font-Conversion

웹 사이트에서 사용할 글꼴 유형 만 선택하십시오…

Google 글꼴 변환 선택

4 단계 : 변환 된 글꼴 파일 다운로드

글꼴이 변환되면 다운로드 할 수 있습니다. zip 파일에는 각 글꼴에 WOFF 및 WOFF2 형식이 포함됩니다 (2 개의 글꼴을 다운로드 했으므로 총 4 개의 글꼴 파일이 있음)..

WOFF-Google- 글꼴 변환

5 단계 : 글꼴 파일을 WordPress 파일로 업로드

FTP 또는 cPanel을 통해 웹 글꼴 파일을 업로드하십시오. wp- 콘텐츠 / 업로드 테마 및 핵심 업데이트가 폴더를 재정의하지 않습니다. “fonts”폴더를 만들어 다른 파일과 분리하기 위해 업로드했습니다. 파일이 성공적으로 업로드되었고 올바른 링크가 있는지 확인하려면 브라우저에서 링크를 열면 글꼴 다운로드가 시작됩니다.

예:

  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff2

바꾸다 yourwebsite.com 자신의 웹 사이트 (및 SSL을 사용하는 경우 HTTPS)로. 이상적으로, 4 개의 링크를 모두 테스트하고 URL이 올바른지 확인하십시오 (또한 어딘가에 저장해야합니다)..

6 단계 : CSS에 사용자 정의 글꼴 추가

다음으로 다운로드 한 zip 파일 안에 CSS를 추가합니다. stylesheet.css. 글꼴을 기존 CSS와 연결하여 사용할 준비가 된 CSS 코드입니다..

CSS 코드를 배치 할 위치는 주관적이지만 외부 스타일 시트 또는 WordPress를 사용할 수 있습니다. wp_enqueue_style functions.php의 함수 또는 시작시 style.css 파일 (또는 custom.css 당신이 하나 있다면). 테마의 기본 style.css 파일에 붙여 넣을 것입니다. 코드를 스타일 시트에 복사 / 붙여 넣기하고 상대 URL을 절대 URL로 변경하십시오..

stylesheet.css의 기본 URL :
src : url ( ‘Roboto-Bold.woff2’) 형식 ( ‘woff2’),
url ( ‘Roboto-Bold.woff’) 형식 ( ‘woff’);

이것을 다음과 같이 변경하십시오.
src : url ( ‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2 ‘) 형식 (‘woff2 ‘),
url ( ‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff ‘) 형식 (‘woff ‘);

기본적으로 글꼴 파일 이름 앞에 폴더 URL을 포함하십시오..

이것은 선택 사항이지만 원하는 경우 기존 HTML에서 글꼴을 쉽게 사용할 수 있도록 사용자 정의 클래스를 만듭니다. 여기에 우리는 우리의 클래스를 명명 roboto_fontroboto_bold_font. 이렇게하려면 위 코드 뒤에있는 style.css 파일에 다음을 추가하십시오.

.roboto_font {

폰트 패밀리 : “Roboto”, “Arial”, sans-serif;

}

.roboto_bold_font {

폰트 패밀리 : “Roboto”, “Arial”, sans-serif;

글꼴 무게 : 굵게;

}

7 단계 : 글꼴 테스트

이제 테스트 페이지를 만들고 다음 코드를 텍스트 에디터

테스팅

맞춤 글꼴 테스트

맞춤 글꼴 테스트

구글 폰트 테스트

페이지를 미리 봅니다. 제대로했다면 새로운 사용자 정의 글꼴이 보일 것입니다! 첫 번째 제목은 웹 사이트의 기본 글꼴이고 두 번째 및 세 번째는 추가 한 Google Fonts 글꼴입니다.

로컬 Google- 글꼴

8 단계 : 기본 글꼴 설정

이 글꼴을 웹 사이트의 기본 글꼴로 설정하려면 다음 CSS를 style.css 파일에 추가하십시오.

신체 {

폰트 패밀리 : “Roboto”, “Arial”, sans-serif;

}

조심해! 사용자 정의 글꼴이 이미있는 경우 올바르게 표시되지 않을 수 있으며 기존 글꼴 모음 속성을 디버깅하거나 편집하고 대신이 글꼴로 바꾸어야합니다..

9 단계 : 항상 글꼴 대체가 있음

Google Font를 글꼴 모음으로 적용하는 것은 좋지 않습니다. 대신 Arial, Times New Roman과 같은 일반적인 글꼴을 포함하여 여러 글꼴을 지정해야 글꼴이로드되지 않거나로드하는 데 시간이 오래 걸리는 경우에만 브라우저가 이러한 글꼴로 대체 될 수 있습니다..

폴백없이 :
글꼴 모음 : ‘Roboto’;

대체 글꼴 사용 :
글꼴 모음 : ‘Roboto’, 아리아, 산세 리프;

이제 Google 글꼴을로드하지 못하면 브라우저가 Arial 글꼴 또는 시스템의 기본 sans-serif 글꼴 유형으로 바뀌고 글꼴 렌더링에 문제가 발생하지 않습니다..

GTmetrix에서 웹 사이트 재시험

Google Fonts 오류가 표시되지 않아야합니다…

New-GTmetrix-Report.png

질문이 있습니까? 나에게 라인을 드롭.

자주 묻는 질문

&# x2705; Google Fonts 속도를 높이는 방법?

Google Fonts를 결합하여 로컬에서 호스팅하고 사전 연결 및 지사를 사용하면로드 시간을 개선 할 수 있습니다. GTmetrix Waterfall을 확인하여 글꼴의 벤치 마크를 얻은 다음 최적화 후 다시 테스트하십시오..

&# x2705; 웹 글꼴 파일을 글꼴로 변환하는 방법?

우리는 Transfonter를 사용합니다.

&# x2705; Elementor 사용자 정의 글꼴은 어떻습니까?

Elementor Custom Fonts는 로컬로 Google Fonts를 호스팅 할 수 있으며 Elementor Pro에 내장되어 있습니다. 이것을 사용하여 글꼴 파일을 업로드 할 수 있습니다.

&# x2705; 글꼴 최적화에 도움이되는 플러그인?

WP Rocket, OMGF, Autoptimize 및 Perfmatters는 모두 글꼴 최적화를 도와줍니다..

&# x2705; 글꼴 프리 페치 및 사전 연결은 어떻습니까?

브라우저에서 글꼴을 더 잘 예측할 수 있도록하여 글꼴 속도를 높일 수 있습니다. Kinsta의 Perfmatters 플러그인을 사용하여 글꼴을 프리 페치 및 사전 연결하지만 WP Rocket 또는 Pre Party Resource Hints 플러그인을 사용할 수도 있습니다..

건배,
우 사마

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector