Web Fonts - czcionki godne faraona

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)

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>

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

Metoda 2: @import w CSS

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}

@font-face - własne czcionki

Jeśli masz własną czcionkę, użyj reguly

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

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

Właściwość

font-display

kontroluje, co się dzieje, gdy czcionka się ładuje:

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

swap - natychmiast wyswietl tekst czcionka systemową, podmień po załadowaniu
block - ukryj tekst do momentu załadowania czcionki (max 3s)
fallback - krotki block (100ms), potem swap
optional - jeśli czcionka nie załaduje się szybko, używaj systemowej

Preconnect i preload - przyspieszenie ładowania

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>

Stos czcionek (Font Stack)

Zawsze definiuj czcionki zapasowe na wypadek, gdyby główna czcionka nie załadowała się:

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

Ogólna zasada: zawsze kończ stos czcionek jedną z pięciu generycznych rodzin:

serif

sans-serif

monospace

cursive

lub

fantasy

. Dzięki temu przeglądarka zawsze będzie miała czcionkę zapasową do użycia.

Optymalizacja Web Fonts

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

1. Ładuj tylko potrzebne grubości

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');

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

3. Używaj zmiennych czcionek (Variable Fonts)

Nowoczesne czcionki zmienne pozwalają mieć wszystkie grubości w jednym pliku:

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}

Typografia - kilka dodatkowych właściwości

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}

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.

Przejdź do CodeWorlds→