Web Fonts - czcionki godne faraona

Nagłówki Twojej strony mają wyglądać jak kamienne inskrypcje. Otwierasz ją jednak na komputerze znajomego i widzisz zwykły, systemowy krój, bo wybranej czcionki nie ma na jego dysku. Przeglądarka użyje tylko tych czcionek, które zna - chyba że dostarczysz je razem ze stroną. Hieroglify w Starożytnym Egipcie miały swój unikalny styl. Tak samo Twoja strona internetowa może użyć niestandardowych czcionek dzięki Web Fonts. Domyślne czcionki systemowe są ograniczone, ale dzięki Google Fonts i regule @font-face możesz używać tysięcy różnych krojów pisma.

Google Fonts - biblioteka czcionek

Google Fonts to darmowa biblioteka ponad 1500 czcionek. Aby użyć czcionki z Google Fonts:

Metoda 1: Link w HTML (najprostsza)

Wybierasz krój na fonts.google.com, a serwis podaje gotowe linki do wklejenia w <head> - najpierw połączenia wstępne, potem arkusz z czcionką:

1<head>
2  <!-- Dodaj link do Google Fonts -->
3  <link rel="preconnect" href="https://fonts.googleapis.com">
4  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
5  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap"
6        rel="stylesheet">
7</head>

Adres w trzecim linku mówi, czego chcesz: krój family=Cinzel, grubości 400 i 700 oraz display=swap. Sam link niczego jednak nie zmienia na stronie - czcionkę trzeba jeszcze wskazać w CSS:

1/* Użyj czcionki w CSS */
2h1 {
3  font-family: 'Cinzel', serif;
4  font-weight: 700;
5}

Nazwę kroju piszesz w cudzysłowie, a po przecinku podajesz rodzinę zapasową. Kolejność kroków jest więc zawsze taka: preconnect, link z czcionką i dopiero font-family w CSS.

Metoda 2: @import w CSS

Tę samą czcionkę możesz też wczytać prosto z pliku CSS regułą @import, która musi stać na samej górze arkusza:

1/* Na początku pliku CSS */
2@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');
3
4body {
5  font-family: 'Cinzel', serif;
6}

To działa, ale wolniej: przeglądarka dowiaduje się o czcionce dopiero po pobraniu Twojego arkusza. Dlatego polecam metodę z <link>.

@font-face - własne czcionki

Jeśli masz własny plik czcionki, na przykład kupiony krój, zarejestruj go w arkuszu regułą @font-face:

1@font-face {
2  font-family: 'EgyptianFont';
3  src: url('/fonts/egyptian.woff2') format('woff2'),
4       url('/fonts/egyptian.woff') format('woff');
5  font-weight: 400;
6  font-style: normal;
7  font-display: swap;
8}
9
10h1 {
11  font-family: 'EgyptianFont', serif;
12}

font-family nadaje czcionce nazwę do użycia w CSS, a src wymienia pliki od najlepszego formatu - przeglądarka weźmie pierwszy obsługiwany. Czcionka z własnego serwera nie przekazuje też adresów IP odwiedzających do Google, co w UE bywa ważne ze względu na RODO.

Formaty czcionek:

• WOFF2 - najlepsza kompresja, wspierany przez nowoczesne przeglądarki
• WOFF - szersze wsparcie, nieco większy rozmiar
• TTF/OTF - tradycyjne formaty, bez kompresji webowej

font-display: swap

Czcionka z sieci zawsze dociera z opóźnieniem. Właściwość font-display decyduje, co przeglądarka pokaże, zanim plik się załaduje:

1@font-face {
2  font-family: 'MojaFont';
3  src: url('/fonts/font.woff2') format('woff2');
4  /* swap: pokaż tekst systemową czcionką, zamień po załadowaniu */
5  font-display: swap;
6}

• swap - od razu wyświetl tekst czcionką zapasową, podmień po załadowaniu
• block - ukryj tekst na krótko (zwykle do ok. 3 s), czekając na czcionkę
• fallback - bardzo krótki block (ok. 100 ms), potem ok. 3 s na podmianę, a jeśli czcionka nie zdąży, zostaje zapasowa
• optional - jeśli czcionka nie załaduje się błyskawicznie, zostań przy zapasowej

swap to najbezpieczniejszy wybór dla treści: tekst da się czytać od pierwszej chwili, a zamiana kroju to tylko krótkie mrugnięcie.

Preconnect i preload - przyspieszenie ładowania

Gdy wiesz, że czcionka na pewno będzie potrzebna, możesz uprzedzić przeglądarkę dwiema wskazówkami w <head>:

1<head>
2  <!-- Preconnect - nawiąż połączenie z serwerem wcześniej -->
3  <link rel="preconnect" href="https://fonts.googleapis.com">
4  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
5
6  <!-- Preload - zacznij pobierać czcionkę jak najszybciej -->
7  <link rel="preload" as="font" type="font/woff2"
8        href="/fonts/egyptian.woff2" crossorigin>
9</head>

preconnect tylko otwiera połączenie z serwerem, a preload od razu pobiera konkretny plik. Przy czcionkach crossorigin jest potrzebny nawet dla plików z własnego serwera - bez niego przeglądarka pobierze plik dwa razy.

Stos czcionek (Font Stack)

Zawsze definiuj czcionki zapasowe na wypadek, gdyby główna czcionka nie załadowała się. Przeglądarka sprawdza listę od lewej i bierze pierwszą dostępną:

1body {
2  /* Kolejność: preferowana -> zapasowa -> generyczna */
3  font-family: 'Cinzel', 'Georgia', 'Times New Roman', serif;
4}

Ogólna zasada: zawsze kończ stos czcionek rodziną generyczną. Klasyczna piątka to serif, sans-serif, monospace, cursive i fantasy, a nowsze specyfikacje dodały m.in. system-ui. Dzięki temu przeglądarka zawsze będzie miała czcionkę zapasową. Dla tekstu bezszeryfowego typowy stos to Arial, Helvetica, sans-serif, a dla kodu 'Courier New', monospace.

Optymalizacja Web Fonts

Czcionki webowe mogą znacząco wpływać na wydajność strony. Oto kilka wskazówek optymalizacyjnych:

1. Ładuj tylko potrzebne grubości

Każda zamówiona grubość to dodatkowe dane do pobrania, więc zamawiaj tylko te, których faktycznie używasz:

1/* ŹLE - ładujesz wszystkie grubości */
2@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&display=swap');
3
4/* DOBRZE - ładujesz tylko te, których używasz */
5@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');

Wygląd strony się nie zmienia, a przeglądarka ma mniej do pobrania - zwłaszcza przy klasycznych czcionkach, gdzie każda grubość to osobny plik.

2. Ładuj tylko potrzebne znaki (subsetting)

Jeśli strona jest tylko po polsku, nie musisz ładować znaków chińskich czy arabskich:

1<!-- Załaduj tylko łacińskie znaki z polskimi diakrytykami -->
2<link href="https://fonts.googleapis.com/css2?family=Cinzel&subset=latin-ext&display=swap"
3      rel="stylesheet">

Litery ą, ę czy ł należą do zestawu latin-ext, kluczowego na polskiej stronie. W praktyce Google Fonts i tak dzieli czcionkę na podzbiory za pomocą unicode-range, więc przeglądarka pobiera tylko pliki ze znakami, które występują na stronie.

3. Używaj zmiennych czcionek (Variable Fonts)

Nowoczesne czcionki zmienne (variable fonts) pozwalają mieć wszystkie grubości w jednym pliku zamiast w kilku osobnych:

1@font-face {
2  font-family: 'CinzelVariable';
3  src: url('/fonts/cinzel-variable.woff2') format('woff2');
4  font-weight: 100 900; /* Zakres grubości */
5  font-display: swap;
6}
7
8h1 {
9  font-family: 'CinzelVariable', serif;
10  font-weight: 650; /* Dowolna wartość z zakresu! */
11}

Zakres 100 900 mówi przeglądarce, jakie grubości zawiera plik, a w regułach możesz użyć dowolnej wartości pośredniej, np. 650.

Typografia - kilka dodatkowych właściwości

Sama czcionka to nie wszystko. Czytelność zależy też od odstępów, które znasz z lekcji o dostępnej typografii:

1p {
2  /* Odstęp między literami - jak hieroglify w równych odstępach */
3  letter-spacing: 0.05em;
4
5  /* Odstęp między wyrazami */
6  word-spacing: 0.1em;
7
8  /* Wysokość linii - czytelność tekstu */
9  line-height: 1.6;
10
11  /* Wcięcie pierwszej linii akapitu */
12  text-indent: 2em;
13}

Odstępy w jednostkach em skalują się razem z czcionką, line-height bez jednostki działa jak mnożnik jej rozmiaru, a text-indent wcina pierwszą linię akapitu.

Tak jak hieroglify w starożytnym Egipcie miały swój unikalny, rozpoznawalny styl, tak dobrze dobrana czcionka webowa nadaje Twojej stronie charakter i profesjonalizm. Moja rada: dwie rodziny na stronę wystarczą - ozdobna do nagłówków i czytelna do treści. W następnej lekcji opublikujesz stronę w internecie.

Praktyka

W edytorze poniżej porównasz Cinzel i Lorę z czcionką systemową - sprawdź w panelu Network, które pliki się pobierają:

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Web Fonts - Czcionki</title>
7    <link rel="preconnect" href="https://fonts.googleapis.com">
8    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Lora:ital,wght@0,400;0,700;1,400&display=swap"
10          rel="stylesheet">
11    <link rel="stylesheet" href="style.css">
12</head>
13<body>
14    <h1>Web Fonts w praktyce</h1>
15
16    <section>
17        <h2>Czcionka Cinzel (Google Fonts)</h2>
18        <p class="cinzel-demo">Ten tekst uzywa czcionki Cinzel -
19           elegancki kroj inspirowany klasycznymi napisami.</p>
20        <p class="cinzel-bold">Wersja pogrubiona (font-weight: 700)</p>
21    </section>
22
23    <section>
24        <h2>Czcionka Lora (Google Fonts)</h2>
25        <p class="lora-demo">Ten tekst uzywa czcionki Lora -
26           nowoczesna czcionka szeryfowa, idealna do dluzszych tekstow.</p>
27        <p class="lora-italic">Wersja kursywa (font-style: italic)</p>
28    </section>
29
30    <section>
31        <h2>Font Stack - czcionki zapasowe</h2>
32        <p class="stack-demo">
33            font-family: 'Cinzel', 'Georgia', 'Times New Roman', serif;
34        </p>
35        <p>Jesli Cinzel nie zaladuje sie, przegladarka uzyje Georgia,
36           potem Times New Roman, a na koncu domyslnej czcionki serif.</p>
37    </section>
38
39    <section>
40        <h2>Porownanie czcionek</h2>
41        <p class="font-system">Czcionka systemowa (Georgia)</p>
42        <p class="font-cinzel">Czcionka Cinzel (Google Fonts)</p>
43        <p class="font-lora">Czcionka Lora (Google Fonts)</p>
44    </section>
45</body>
46</html>

Pamiętaj: czcionka to charakter pisma skryby - zamów tylko to, czego potrzebujesz, i zawsze zostaw zapasowy krój na wypadek burzy piaskowej.