Własne czcionki

Czcionki własne to pliki z czcionkami, które są wyświetlane z Twoich serwerów, a nie z zewnętrznych serwerów czcionek (np. Google Fonts).

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, aby jak najszybciej wyświetlić własną czcionkę: użycie w tekście deklaracji czcionki i format WOFF2.

  • Wbudowane deklaracje czcionek: wbudowanie deklaracji @font-face i font-family w główny dokument, 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

  • WOFF2 spośród nowoczesnych czcionek WOFF2 to najnowsze, najczęściej obsługujące przeglądarki i najlepsza kompresja. Ponieważ korzysta z formatu Brotli, WOFF2 kompresuje o 30% lepiej niż WOFF.

Aby jeszcze bardziej zwiększyć wydajność, rozważ zastosowanie podrzędnego ustawienia czcionek. Tworzenie podzbiorów czcionek to metoda dzielenia pliku czcionek na mniejsze podzbiory – zazwyczaj w celu usunięcia nieużywanych glifów. Może to znacznie zmniejszyć rozmiar pliku czcionki. Do tworzenia podzbiorów czcionek należą: fontkit, subfont i glyphhanger.

Więcej informacji o sprawdzonych metodach dotyczących własnych czcionek znajdziesz w artykule Korzystanie z czcionek hostowanych samodzielnie.

Przykład:

HTML

<head>
    <style>
        @font-face {
            font-family: 'Google Sans';
            src: url("Google Sans.woff2") format('woff2');
            font-display: swap;
        }
        body {
            font-family: system-ui;
            font-size: 1em;
        }
        h1 {
            font-family: 'Google Sans', sans-serif;
            font-size: 3em;
        }
    </style>
</head>