@font-face to reguła CSS, która umożliwia wyświetlanie czcionek na stronach internetowych. Zanim pojawiła się ta reguła, webmasterzy mogli używać na swoich stronach ograniczonego zestawu czcionek, które są najczęściej używane i instalowane na komputerach użytkowników. Wraz z pojawieniem się @font-face, dowolna konkretna czcionka może być łatwo dołączona do strony internetowej.
Jeśli pobrałeś czcionkę z naszej strony, w archiwum z czcionkami znajdziesz gotowy kod CSS, który należy skopiować i umieścić w dokumencie CSS dołączonym do projektu.
Instalacja krok po kroku
1. Wybierz żądaną czcionkę i kliknij "Pobierz na stronę".
2. W katalogu głównym witryny utwórz folder fonts i skopiuj pobrane czcionki.
Otwórz dokument CSS i skopiuj do niego zawartość pliku tekstowego z archiwum.
4. Upewnij się, że ścieżka do folderu czcionek jest poprawnie napisana. W zależności od położenia folderu, w którym znajdują się czcionki, ścieżka może zawierać jedną lub więcej kropek.
5. Gotowe. Skopiuj właściwość z nazwą rodziny i wklej ją do selektora, dla którego piszesz style.
Co zrobić, jeśli już pobrałem czcionkę gdzie indziej i chcę ją podłączyć?
W tym przypadku należy znaleźć konwerter czcionek w Internecie i przekonwertować czcionkę ttf (lub otf) do odpowiednich formatów, a mianowicie eot, svg, woff i woff2. Ma to na celu zapewnienie prawidłowego wyświetlania i działania czcionki we wszystkich przeglądarkach, a także na urządzeniach mobilnych.
Następnie należy samodzielnie przeliterować regułę @font-face, przestrzegając jej składni.
Składnia dla @font-face
Składnię reguły można z grubsza podzielić na właściwości podstawowe i właściwości zaawansowane.
Podstawowy:
- font-family - określa nazwę czcionki.
- src - wskazuje ścieżkę do czcionki. Może to być adres URL czcionki znajdującej się na serwerze witryny, adresy URL czcionek znajdujących się na serwerze innej firmy (np. Google Fonts) lub po prostu nazwa czcionki znajdującej się na komputerze użytkownika (Helvetica New Bold, Tahoma, Georgia itp.).
Rozszerzony:
- font-display - Określa sposób wyświetlania czcionki w zależności od tego, czy została ona pobrana i jest gotowa do użycia.
- font-stretch - umożliwia dostosowanie szerokości tekstu.
- font-style - określa, czy czcionka jest zwykła, kursywa lub pochylona (te dwa ostatnie nie są takie same).
- font-weight - Ustawia nasycenie czcionki w skali od 100 do 900 (100-małe, 900-małe).
- font-variant - można określić, w jaki sposób powinny być prezentowane małe litery - pozostawić je niezmodyfikowane lub zrobić je wszystkie małymi literami (wielkimi literami).
- font-feature-settings - pozwala zarządzać zaawansowanymi funkcjami typograficznymi w czcionkach OpenType.
- font-variations-settings - umożliwia niskopoziomową kontrolę nad odmianami czcionek Open Type i TrueType poprzez określenie czteroliterowych nazw osi.
- unicode-range - określa zakres kodów Unicode (glifów), które mają być używane w czcionce.
Podłączanie czcionki do witryny za pomocą Google Fonts
Korzystanie z Google Fonts to najprostszy sposób na połączenie czcionki z witryną. Wejdź na ich stronę, znajdź czcionkę, którą chcesz, wybierz odpowiednią czcionkę do zainstalowania i skopiuj kod.
Skopiowany kod należy umieścić w treści znacznika head na stronie html.
Wadą tej metody jest to, że jeśli podczas tworzenia strony utraciłeś dostęp do Internetu - czcionki nie zostaną wyświetlone i zastąpione standardowymi, ponieważ pliki nie znajdują się na komputerze lokalnym, a na serwerach Google. Istnieje również prawdopodobieństwo, że gdy przyjedziesz do klienta na prezentację layoutu (lub tylko w celu potwierdzenia), a on nie będzie miał Wi-Fi, problem się powtórzy.
