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

Program / 글쓴이

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

  1. 링크 태그를 통해?

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

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

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

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

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

답변

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

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

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

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

답변

<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">

답변

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/를 참조하십시오.

답변