Google Web Fonts 링크 또는 가져 오기를 포함합니까?

190

Google 웹 글꼴을 페이지에 포함시키는 기본 방법은 무엇입니까?

링크 태그를 통해?

<link href = 'http : //fonts.googleapis.com/css? family = Judson : 400,400italic, 700'rel = 'stylesheet'type = 'text / css'>

스타일 시트로 가져 오기를 통해?

@import url (http://fonts.googleapis.com/css?family=Kameron:400,700);

또는 웹 글꼴 로더를 사용하십시오

https://developers.google.com/webfonts/docs/webfont_loader

fonts webfonts google-webfonts

— 카조
소스

Google 글꼴을 사용하기 전에이 질문 을 읽고 싶을 수도 있습니다 . 특정 프로젝트에 따라 항상 현명한 선택은 아닙니다.

— Obmerk Kronen 2016 년

답변:

285

사례의 90 % 이상이 <link>태그를 원할 것 입니다. 일반적으로 @import파일을 가져올 때까지 포함 된 자원의로드를 지연시키기 때문에 규칙 을 피하려고합니다 . @import를 "평평하게하는"빌드 프로세스가있는 경우 웹 글꼴에 다른 문제가 발생합니다. : Google WebFonts와 같은 동적 공급자는 플랫폼 별 글꼴 버전을 제공하므로 단순히 콘텐츠를 인라인하면 일부 플랫폼에서 글꼴이 깨집니다.

이제 웹 글꼴 로더를 사용하는 이유는 무엇입니까? 글꼴로드 방법을 완전히 제어 해야하는 경우 대부분의 브라우저는 모든 CSS를 다운로드하여 적용 할 때까지 내용을 화면에 그리는 것을 연기합니다. "스타일이없는 내용의 플래시"문제를 피할 수 있습니다. 단점은 .. 내용이 보일 때까지 추가로 일시 정지하고 지연 될 수 있습니다. JS 로더를 사용하면 글꼴이 표시되는 방법과시기를 정의 할 수 있습니다. 예를 들어, 원본 내용이 화면에 그려진 후에 페이드 인 할 수도 있습니다.

다시 한 번, 90 %의 사례가 <link>태그입니다. 좋은 CDN을 사용하면 글꼴이 더 빠르고 다운되어 캐시에서 제공 될 것입니다.

자세한 내용과 Google 웹 글꼴에 대한 자세한 내용은이 GDL 비디오를 확인하십시오.

— 이 그리고 리크
소스

"파일을 가져올 때까지 포함 된 리소스의로드를 연기하기 때문에"-import를 사용해야하는 좋은 이유가 아닙니까? 일반적으로 글꼴이 깜빡이지 않도록 글꼴이로드 될 때까지 내용을보고 싶지 않기 때문에

— Alex

웹 글꼴 API는 HTML5 Canvas로 작업 할 때 매우 유용합니다. 텍스트를 그리기 전에로드가 완료되지 않은 글꼴은 사용할 수 없으며 글꼴이로드되면 자동으로 업데이트되지 않습니다. 관련하여, 예를 들어 게임에서 자산 로딩 진행 상황을 추적하기 위해 API가 필요하다.

— rvighne

이 정보는 Google 웹 글꼴 페이지에 있어야합니다. 그것은 당신에게 세 가지 옵션을 제시합니다-어떤 옵션을 언제 사용 해야하는지에 대한 유용한 힌트는 제공하지 않습니다.

— Gal

구글의 자신의 ' 시작하기 만 튜토리얼 사용'을 <link>것 같아요 그래서 그들은 무언의 방식으로 권장 하나, 방법

— 제임스 쿠싱

텍스트가 나타나기 전에 글꼴이로드되기 때문에 태그에도 추가 rel="preload"할 수 있습니다 <link>. 참조 3perf.com/blog/link-rels

— 엘리야 모의

<link>글꼴에 버전이 있기 때문에 Google 에서 제공하는 글꼴을 사용하지만 HTML5의 사전 연결 기능을 사용하여 브라우저에 TCP 연결을 열고 fonts.gstatic.com과 SSL을 미리 협상하도록 요청하십시오. 다음은 <head></head>태그 에 있어야하는 예입니다 .

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

— 마크 실리아 빈센트
소스

사전 연결이 예제의 스타일 시트 링크와 완전히 다른 도메인이라는 것이 맞습니까? fonts.gstatic.com대fonts.googleapis.com

— BadHorsie

@BadHorsie 그것의 요점입니다. fonts.googleapis.com의 스타일 시트에는 fonts.gstatic.com의 리소스에 대한 링크가 있습니다. 브라우저가 후자의 호스트에 대한 연결을 시작하여 스타일 시트에서 링크를 찾을 때 연결되거나 연결을 시작하도록 지시합니다.

— 마크 실리아 빈센트

SEO (검색 엔진 최적화) 및 성능이 염려 <link>되면 글꼴을 미리로드 할 수 있으므로 태그 를 사용하는 것이 좋습니다 .

예:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2" as="font" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2" as="font" crossorigin>
<style>
@font-face {
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
 font-family: 'Quicksand';
 font-style: normal;
 font-weight: 400;
 src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>

자세한 내용은 https://ashton.codes/preload-google-fonts-using-resource-hints/를 참조하십시오.

— 랍스터
소스