self hosting fonts 다운로드 - self hosting fonts 소스 코드 다운로드

self hosting fonts

글꼴 다운로드

1.0.0

다운로드

퍼머 링크
/index.html

웹 사이트 (GIT 페이지)

자조 글꼴

우리 중 많은 사람들이 CDN을 통해 Google 글꼴을 사용합니다. 그러나 독일은 이것이 GDPR을 위반하여 사이트 소유자가 소송에 열려 있다고 결정했습니다.

우리는 여전히 Google 글꼴을 표시 할 수 있습니다.

그런 다음 Google 글꼴에서 글꼴 (변형)을 다운로드합니다
웹 글꼴 생성기를 사용하여 .ttf 파일을 .woff 및 .woff2로 변환 한 다음
CSS에서 @font-face 사용
HTML의 글꼴을 사전로드합니다.

참고 :이 페이지는 Google 글꼴에 중점을 두지 만 다른 종류의 웹 글꼴에는 동일한 원칙이 적용됩니다.

웹 글꼴 생성기

글꼴 다람쥐 이것은 "로봇"에서 효과가 있었지만 "Lato"및 "Open Sans"의 정적 글꼴 버전으로 실패했습니다.

Creative Fabrica 나는 이것을 "Lato"및 "Open Sans"정적 파일에 사용했습니다. 한 번에 하나씩 각 변형을 업로드해야했습니다.

HTML

HTML 페이지의 헤드에 글꼴을 사전로드하는 것이 좋습니다. 이는 글꼴의 전달 속도를 높이고 Google의 CWV (Core Web Vitals) 성능을 향상시켜야합니다. 그러나이 작업을 수행 한 후 경고를 보았습니다 (아래 테스트/Firefox 및 Firefox Developer Edition 참조).

 < head >
  < link
    rel =" preload "
    href =" roboto-light-webfont.woff2 "
    as =" font "
    type =" font/woff2 "
    crossorigin =" anonymous "
  />
  < link
    rel =" preload "
    href =" roboto-regular-webfont.woff2 "
    as =" font "
    type =" font/woff2 "
    crossorigin =" anonymous "
  />
  < link
    rel =" preload "
    href =" roboto-medium-webfont.woff2 "
    as =" font "
    type =" font/woff2 "
    crossorigin =" anonymous "
  />
  ...
  <!-- CSS file comes after preload -->
</ head >

CSS

 @font-face {
  font-family : "Roboto" ;
  font-weight : 300 ;
  src : url ( "roboto-light-webfont.woff2" ) format ( "woff2" ) , url ( "roboto-light-webfont.woff" )
      format ( "woff" );
}
/** Regular: 400 **/
@font-face {
  font-family : "Roboto" ;
  font-weight : 400 ;
  src : url ( "roboto-regular-webfont.woff2" ) format ( "woff2" ) , url ( "roboto-regular-webfont.woff" )
      format ( "woff" );
}
/** Medium: 500 **/
@font-face {
  font-family : "Roboto" ;
  font-weight : 500 ;
  src : url ( "roboto-medium-webfont.woff2" ) format ( "woff2" ) , url ( "roboto-medium-webfont.woff" )
      format ( "woff" );
}

테스트

테스트 :
Windows 10
크롬
Firefox, Firefox Developer Edition
- 메모 . 이 두 브라우저의 콘솔에 경고가 표시되었습니다. 경고는 두 가지 유형입니다.
1. 페이지가 완전히로드되기 전에 레이아웃이 강요되었습니다. 스타일 시트가 아직로드되지 않으면 이로 인해 끊임없는 콘텐츠가 플래시 될 수 있습니다.
2. 다른 경고는 각 글꼴 변형에 대한 것이 었으며 "Lato"에 대한 약 10 초 후에 발생했습니다.
- “https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-leight-webfont.woff2”의 리소스는 링크 사전로드로 사전로드 된 몇 초 안에 사용되지 않았습니다. 예압 태그의 모든 속성이 올바르게 설정되어 있는지 확인하십시오.
- "https://chrisnajman.github.io/self-hosting-fonts/fonts/lato-regular-webfont.woff2"의 리소스는 링크 예압으로 사전로드 된 몇 초 안에 사용되지 않았습니다. 예압 태그의 모든 속성이 올바르게 설정되어 있는지 확인하십시오.
- “https://chrisnajman.github.io/self-hosting-fonts/fonts/lato/lato-bold-webfont.woff2”의 리소스는 링크 사전로드로 사전로드 된 몇 초 안에 사용되지 않았습니다. 예압 태그의 모든 속성이 올바르게 설정되어 있는지 확인하십시오.
- 스택 오버 플로우에 대한 토론과 검색은 이해할 수있는 답변을 얻지 못했습니다. 그러나 스택 오버 플로우에 직접 질문을 게시했으며 답변을 받으면 새로운 정보 로이 readme.md를 업데이트하겠습니다.
Microsoft Edge