Osadzanie czcionek w dokumencie HTML jest kluczowe, aby zapewnić spójną identyfikację wizualną strony i poprawne wyświetlanie treści w różnych przeglądarkach. W tym artykule omówimy, dlaczego warto osadzać czcionki, jakie mamy formaty i jak je zaimplementować w kodzie.
1. Dlaczego warto osadzać czcionki?
- Spójność wizualna: Jeśli używasz niestandardowej czcionki (spoza zestawu systemowego), możesz mieć pewność, że użytkownicy zobaczą stronę dokładnie w takim wyglądzie, jaki zaprojektowałeś.
- Rozpoznawalność marki: Własna lub specjalnie dobrana czcionka może podkreślić charakter marki i wyróżnić stronę spośród konkurencji.
- Kontrola nad typografią: Osadzone czcionki dają pełną kontrolę nad wyglądem tekstu: kerningiem, wyrównaniem, a także nad różnymi odmianami (grubością, kursywą, wariantami stylistycznymi).
2. Popularne formaty czcionek do użycia w Internecie
- WOFF (Web Open Font Format) – najpopularniejszy format zaprojektowany specjalnie do użytku w Internecie. Zapewnia kompresję i wsparcie większości nowoczesnych przeglądarek.
- WOFF2 – nowsza wersja WOFF zapewniająca jeszcze lepszą kompresję i mniejsze rozmiary plików; wspierana przez większość aktualnych przeglądarek.
- EOT (Embedded OpenType) – starszy format firmy Microsoft, wymaga go jeszcze Internet Explorer 8 i niższe wersje.
- TTF (TrueType) – popularny format, jednak do użytku w sieci zalecane jest stosowanie WOFF/WOFF2 ze względu na lepszą kompresję.
- SVG – używany głównie przez przeglądarkę Safari na urządzeniach z iOS (starsze wersje), obecnie rzadziej stosowany.
Aby zapewnić pełną kompatybilność z różnymi przeglądarkami (w tym starszymi wersjami), wciąż czasem stosuje się zestaw kilku formatów jednocześnie: WOFF2, WOFF, EOT oraz ewentualnie TTF/SVG.
3. Osadzanie czcionek z Google Fonts
Najłatwiejszym sposobem na korzystanie z niestandardowych czcionek jest skorzystanie z biblioteki Google Fonts. Postępuj według poniższych kroków:
- Wybierz czcionkę na stronie Google Fonts.
- Skonfiguruj rodzinę czcionek (np. Light, Regular, Bold, itp.).
- Skopiuj kod wygenerowany przez Google (najczęściej element
<link>). - Wklej ten kod w sekcji
<head>swojego dokumentu HTML. - Użyj czcionki w kodzie CSS.
Zalety korzystania z Google Fonts:
- Duży wybór darmowych czcionek.
- Łatwe wstawianie dzięki gotowym linkom.
- Szybkie wczytywanie dzięki serwerom Google (tzw. caching).
4. Osadzanie własnych czcionek przy pomocy @font-face
Jeśli chcesz używać własnych plików czcionek, których nie ma w popularnych bibliotekach, możesz je osadzić za pomocą reguły @font-face w CSS.
4.1. Przygotowanie plików czcionki
Najlepiej przygotować kilka formatów (WOFF2, WOFF, EOT, TTF), aby zapewnić kompatybilność z różnymi przeglądarkami. Za pomocą odpowiednich narzędzi (np. Transfonter, Font Squirrel Generator) można przekonwertować czcionkę z formatu TTF/OTF na pliki WOFF, WOFF2, itp.
4.2. Struktura katalogów
Zorganizuj swoje pliki w katalogach. Przykładowa struktura może wyglądać tak:
4.3. Kod CSS z @font-face
W pliku style.css (lub w sekcji <style> w HTML) można dodać regułę:
4.4. Użycie niestandardowej czcionki
Po zdefiniowaniu reguły @font-face możesz użyć czcionki w dowolnym miejscu w kodzie CSS:
5. Dobre praktyki i wskazówki
- Minimalizuj liczbę rodzin czcionek: Zbyt dużo plików fontów może znacznie spowolnić wczytywanie strony.
- Wybieraj tylko potrzebne warianty (grubość, styl): Nie zawsze potrzebujesz np. Light, Regular, Bold, Extra Bold i Italic jednocześnie. Każdy wariant to dodatkowy plik i większa waga strony.
- Używaj
display: swap;(dla Google Fonts) lub analogicznych opcji w własnych stylach, aby uniknąć niewidocznego tekstu w trakcie ładowania (tzw. „FOIT” – Flash of Invisible Text). - Testuj w różnych przeglądarkach: Zwłaszcza jeśli Twoja grupa docelowa może używać starszych wersji Internet Explorera lub innych przeglądarek.
- Kompresja i caching: Pliki czcionek zwykle dobrze się kompresują. Upewnij się, że serwer poprawnie konfiguruje nagłówki
Cache-Control, aby czcionki były rzadziej pobierane.
6. Podsumowanie
Osadzanie czcionek w dokumencie HTML pozwala na pełną kontrolę nad warstwą wizualną i typografią strony. Możemy korzystać z darmowej biblioteki Google Fonts lub osadzać własne fonty przy pomocy reguły @font-face. Wybór rozwiązania zależy od potrzeb projektu, jednak kluczem jest zawsze odpowiednia optymalizacja, aby nie spowolnić ładowania strony. Pamiętaj również o różnych formatach czcionek i kompatybilności ze starszymi przeglądarkami – dzięki temu strona będzie wyglądać spójnie u wszystkich użytkowników.
Was this helpful?
0 / 0