Czcionki innych firm

Niezwykle ważne jest szybkie dostarczanie czcionek: szybsze dostarczanie czcionek nie tylko oznacza, że tekst będzie szybciej widoczny dla użytkownika, ale również duży wpływ na to, czy czcionka powoduje przesuwanie układu. Jeśli nie można dostarczyć czcionki z wyprzedzeniem, zazwyczaj przy wymianie czcionki następuje przesunięcie układu. Rozmiar tego przesunięcia układu może się różnić w zależności od tego, jak bardzo czcionka zastępcza pasuje do czcionki internetowej. Aby zobaczyć, jak działa to zjawisko, obejrzyj prezentację i porównaj zmiany układu, które zachodzą przy szybkim i wolnym połączeniu.

Poniższy przykład łączy 2 techniki wydajności, które umożliwiają jak najszybsze wczytywanie czcionki innej firmy: użycie wbudowanych deklaracji czcionek i wskazówki dotyczące zasobów preconnect. Chociaż ten fragment kodu pokazuje, jak wczytywać czcionki z Google Fonts, techniki te mają też zastosowanie do zewnętrznych dostawców czcionek.

  • Deklaracje czcionek w tekście: wbudowanie deklaracji font-family do głównego dokumentu (zamiast umieszczania tych informacji w zewnętrznym arkuszu stylów) pozwala przeglądarce określić, które pliki czcionek będą używane na stronie, bez konieczności oczekiwania na pobranie osobnego pliku arkusza stylów. To ważne, ponieważ przeglądarki nie pobierają plików czcionek, gdy nie wiedzą, że są one używane na stronie. W większości sytuacji do wczytywania czcionek lepiej jest używać deklaracji dotyczącej czcionek wbudowanych.preload

  • Połącz wstępnie: zalecanym sposobem ładowania czcionek Google Fonts jest używanie tagu <link> w połączeniu ze wskazówkami dotyczącymi zasobów preconnect. Wskazówka zasobu preconnect nawiązuje wcześniejsze połączenie ze źródłem zewnętrznym. W poniższym fragmencie kodu pierwsza instrukcja dotycząca zasobów konfiguruje połączenie do pobrania arkusza stylów czcionek, a druga – połączenie do pobierania plików czcionek.

Przykład:

HTML

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: system-ui;
            font-size: 1em;
        }
        h1 {
            font-family: 'Zen Tokyo Zoo', sans-serif;
            font-size: 3em;
        }
    </style>
</head>