W tym link do Google Web Fonts lub import?

189

Jaki jest preferowany sposób dołączania czcionek internetowych Google do strony?

  1. przez tag link?

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

  2. poprzez import w arkuszu stylów?

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

  3. lub użyj modułu ładującego czcionki internetowe

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

fonts webfonts google-webfonts kajo
źródło
3
Możesz także przeczytać to pytanie przed użyciem czcionek Google. w zależności od konkretnego projektu - nie zawsze może to być mądry wybór.
Obmerk Kronen

Odpowiedzi:

285

Ponad 90% przypadków prawdopodobnie chcesz <link>tagu. Zasadniczo chcesz unikać @importreguł, ponieważ odraczają one ładowanie dołączonego zasobu, dopóki plik nie zostanie pobrany. A jeśli masz proces kompilacji, który „spłaszcza” import @, to tworzysz kolejny problem z czcionkami internetowymi : dostawcy dynamiczni, tacy jak Google WebFonts, obsługują wersje czcionek specyficzne dla platformy, więc jeśli po prostu wstawisz treść, na niektórych platformach skończysz z uszkodzonymi czcionkami.

Dlaczego miałbyś korzystać z internetowego modułu ładującego czcionki? Jeśli potrzebujesz pełnej kontroli nad sposobem ładowania czcionek. Większość przeglądarek odracza malowanie zawartości na ekranie, dopóki cały CSS nie zostanie pobrany i zastosowany - pozwala to uniknąć problemu „flashowania niestylizowanej zawartości”. Minusem jest to, że… możesz mieć dodatkową pauzę i opóźnienie, aż zawartość będzie widoczna. Za pomocą modułu ładującego JS możesz zdefiniować, w jaki sposób i kiedy czcionki będą widoczne. Na przykład możesz nawet je zanikać po namalowaniu oryginalnej zawartości na ekranie.

Po raz kolejny 90% ma <link>postać tagu: użyj dobrego CDN, a czcionki spadną szybko, a nawet bardziej prawdopodobne, że zostaną podane z pamięci podręcznej.

Aby uzyskać więcej informacji i dogłębnie zapoznać się z czcionkami internetowymi Google, zapoznaj się z tym filmem GDL

igrigorik
źródło
1
„ponieważ opóźniają ładowanie dołączonego zasobu, dopóki plik nie zostanie pobrany” - czy nie jest to dobry powód, aby użyć @import? Ponieważ zwykle nie chcesz widzieć zawartości, dopóki czcionka nie zostanie załadowana (aby uniknąć migotania czcionki)
Alex
2
Interfejs API czcionek internetowych jest bardzo przydatny podczas pracy z płótnem HTML5. Nie możesz użyć czcionki, która nie zakończyła się ładowanie przed narysowaniem z nią tekstu, i oczywiście po załadowaniu czcionki nie jest ona automatycznie aktualizowana. W związku z tym interfejs API jest potrzebny do śledzenia postępu ładowania zasobów, np. W grze.
rvighne
14
Informacje te powinny znajdować się na stronie czcionek internetowych Google. Przedstawia ci tylko trzy opcje - i nie daje żadnych pomocnych wskazówek, które z nich użyć i kiedy.
Gal
5
Samouczek Google „ Pierwsze kroki ” korzysta tylko z tej <link>metody, więc myślę, że to ta, którą polecają w sposób niewypowiedziany
James Cushing
2
Możesz także dodać rel="preload"do <link>znacznika, ponieważ wtedy czcionka zostanie załadowana przed pojawieniem się tekstu. Zobacz 3perf.com/blog/link-rels
Elijah Mock
3

Jeśli obawiasz się o SEO (Search Engine Optimization) i wydajność, dobrze jest użyć <link>tagu, ponieważ może on wstępnie załadować czcionkę.

Przykład:

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

Aby uzyskać więcej informacji, przeczytaj to: https://ashton.codes/preload-google-fonts-using-resource-hints/

Homar
źródło
2

Skorzystaj z <link>dostarczonej przez Google, ponieważ czcionka jest wersjonowana, ale tuż nad nią użyj funkcji wstępnego połączenia HTML5, aby poprosić przeglądarki o otwarcie połączenia TCP i wcześniejsze negocjowanie protokołu SSL z fonts.gstatic.com. Oto przykład, który oczywiście musi znajdować się w <head></head>tagu:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
Mark Cilia Vincenti
źródło
Czy to prawda, że ​​preconnect to zupełnie inna domena niż łącze do arkusza stylów w twoim przykładzie? fonts.gstatic.comkontrafonts.googleapis.com
BadHorsie
1
@BadHorsie o to właśnie chodzi. Arkusz stylów na fonts.googleapis.com zawiera link do zasobu na fonts.gstatic.com. Mówisz przeglądarce, aby zainicjowała połączenie z tym drugim hostem, aby nawiązał połączenie lub zaczął się łączyć, zanim znajdzie link w arkuszu stylów.
Mark Cilia Vincenti