Niestandardowe rodziny czcionek
Integrować Google Fonts lub czcionki lokalne, definiując fontFamily w konfiguracji i stosując je za pomocą klas narzędziowych font-*.
Niestandardowe rodziny czcionek to bezpłatna lekcja Tailwind CSS Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Tailwind CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Domyślne zestawy czcionek Tailwind
Tailwind udostępnia trzy domyślne narzędzia rodzin czcionek: font-sans, font-serif i font-mono. Każde z nich wskazuje starannie dobrany zestaw czcionek systemowych, który dobrze wygląda we wszystkich systemach operacyjnych i nie wymaga pobierania żadnych czcionek. W większości projektów warto zastąpić te zestawy markową czcionką internetową lub ją do nich dodać, aby nadać projektowi charakterystyczną tożsamość typograficzną.
/* Tailwind's built-in font stacks */
font-sans → ui-sans-serif, system-ui, -apple-system, ...
font-serif → ui-serif, Georgia, Cambria, ...
font-mono → ui-monospace, SFMono-Regular, Menlo, ...
<!-- Using them -->
<p class="font-sans">System sans-serif text</p>
<p class="font-serif">Elegant serif text</p>
<pre class="font-mono">code example</pre>Wybór czcionki z Google Fonts
Google Fonts to najpopularniejsze źródło bezpłatnych czcionek internetowych. Przejdź do fonts.google.com i wybierz czcionkę pasującą do Twojej marki. Popularne wybory w projektach interfejsów użytkownika to między innymi Inter dla przejrzystych, nowoczesnych interfejsów, Geist dla produktów technicznych, Playfair Display dla elegancji edytorskiej oraz JetBrains Mono dla edytorów kodu. Wybierz grubości, których rzeczywiście używasz (zwykła 400 i półgruba 600 wystarczają w większości przypadków).
<!-- Add to your HTML <head> to load from Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Or for Playfair Display -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">Rejestrowanie czcionek w konfiguracji Tailwind
Po załadowaniu czcionki za pomocą tagu <link> lub dyrektywy CSS @import zarejestruj ją w pliku tailwind.config.js w sekcji theme.extend.fontFamily. Podaj nazwę czcionki dokładnie tak, jak występuje w Google Fonts (wraz ze spacjami, jeśli ma to zastosowanie), jako pierwszy element tablicy zestawu. Zawsze dodawaj czcionki zapasowe — czcionki systemowe, które zostaną użyte, jeśli czcionka internetowa nie załaduje się.
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
display: ['Playfair Display', 'Georgia', 'serif'],
mono: ['JetBrains Mono', 'ui-monospace', 'SFMono-Regular', 'monospace'],
},
},
},
};Stosowanie rodzin czcionek w HTML
Po zarejestrowaniu czcionki użyj klasy narzędziowej font-{key}, aby ją zastosować. Jeśli rozszerzysz sans, klasa font-sans będzie teraz wskazywać wybraną czcionkę. Jeśli dodasz nowy klucz, taki jak display, klasą narzędziową będzie font-display. Zastosuj rodzinę czcionek na najwyższym poziomie przodka, aby była dziedziczona w całym poddrzewie, a następnie w razie potrzeby zmieniaj ją w konkretnych sekcjach.
<body class="font-sans">
<!-- All text inherits Inter font -->
<h1 class="font-display text-5xl font-bold">
Playfair Display Heading
</h1>
<p class="font-sans text-gray-600">
Regular body text in Inter
</p>
<pre class="font-mono text-sm bg-gray-100 p-4 rounded">
code in JetBrains Mono
</pre>
</body>Zastępowanie domyślnej rodziny czcionek
Aby ustawić wybraną czcionkę jako domyślną w całej aplikacji bez dodawania font-sans do każdego elementu, nadpisz theme.fontFamily.sans (poza extend), całkowicie zastępując domyślny zestaw. Następnie zastosuj font-sans raz na elemencie body, a cały tekst dziedziczący style z elementu body będzie używać niestandardowej czcionki bez dodatkowych nazw klas.
// tailwind.config.js — Override default sans (replaces the default)
module.exports = {
theme: {
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
// serif and mono keep defaults unless also overridden
},
},
};
<!-- Now font-sans = Inter everywhere -->
<body class="font-sans">
<p>This text automatically uses Inter</p>
</body>Ładowanie czcionek za pomocą optymalizacji czcionek Next.js
W projektach Next.js używaj modułu next/font zamiast odnośników CDN Google Fonts. Moduł pobiera czcionki podczas kompilacji, udostępnia je z własnej domeny, eliminuje zewnętrzne żądania i zapobiega przesunięciom układu dzięki automatycznemu dostosowywaniu rozmiaru czcionki. Wygeneruj nazwę zmiennej CSS i przekaż ją do konfiguracji Tailwind, używając tej zmiennej, aby ściśle zintegrować optymalizację czcionek Next.js z Tailwind.
// app/layout.tsx
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
variable: '--font-inter',
});
export default function Layout({ children }) {
return (
<html lang="en" className={inter.variable}>
<body className="font-sans">{children}</body>
</html>
);
}
// tailwind.config.js
theme: {
extend: {
fontFamily: {
sans: ['var(--font-inter)', 'ui-sans-serif', 'system-ui'],
},
},
}Używanie lokalnych plików czcionek
W przypadku zakupionych lub niestandardowych czcionek przechowuj je lokalnie i definiuj za pomocą reguły CSS @font-face. Umieść pliki czcionek w katalogu publicznym i odwołuj się do nich za pomocą ścieżek bezwzględnych. Użyj font-display: swap, aby natychmiast wyświetlać czcionki zapasowe podczas ładowania niestandardowej czcionki i zapobiec niewidocznemu tekstowi w tym czasie. Następnie zarejestruj rodzinę czcionek w konfiguracji Tailwind jak zwykle.
/* In your global CSS */
@font-face {
font-family: 'BrandFont';
src: url('/fonts/BrandFont-Regular.woff2') format('woff2'),
url('/fonts/BrandFont-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* tailwind.config.js */
theme: {
extend: {
fontFamily: {
brand: ['BrandFont', 'sans-serif'],
},
},
}Narzędzia do ustawiania grubości czcionki
Po ustawieniu rodziny czcionek kontroluj jej grubość za pomocą narzędzi Tailwind font-{weight}. Typowe grubości to font-normal (400), font-medium (500), font-semibold (600) i font-bold (700). Pamiętaj o załadowaniu z Google Fonts konkretnych grubości, których zamierzasz używać — żądanie grubości, która nie została załadowana, powoduje jej sztuczne wygenerowanie przez przeglądarkę, co prowadzi do gorszej jakości tekstu.
<!-- Load weights 400, 600, 700 from Google -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Use them with Tailwind weight utilities -->
<p class="font-sans font-normal">Regular body text (400)</p>
<p class="font-sans font-semibold">Semibold text (600)</p>
<h1 class="font-sans font-bold">Bold heading (700)</h1>Czcionki zmienne
Czcionki zmienne zawierają wszystkie grubości (a czasem także szerokości i odmiany pochyłe) w jednym pliku, ograniczając liczbę żądań HTTP i jednocześnie obsługując pełny zakres grubości. Załaduj czcionkę zmienną raz i używaj dowolnego narzędzia Tailwind do ustawiania grubości czcionki bez obaw o to, czy dana grubość została zamówiona. Wiele nowoczesnych czcionek Google Fonts oferuje obecnie wersje zmienne — w adresie URL szukaj składni osi ital,wght@.
<!-- Variable font: loads once, supports all weights 100-900 -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
<!-- Now ALL weight utilities work with Inter -->
<p class="font-thin">font-thin (100)</p>
<p class="font-normal">font-normal (400)</p>
<p class="font-bold">font-bold (700)</p>
<p class="font-black">font-black (900)</p>Narzędzia wygładzania czcionek
Tailwind udostępnia narzędzia antialiased i subpixel-antialiased, które kontrolują sposób renderowania czcionek na ekranie. Zastosuj globalnie antialiased na elemencie body, aby włączyć wygładzanie antyaliasingowe w skali szarości, dzięki któremu nowoczesne czcionki internetowe wyglądają wyraźniej i smuklej na ekranach o wysokiej gęstości pikseli. W większości projektów Tailwind dodaje się antialiased jako styl bazowy obok deklaracji rodziny czcionek.
<body class="font-sans antialiased text-gray-900">
<!-- Text renders with smooth antialiasing across the page -->
<h1 class="font-bold text-4xl tracking-tight">
Crisp, antialiased heading
</h1>
</body>Testowanie ładowania czcionek
Sprawdź, czy niestandardowe czcionki ładują się prawidłowo, otwierając Chrome DevTools, przechodząc do karty Network i filtrując wyniki według Font. Na liście powinny pojawić się pliki czcionek. W panelu Elements wybierz węzeł tekstowy i sprawdź kartę Computed — właściwość font-family powinna wskazywać nazwę niestandardowej czcionki jako czcionkę używaną, a nie zapasową. Przetestuj działanie przy wielu rozmiarach obszaru widoku i różnych prędkościach połączenia, aby wykryć problemy z ładowaniem.
Szybkie sprawdzenie
Sprawdź, czy rozumiesz, jak używać niestandardowych rodzin czcionek w Tailwind CSS.
Podsumowanie lekcji
W tej lekcji nauczyłeś się: rejestrować niestandardowe czcionki w theme.extend.fontFamily jako tablicę zawierającą czcionki zapasowe, ładować Google Fonts za pomocą tagu CDN <link> lub używać next/font do zoptymalizowanego ładowania w Next.js oraz stosować globalnie antialiased, aby uzyskać wyraźne renderowanie czcionek. W następnej części dodamy niestandardowe wartości odstępów, aby uzupełnić domyślną skalę Tailwind.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Niestandardowe rodziny czcionek” jest bezpłatna?
Tak — pełny tekst „Niestandardowe rodziny czcionek” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Tailwind CSS Academy, przejdź na CoddyKit PRO. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Niestandardowe rodziny czcionek”?
Integrować Google Fonts lub czcionki lokalne, definiując fontFamily w konfiguracji i stosując je za pomocą klas narzędziowych font-*. Ćwiczysz Tailwind CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Tailwind CSS Academy?
Nie wymagamy żadnego doświadczenia. Tailwind CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Niestandardowe rodziny czcionek”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Tailwind CSS Academy?
Tak. Każda lekcja Tailwind CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Dodawanie niestandardowych kolorów
- Niestandardowe rodziny czcionek
- Niestandardowe wartości odstępów
- Używanie zmiennych CSS w Tailwind