CodeWorlds
Reguła CSSReguły @

@font-face

Rejestruje krój pisma pod wybraną nazwą, której potem używasz w font-family. Pozwala korzystać z fontów z plików własnej strony.

Na tej stronie

Przykład

#
CSS
@font-face {
  font-family: "Lora";
  src: url("/fonts/lora-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("/fonts/lora-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Lora", Georgia, serif;
}

Pliki leżą w katalogu /fonts na Twoim serwerze. Ten przykład nie ma podglądu, bo w ramce takich plików nie ma. Działające warianty z fontami systemowymi znajdziesz niżej, w sekcji z deskryptorami.

Definicja i zastosowanie

#

Reguła @font-face mówi przeglądarce: pod tą nazwą kryje się taki plik z fontem. Sama niczego na stronie nie zmienia. Dopiero gdy któryś element ma tę nazwę w font-family, przeglądarka pobiera plik i rysuje nim tekst, więc nieużywane fonty nie obciążają strony.

Najważniejsze są dwa deskryptory: font-family, czyli nazwa, którą sam wymyślasz, i src, czyli lista źródeł. Przeglądarka sprawdza źródła po kolei i bierze pierwsze, z którego potrafi skorzystać: local() szuka fontu zainstalowanego w systemie, a url() wskazuje plik na serwerze, najlepiej w formacie WOFF2, który jest najmocniej skompresowany.

Jedna reguła opisuje jeden wariant kroju. Jeśli masz osobne pliki dla wersji zwykłej, pogrubionej i pochylonej, piszesz kilka reguł z tą samą nazwą i różnymi font-weight oraz font-style. Przeglądarka sama wybierze właściwy plik dla <strong> czy <em>, a gdy wariantu brakuje, podrobi go, sztucznie pogrubiając lub pochylając litery.

Deskryptor font-display decyduje, co widać, zanim plik się pobierze. Wartość swap od razu pokazuje tekst fontem zapasowym i podmienia go po załadowaniu, więc treść nie znika. Dlatego w font-family zawsze warto podać dobry font zapasowy, np. "Lora", Georgia, serif.

Składnia

#
Składnia
@font-face {
  font-family: "Nazwa";
  src: local("Font systemowy"), url("/fonts/plik.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Deskryptory

#

  • font-family

    "Papirus"

    Nazwa kroju, pod którą będziesz go używać w zwykłej właściwości font-family. Wymyślasz ją sam: tu „Papirus” to po prostu Georgia pod nowym imieniem.

  • src

    local(), url()

    Lista źródeł sprawdzanych po kolei. Pierwszego fontu nie ma w systemie, więc przeglądarka bierze następny, Courier New. W prawdziwym projekcie na liście stoi zwykle url() z plikiem WOFF2.

  • font-weight

    400, 700

    Mówi, jaką grubość ma plik. Tu wersja 700 celowo wskazuje inny krój, żeby było widać, że pogrubiony fragment w <strong> pochodzi z drugiej reguły. W prawdziwym projekcie oba pliki należą do tej samej rodziny.

  • font-style

    normal, italic

    Oznacza plik z kursywą. Fragment w <em> korzysta z drugiej reguły, a pogrubienie, dla którego nie ma osobnego pliku, przeglądarka podrabia z wersji zwykłej.

  • font-display

    swap

    Decyduje, co pokazać, zanim font się wczyta. swap od razu wyświetla tekst fontem zapasowym, a optional użyje nowego fontu tylko wtedy, gdy wczyta się niemal natychmiast. Font lokalny jest dostępny od razu, więc w podglądzie różnicy nie widać.

  • unicode-range

    U+0030-0039

    Zakres znaków, dla których font ma być użyty. Tu z Courier New pochodzą tylko cyfry (U+0030–0039), a reszta tekstu z Georgii. Plik z takim zakresem przeglądarka pobiera dopiero wtedy, gdy na stronie pojawi się znak z zakresu.

Deskryptory w praktyce

#

font-family

Nazwa kroju, pod którą będziesz go używać w zwykłej właściwości font-family. Wymyślasz ją sam: tu „Papirus” to po prostu Georgia pod nowym imieniem.
@font-face {
  font-family: "Papirus";
  src: local("Georgia"),
    local("Times New Roman");
}
.demo { font-family: "Papirus", serif; }

src

Lista źródeł sprawdzanych po kolei. Pierwszego fontu nie ma w systemie, więc przeglądarka bierze następny, Courier New. W prawdziwym projekcie na liście stoi zwykle url() z plikiem WOFF2.
@font-face {
  font-family: "Kod";
  src: local("Brak Takiego Fontu"),
    local("Courier New"), local("Courier");
}
.demo { font-family: "Kod", monospace; }

font-weight

Mówi, jaką grubość ma plik. Tu wersja 700 celowo wskazuje inny krój, żeby było widać, że pogrubiony fragment w <strong> pochodzi z drugiej reguły. W prawdziwym projekcie oba pliki należą do tej samej rodziny.
@font-face {
  font-family: "Papirus";
  src: local("Georgia");
  font-weight: 400;
}
@font-face {
  font-family: "Papirus";
  src: local("Courier New Bold"),
    local("Courier New");
  font-weight: 700;
}
.demo { font-family: "Papirus", serif; }

font-style

Oznacza plik z kursywą. Fragment w <em> korzysta z drugiej reguły, a pogrubienie, dla którego nie ma osobnego pliku, przeglądarka podrabia z wersji zwykłej.
@font-face {
  font-family: "Papirus";
  src: local("Georgia");
}
@font-face {
  font-family: "Papirus";
  src: local("Courier New Italic"),
    local("Courier New");
  font-style: italic;
}
.demo { font-family: "Papirus", serif; }

font-display

Decyduje, co pokazać, zanim font się wczyta. swap od razu wyświetla tekst fontem zapasowym, a optional użyje nowego fontu tylko wtedy, gdy wczyta się niemal natychmiast. Font lokalny jest dostępny od razu, więc w podglądzie różnicy nie widać.
@font-face {
  font-family: "Papirus";
  src: local("Georgia");
  font-display: swap;
}
.demo { font-family: "Papirus", serif; }

unicode-range

Zakres znaków, dla których font ma być użyty. Tu z Courier New pochodzą tylko cyfry (U+0030–0039), a reszta tekstu z Georgii. Plik z takim zakresem przeglądarka pobiera dopiero wtedy, gdy na stronie pojawi się znak z zakresu.
@font-face {
  font-family: "Cyfry";
  src: local("Courier New");
  unicode-range: U+0030-0039;
}
.demo { font-family: "Cyfry", Georgia, serif; }

Więcej przykładów

#
Font zmienny: jeden plik, wszystkie grubości
CSS
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

h1 {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
}

Zakres 100 900 mówi, że jeden plik obsługuje każdą grubość z tego przedziału. To tak zwany font zmienny: zamiast kilku plików przeglądarka pobiera jeden.

Obsługa przeglądarek

#

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

  • Chrome
  • Edge
  • Firefox
  • Safari

Dobre praktyki

#
  • Podawaj fonty w formacie WOFF2. Starsze formaty, takie jak TTF czy EOT, są dziś zbędne i znacznie cięższe.
  • Ładuj tylko te grubości i style, których naprawdę używasz. Każdy wariant to osobny plik do pobrania.
  • Najważniejszy font możesz pobrać wcześniej: dodaj w <head> znacznik <link rel="preload" href="/fonts/lora-regular.woff2" as="font" type="font/woff2" crossorigin>.

Powiązane hasła

#

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs
Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie
Polityka Prywatności
OK