Typografia ma kluczowe znaczenie dla wyglądu, marki, czytelności i przystępności. Czcionki internetowe umożliwiają wszystkie te korzyści: tekst można zaznaczać, przeszukiwać i powiększać oraz obsługiwać w wysokiej rozdzielczości, zapewniając spójne i wyraźne renderowanie tekstu niezależnie od rozmiaru ekranu i rozdzielczości. WebFonts ma kluczowe znaczenie dla dobrego wyglądu, wygody i wydajności.
Optymalizacja czcionek na stronę internetową to kluczowy element ogólnej strategii skuteczności. Każda czcionka to dodatkowy zasób i niektóre z nich mogą blokować renderowanie tekstu, jednak to, że strona korzysta z WebFonts, nie oznacza, że musi ona działać wolniej. Wręcz przeciwnie, zoptymalizowane czcionki w połączeniu z przemyślaną strategią ich wczytywania i umieszczania na stronie mogą pomóc zredukować całkowity rozmiar strony i skrócić czas jej renderowania.
Struktura czcionki internetowej
Czcionka internetowa to zbiór glifów, a każdy glif to kształt wektorowy opisujący literę lub symbol. W efekcie rozmiar konkretnego pliku czcionek określają 2 proste zmienne: złożoność ścieżek wektorowych poszczególnych glifów i liczba glifów w konkretnej czcionce. Na przykład Open Sans, jedna z najpopularniejszych czcionek WebFonts, zawiera 897 glifów, w tym znaki łacińskie, greckie i cyrylicy.
Wybierając czcionkę, zastanów się, które zestawy znaków są obsługiwane. Jeśli chcesz przetłumaczyć zawartość strony na wiele języków, użyj czcionki, która zapewni użytkownikom spójny wygląd. Na przykład rodzina czcionek Google Noto zapewnia obsługę wszystkich języków na świecie. Pamiętaj jednak, że całkowity rozmiar Noto z uwzględnieniem wszystkich języków skutkuje pobraniem co najmniej 1,1 GB pliku ZIP.
Z tego posta dowiesz się, jak zmniejszyć rozmiar przesyłanych czcionek internetowych.
Formaty czcionek internetowych
Obecnie w internecie są stosowane dwa zalecane formaty kontenerów czcionek:
Wersje WOFF i WOFF 2.0 są obsługiwane przez wszystkie nowoczesne przeglądarki.
- Udostępnianie wersji WOFF 2.0 w nowoczesnych przeglądarkach.
- Jeśli jest to absolutnie konieczne, np. jeśli nadal potrzebujesz obsługi przeglądarki Internet Explorer 11, użyj funkcji WOFF jako zastępcza.
- Możesz też zrezygnować z czcionek internetowych w starszych przeglądarkach i wrócić do czcionek systemowych. Ta funkcja może działać lepiej na starszych urządzeniach z większymi ograniczeniami.
- Ponieważ funkcje WOFF i WOFF w wersji 2.0 obejmują wszystkie funkcje, które są wciąż używane w nowoczesnych i starszych przeglądarkach, nie jest już konieczne stosowanie technologii EOT i TFT, co może skutkować dłuższym czasem pobierania czcionek internetowych.
Czcionki internetowe i kompresja
Zarówno WOFF, jak i WOFF 2.0 mają wbudowaną kompresję. Wewnętrzna kompresja WOFF 2.0 wykorzystuje format Brotli i zapewnia nawet o 30% lepszą kompresję niż WOFF. Więcej informacji znajdziesz w raporcie oceny WOFF 2.0.
Warto też zauważyć, że niektóre formaty czcionek zawierają dodatkowe metadane, np. wskazówki dotyczące czcionek i informacje o kerningu, które na niektórych platformach mogą nie być niezbędne, co umożliwia dalszą optymalizację rozmiaru pliku. Na przykład Google Fonts utrzymuje ponad 30 zoptymalizowanych wariantów każdej czcionki oraz automatycznie wykrywa i wyświetla optymalną wersję dla każdej platformy i przeglądarki.
Zdefiniuj rodzinę czcionek za pomocą @font-face
Reguła CSS @font-face umożliwia zdefiniowanie lokalizacji konkretnego zasobu czcionki, charakterystyki jego stylu oraz punktów kodowych Unicode, dla których ma być używany. Kombinacja takich deklaracji @font-face może posłużyć do utworzenia „rodziny czcionek”, której przeglądarka będzie używać do oceny, które zasoby czcionek należy pobrać i zastosować na bieżącej stronie.
Rozważ zmianę czcionki
Czcionki zmienne mogą znacznie zmniejszyć rozmiar pliku czcionek, jeśli potrzebujesz wielu wersji czcionki. Zamiast wczytywać style zwykłe i pogrubione oraz ich wersje kursywą, możesz wczytać pojedynczy plik ze wszystkimi informacjami. Pliki o zmiennych rozmiarach będą jednak większe niż w przypadku poszczególnych wariantów czcionek, ale mniejsze niż w przypadku kombinacji wielu wariantów. Zamiast 1 takiej czcionki lepiej jest najpierw wyświetlać najważniejsze wersje czcionki, a pozostałe pobrane później.
Zmienne czcionki są teraz obsługiwane przez wszystkie nowoczesne przeglądarki – więcej informacji znajdziesz w artykule Wprowadzenie do zmiennych czcionek w internecie.
Wybierz właściwy format
Każda deklaracja @font-face zawiera nazwę rodziny czcionek, która jest grupą logiczną wielu deklaracji, właściwości czcionki (np. styl), grubość i rozciąganie, a także deskryptor src, który określa priorytetową listę lokalizacji dla zasobu czcionki.
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome.woff2') format('woff2'),
/* Only serve WOFF if necessary. Otherwise,
WOFF 2.0 is fine by itself. */
url('/fonts/awesome.woff') format('woff');
}
@font-face {
font-family: 'Awesome Font';
font-style: italic;
font-weight: 400;
src: local('Awesome Font Italic'),
url('/fonts/awesome-i.woff2') format('woff2'),
url('/fonts/awesome-i.woff') format('woff');
}
Po pierwsze, pamiętaj, że podane wyżej przykłady definiują jedną rodzinę Awesome Font z 2 stylami (normalnymi i kursywą), z których każdy wskazuje inny zestaw zasobów czcionek. Z kolei każdy deskryptor src zawiera listę wariantów zasobów rozdzielonych przecinkami:
- Dyrektywa
local()umożliwia odwoływanie się do zainstalowanych lokalnie czcionek, ich wczytywanie i ich używanie. Jeśli użytkownik ma już zainstalowaną daną czcionkę w systemie, sieć całkowicie pomija sieć i jest szybsza. - Dyrektywa
url()umożliwia wczytywanie zewnętrznych czcionek i może zawierać opcjonalną wskazówkęformat()wskazującą format czcionki, do której odwołuje się podany adres URL.
Gdy przeglądarka ustali, że potrzebna jest czcionka, uruchomi iterację na podanej liście zasobów w określonej kolejności i spróbuje wczytać odpowiedni zasób. Na przykład w przykładzie powyżej:
- Przeglądarka sprawdza układ strony i określa, które wersje czcionek są wymagane do wyrenderowania określonego tekstu na stronie. Czcionki, które nie są częścią obiektowego modelu CSS (CSSOM) strony, nie są pobierane przez przeglądarkę, ponieważ nie są wymagane.
- W przypadku każdej wymaganej czcionki przeglądarka sprawdza, czy jest ona dostępna lokalnie.
- Jeśli czcionka nie jest dostępna lokalnie, przeglądarka powtarza definicje zewnętrzne:
- Jeśli wskazówka dotycząca formatu jest dostępna, przed rozpoczęciem pobierania przeglądarka sprawdza, czy ją obsługuje. Jeśli przeglądarka nie obsługuje podpowiedzi, przejdzie do następnej.
- Jeśli nie jest dostępna wskazówka dotycząca formatu, przeglądarka pobierze zasób.
Połączenie dyrektyw lokalnych i zewnętrznych z odpowiednimi wskazówkami dotyczącymi formatu pozwala określić wszystkie dostępne formaty czcionek, a przeglądarka zajmie się resztą. Przeglądarka określa, które zasoby są wymagane, i wybiera optymalny format.
Podrzędne ustawienie zakresu Unicode
Oprócz właściwości czcionki, takich jak styl, waga i rozciąganie, reguła @font-face umożliwia zdefiniowanie zestawu punktów kodowych Unicode obsługiwanych przez każdy zasób. Dzięki temu możesz podzielić dużą czcionkę Unicode na mniejsze podzbiory (np. podzbiory alfabetu łacińskiego, cyrylicy i greckiego) i pobrać tylko glify wymagane do wyrenderowania tekstu na danej stronie.
Deskryptor unicode-range umożliwia określenie listy wartości zakresów rozdzielonych przecinkami, z których każda może mieć jedną z 3 różnych postaci:
- Pojedynczy punkt kodowy (na przykład
U+416) - Zakres interwału (np.
U+400-4ff): wskazuje początkowe i końcowe punkty kodu zakresu. - Zakres symbolu wieloznacznego (np.
U+4??): liczba znaków?wskazuje dowolną cyfrę szesnastkową
Możesz na przykład podzielić rodzinę Awesome Font na podzbiory łacińskie i japońskie, z których każdy pobierany jest w razie potrzeby:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome-l.woff2') format('woff2');
/* Latin glyphs */
unicode-range: U+000-5FF;
}
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome-jp.woff2') format('woff2');
/* Japanese glyphs */
unicode-range: U+3000-9FFF, U+ff??;
}
Zastosowanie podzbiorów zakresów Unicode i osobnych plików dla każdej stylistycznej wersji czcionki pozwala zdefiniować rodzinę czcionek złożonych, które można pobrać szybciej i wydajniej. Użytkownicy pobierają tylko te warianty i podzbiory, ale nie są zmuszeni do pobierania podzbiorów, których mogą nigdy nie zobaczyć lub użyć na stronie.
Prawie wszystkie przeglądarki obsługują unicode-range. W celu zapewnienia zgodności ze starszymi przeglądarkami może być konieczne przejście na „ręczne podstawianie”. W takiej sytuacji musisz udostępnić jeden zasób czcionki, który zawiera wszystkie niezbędne podzbiory, a resztę ukryć przed przeglądarką. Jeśli na przykład strona zawiera wyłącznie znaki łacińskie, możesz usunąć inne glify i wyświetlać dany podzbiór jako samodzielny zasób.
- Określ, które podzbiory są potrzebne:
- Jeśli przeglądarka obsługuje podzakres zakresu Unicode, automatycznie wybierze właściwy podzbiór. Strona musi tylko udostępnić pliki podzbioru i określić odpowiednie zakresy Unicode w regułach
@font-face. - Jeśli przeglądarka nie obsługuje podzbioru dla zakresu Unicode, na stronie muszą być ukryte wszystkie niepotrzebne podzbiory, tzn. to programista musi określić wymagane podzbiory.
- Jeśli przeglądarka obsługuje podzakres zakresu Unicode, automatycznie wybierze właściwy podzbiór. Strona musi tylko udostępnić pliki podzbioru i określić odpowiednie zakresy Unicode w regułach
- Wygeneruj podzbiory czcionek:
- Użyj narzędzia pyftsubset typu open source do podzbioru i zoptymalizowania czcionek.
- Niektóre serwery czcionek, takie jak Google Font, domyślnie udostępniają podgrupy automatycznie.
- Niektóre usługi czcionek umożliwiają ręczne ustawianie podzbiorów za pomocą niestandardowych parametrów zapytania, które pozwalają ręcznie określić wymagany podzbiór swojej strony. Zapoznaj się z dokumentacją dostawcy czcionki.
Wybór i synteza czcionek
Każda rodzina czcionek może składać się z wielu wersji stylistycznych (standardowej, pogrubionej i kursywy) oraz różnych grubości każdego stylu. Każdy z nich może z kolei zawierać bardzo różne kształty glifów, na przykład różne odstępy, rozmiary lub całkowicie różne kształty.
Powyższy diagram przedstawia rodzinę czcionek, w której dostępne są 3 różne rodzaje pogrubionej grubości:
- 400 (standardowa).
- 700 (pogrubienie).
- 900 (bardzo pogrubiona).
Pozostałe warianty (oznaczone na szaro) są automatycznie mapowane przez przeglądarkę na najbliższy wariant.
Jeśli zostanie określona waga, dla której nie istnieje twarz, zostanie użyta twarz o zbliżonej wadze. Duże ciężary są przyporządkowane do twarzy o większej ciężarości lub lekkich.
Algorytm dopasowania czcionek CSS
Podobna logika obowiązuje w przypadku wariantów kursywy. Projektant czcionek określa, które warianty zostaną wygenerowane, a Ty decydujesz, których z nich użyjesz. Do każdego wariantu należy osobne pobranie pliku, dlatego warto zadbać o to, by liczba wariantów była jak najmniejsza. Możesz np. zdefiniować 2 pogrubione wersje dla rodziny Awesome Font:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome-l.woff2') format('woff2');
/* Latin glyphs */
unicode-range: U+000-5FF;
}
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 700;
src: local('Awesome Font'),
url('/fonts/awesome-l-700.woff2') format('woff2');
/* Latin glyphs */
unicode-range: U+000-5FF;
}
Powyższy przykład deklaruje rodzinę Awesome Font, która składa się z 2 zasobów obejmujących ten sam zestaw glifów łacińskich (U+000-5FF), ale oferuje 2 różne „wagi”: normalną (400) i pogrubienie (700). Co się jednak stanie, jeśli jedna z reguł CSS określa inną wagę czcionki lub ustawi właściwość font-style na italic?
- Jeśli dokładne dopasowanie czcionki nie jest dostępne, przeglądarka wstawia najbliższe dopasowanie.
- Jeśli nie znaleziono dopasowania stylistycznego (np. w przykładzie powyżej nie zadeklarowano wariantów kursywy), przeglądarka ssyntetyzuje własną wersję czcionki.
Powyższy przykład ilustruje różnicę między rzeczywistymi a wynikami czcionek syntetycznych w przypadku Open Sans. Wszystkie wersje syntetyczne są generowane na podstawie jednej czcionki o grubości 400. Jak widać, różnica w wynikach jest wyraźna. Nie podano szczegółów dotyczących generowania wariantów z pogrubioną i skośną czcionką. Dlatego wyniki różnią się w zależności od przeglądarki i w dużym stopniu zależą od czcionki.
Lista kontrolna optymalizacji rozmiaru czcionki na stronie internetowej
- Sprawdź i monitoruj wykorzystanie czcionek: nie korzystaj ze zbyt wielu czcionek na stronach i ogranicz liczbę wariantów tych już zastosowanych. Dzięki temu zapewnisz użytkownikom bardziej spójną i szybszą obsługę.
- W miarę możliwości unikaj starszych formatów: formaty EOT, TTF i WOFF są większe niż WOFF 2.0. Formaty EOT i TF są absolutnie niepotrzebne, więc funkcja WOFF może być akceptowalna, jeśli chcesz korzystać z Internet Explorera 11. Jeśli kierujesz reklamy tylko na nowoczesne przeglądarki, najprostszą i najskuteczniejszą opcją będzie użycie tylko wersji WOFF 2.0.
- Podziel zasoby czcionek na podgrupy: wiele czcionek można podzielić na podgrupy lub różne zakresy unicode, aby dostarczać tylko te glify, których wymaga dana strona. Pozwala to zmniejszyć rozmiar pliku i przyspieszyć pobieranie zasobu. Przy definiowaniu podzbiorów jednak pamiętaj o optymalizacji pod kątem ponownego użycia czcionek. Nie pobieraj na przykład różnych, ale nakładających się znaków na każdej stronie. Dobrą praktyką jest skupienie się na skrypcie, np. alfabet łaciński i cyrylica.
- Nadaj priorytet tagowi
local()na liściesrc: umieszczenie elementulocal('Font Name')na początku listysrcdaje pewność, że żądania HTTP nie będą wysyłane do czcionek, które są już zainstalowane. - Użyj Lighthouse, aby przetestować kompresję tekstu.
Wpływ na największe wyrenderowanie treści (LCP) i skumulowane przesunięcie układu (CLS)
W zależności od zawartości strony węzły tekstowe mogą być uznawane za największe wyrenderowanie treści (LCP). Dlatego warto zadbać o to, aby czcionki internetowe były jak najmniejsze. W tym celu postępuj zgodnie z zaleceniami podanymi w tym artykule. Dzięki temu użytkownicy zobaczą tekst na Twojej stronie jak najszybciej.
Jeśli niepokoi Cię, że mimo działań optymalizacyjnych tekst strony może się pojawić zbyt długo z powodu dużej czcionki internetowej, właściwość font-display ma wiele ustawień, które pomogą Ci uniknąć niewidocznego tekstu podczas pobierania czcionki. Użycie wartości swap może jednak spowodować znaczne przesunięcia układu, które mają wpływ na skumulowane przesunięcie układu (CLS) witryny. Jeśli to możliwe, użyj wartości optional lub fallback.
Jeśli używane przez Ciebie czcionki internetowe są kluczowe dla Twojej marki, a co za tym idzie – dbają o wygodę użytkowników. W takim przypadku warto rozważyć wstępne wczytywanie czcionek, aby przeglądarka mogła je łatwo wykorzystać. Może to skrócić zarówno okres wymiany, jeśli używasz font-display: swap, jak i okres blokowania, jeśli nie używasz font-display.