Zmiana czcionki w HTML nie wymaga przebudowy całej strony. W praktyce wystarczy połączyć strukturę dokumentu z odpowiednimi regułami CSS, a potem dobrać krój, rozmiar, grubość i zapasową rodzinę fontów. Pokażę, jak zmienić czcionkę HTML w prosty sposób, kiedy użyć Google Fonts lub własnego pliku oraz jak uniknąć problemów z polskimi znakami, czytelnością i szybkością ładowania.
Najważniejsze zasady zmiany czcionki na stronie
- CSS odpowiada za krój, rozmiar i styl tekstu, a HTML określa jego strukturę.
- Najwygodniej ustawić font dla całej strony w selektorze body.
- Właściwość font-family powinna zawierać font główny i co najmniej jedną czcionkę zastępczą.
- Do własnych fontów najlepiej używać formatu WOFF2.
- Jedna lub dwie rodziny fontów zwykle wystarczą, aby zachować czytelność i szybkość witryny.
Najprostszy sposób na zmianę czcionki w HTML
Za wygląd tekstu odpowiada przede wszystkim CSS, nie sam HTML. Najważniejszą właściwością jest font-family, która wskazuje rodzinę czcionki używaną przez przeglądarkę.
body {
font-family: Arial, sans-serif;
}Ten zapis sprawia, że cała strona korzysta z Arial. Jeśli nie jest ona dostępna na urządzeniu użytkownika, przeglądarka wybierze dowolny font bezszeryfowy wskazany przez sans-serif. Taki zapasowy wariant nazywa się fallbackiem i ma znaczenie, bo nie każda czcionka jest zainstalowana na każdym komputerze.
Regułę możesz umieścić w osobnym pliku CSS, na przykład style.css, a potem podłączyć go w dokumencie HTML:
Możliwe jest także zastosowanie stylu bezpośrednio w elemencie:
Tekst zapisany krojem szeryfowym.
Technicznie to zadziała, ale sam korzystam z tego rozwiązania tylko przy szybkich testach. Inline CSS utrudnia późniejsze zmiany, dlatego w większym projekcie lepiej trzymać style w jednym arkuszu.
Jak ustawić rozmiar, grubość i odstępy tekstu
Sama zmiana kroju nie zawsze daje oczekiwany efekt. Czytelność zależy również od rozmiaru, wysokości linii, grubości i odstępów między znakami.
body {
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
color: #222;
}
h1, h2, h3 {
font-weight: 700;
}
.lead {
font-size: 1.2rem;
letter-spacing: 0.01em;
}Jednostka rem odnosi się do bazowego rozmiaru dokumentu. Zwykle 1 rem odpowiada 16 pikselom, ale użytkownik może zmienić domyślny rozmiar tekstu w przeglądarce. Z tego powodu rem jest bardziej elastyczny niż sztywne ustawianie każdego elementu w pikselach.
Parametr line-height: 1.6 zwiększa odstęp między wierszami. Dla zwykłego tekstu często sprawdza się zakres od 1.4 do 1.8, natomiast nagłówki mogą mieć mniejszą wysokość linii. Zbyt ciasny tekst męczy wzrok, a zbyt luźny rozbija rytm czytania.
| Właściwość | Do czego służy | Przykład |
|---|---|---|
font-family |
Wybiera krój pisma | Arial, sans-serif |
font-size |
Ustawia rozmiar tekstu | 1rem |
font-weight |
Określa grubość | 700 |
font-style |
Włącza na przykład kursywę | italic |
line-height |
Ustawia wysokość wiersza | 1.6 |
Jak użyć Google Fonts bez komplikowania kodu
Jeżeli systemowe kroje są zbyt ograniczone, możesz dodać font z Google Fonts. Wybierasz rodzinę, interesujące cię grubości i wstawiasz wygenerowany element link w sekcji head dokumentu.
Potem odwołujesz się do fontu w CSS:
body {
font-family: "Inter", Arial, sans-serif;
}W praktyce dobrze ograniczyć liczbę pobieranych wariantów. Jeśli strona używa tylko zwykłego i pogrubionego tekstu, nie ma sensu ładować dziesięciu grubości. Mniej odmian oznacza mniejszy transfer i krótsze oczekiwanie na pojawienie się właściwego kroju.
Przy polskiej stronie sprawdź, czy wybrany font obsługuje znaki takie jak ą, ć, ę, ł, ń, ó, ś, ż i ź. W przeciwnym razie część tekstu może zostać wyświetlona innym krojem, co często wygląda jak przypadkowy błąd projektu.
Własna czcionka z pliku WOFF2
Jeśli zależy ci na pełnej kontroli albo używasz fontu kupionego dla konkretnej marki, możesz przechowywać go na własnym serwerze. Służy do tego reguła @font-face.
@font-face {
font-family: "MojaCzcionka";
src: url("/fonts/moja-czcionka.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
body {
font-family: "MojaCzcionka", Arial, sans-serif;
}Format WOFF2 jest obecnie najpraktyczniejszym wyborem dla stron internetowych, ponieważ dobrze kompresuje dane. Warto przygotować osobne pliki dla używanych grubości, na przykład 400 i 700, zamiast udawać pogrubienie przez przeglądarkę.
Własny font daje większą niezależność od zewnętrznych usług, ale nakłada na właściciela strony dodatkowe obowiązki. Trzeba sprawdzić licencję, ścieżkę do pliku, obsługę polskich znaków i rozmiar zasobu. Uszkodzony adres lub błędne rozszerzenie sprawi, że przeglądarka wróci do fontu zapasowego.
Jak zmienić czcionkę tylko w wybranym miejscu
Nie zawsze chcesz zmieniać wygląd całej witryny. Nagłówki, przyciski, menu albo fragmenty kodu mogą mieć osobny krój. Najczyściej nadać elementowi klasę i stylować ją w arkuszu CSS.
Nowoczesne technologie
Treść artykułu może pozostać w podstawowym kroju.
.tytul-sekcji {
font-family: Georgia, serif;
font-size: 2rem;
font-weight: 700;
}To rozwiązanie pozwala zachować spójny tekst główny i wyróżnić wybrane elementy. Sam zwykle stosuję jeden font bezszeryfowy do dłuższych akapitów oraz drugi, bardziej charakterystyczny krój dla nagłówków, ale tylko wtedy, gdy różnica poprawia hierarchię treści.
Do fragmentów kodu możesz użyć fontu monospace:
code, pre {
font-family: "Courier New", monospace;
}Nie ustawiaj jednak kroju monospace dla całej strony. Znaki mają w nim równą szerokość, dlatego świetnie sprawdza się w kodzie, lecz dłuższe artykuły zwykle czyta się w nim wolniej.
Błędy, które najczęściej psują efekt
Najczęstszy problem polega na używaniu przestarzałego znacznika . W nowoczesnym HTML nie służy on do stylowania tekstu. Jego rolę przejęły CSS i selektory, które są łatwiejsze do utrzymania oraz pozwalają zmienić wygląd wielu elementów jedną regułą.
- Nie pomijaj fontu zastępczego po przecinku.
- Nie ładuj wielu rodzin i grubości, jeśli nie są potrzebne.
- Nie ustawiaj całego tekstu na bardzo mały rozmiar tylko dlatego, że wybrany font jest szeroki.
- Sprawdź wygląd strony na telefonie, laptopie i przy powiększeniu tekstu.
- Zweryfikuj, czy font zawiera polskie znaki oraz wszystkie używane symbole.
Problem może wynikać także z kaskadowości CSS. Jeżeli reguła dla body nie działa, bardziej szczegółowy selektor, styl inline albo reguła z użyciem !important może ją nadpisywać. W narzędziach deweloperskich przeglądarki szybko sprawdzisz, która deklaracja faktycznie została zastosowana.
Przy okazji testuję stronę z wyłączonym połączeniem internetowym. Jeśli po takim sprawdzeniu tekst nadal wygląda poprawnie, oznacza to, że fallback został dobrany rozsądnie. To prosty test, a potrafi ujawnić problemy, których nie widać podczas pracy na szybkim łączu.
Ostatnie poprawki, które robią dużą różnicę
Najbezpieczniejszy schemat wygląda tak: ustaw podstawowy krój dla body, dodaj zapasową rodzinę, użyj rem do rozmiaru, zadbaj o wysokość linii i dopiero na końcu eksperymentuj z dekoracyjnymi fontami. Dzięki temu wygląd nie zależy od jednego pliku ani jednej usługi.
Przed publikacją sprawdź trzy rzeczy. Tekst musi być czytelny, font powinien ładować się wystarczająco szybko, a licencja musi pozwalać na użycie w serwisie. Estetyczny krój jest dodatkiem, ale nie powinien pogarszać dostępności ani utrudniać odbioru treści.
Jeżeli dopiero zaczynasz, zacznij od prostego zestawu: jeden font bezszeryfowy, wariant 400 dla akapitów, 700 dla nagłówków oraz sensowny fallback. Taki układ jest łatwy do wdrożenia, dobrze działa na różnych urządzeniach i daje znacznie lepszy efekt niż przypadkowe mieszanie kilku czcionek.
