0Pricing
CSS Academy · Lekcja

Google Fonts i @font-face

Wczytają Państwo zewnętrzne czcionki z Google Fonts lub zdefiniują własne czcionki za pomocą reguły @font-face.

Google Fonts i @font-face to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 4 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 CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Po co używać niestandardowych czcionek?

Czcionki webowe oferują tylko niewielki wybór. Niestandardowe czcionki pozwalają precyzyjnie dopasować wygląd do identyfikacji marki. Dwa główne podejścia to Google Fonts (usługa hostowana) i @font-face (hosting własny).

Konfiguracja Google Fonts

Odwiedź fonts.google.com, wybierz rodzinę czcionki, określ grubości i skopiuj tag <link> do elementu HTML <head>:

<p>Add these tags to your document's <code>&lt;head&gt;</code>:</p>
<pre><code>&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"&gt;</code></pre>

Używanie Google Fonts w CSS

Po dodaniu odnośnika odwołaj się do czcionki po nazwie w stosie font-family:

<h1>Playfair Display Heading</h1>
<p>Roboto body text below the heading.</p>

Parametry API Google Fonts

Parametr display=swap korzysta ze strategii Font Display Swap — tekst jest od razu wyświetlany za pomocą czcionki zastępczej, a następnie zastępowany niestandardową czcionką po jej załadowaniu. Zapobiega to niewidocznemu tekstowi podczas ładowania.

Podstawy @font-face

@font-face umożliwia załadowanie niestandardowego pliku czcionki hostowanego na własnym serwerze. Zdefiniuj nazwę rodziny czcionki i źródło pliku:

<p class="brand-text">Custom brand typeface text</p>

WOFF2: nowoczesny format

WOFF2 (Web Open Font Format 2) to zalecany format. Oferuje najlepszą kompresję (zwykle jest o 30% mniejszy niż WOFF) i jest obsługiwany przez wszystkie nowoczesne przeglądarki. Zawsze dołączaj WOFF jako format zastępczy.

Wiele grubości z @font-face

Zadeklaruj jeden blok @font-face dla każdej kombinacji grubości i stylu. Użyj tej samej nazwy font-family, aby przeglądarka automatycznie wybrała właściwy plik:

<p>Regular weight 400 text with <strong>bold weight 700 text</strong> inline.</p>

Właściwość font-display

Deskryptor font-display steruje zachowaniem podczas ładowania czcionki:

  • swap — od razu wyświetla czcionkę zastępczą i zamienia ją po załadowaniu właściwej (zalecane)
  • block — niewidoczny tekst przez maksymalnie 3 sekundy
  • fallback — krótki okres niewidoczności, a następnie stała czcionka zastępcza
  • optional — używa czcionki tylko wtedy, gdy jest już zapisana w pamięci podręcznej
<p class="swap-text">Text swaps in once Inter loads.</p>

@font-face dla czcionek zmiennych

Czcionki zmienne definiują zakresy osi zamiast stałych wartości grubości:

<p class="variable-text">Variable weight text (550)</p>

Wstępne ładowanie krytycznych czcionek

Wstępnie załaduj najważniejszy plik czcionki, aby skrócić opóźnienie blokujące renderowanie. Dodaj <link rel="preload"> przed arkuszem stylów:

<p>Add this to your document's <code>&lt;head&gt;</code> to preload the font file:</p>
<pre><code>&lt;link rel="preload" href="./fonts/inter.woff2" as="font" type="font/woff2" crossorigin&gt;</code></pre>

local() — pomijanie pobierania

Użyj local() w src, aby przed pobraniem sprawdzić, czy użytkownik ma już zainstalowaną czcionkę:

<p class="roboto-text">Uses local Roboto if installed</p>

Szybkie sprawdzenie

Jaki format czcionek zapewnia najlepszą kompresję i najszerszą obsługę we współczesnych przeglądarkach?

Podsumowanie

Google Fonts udostępnia łatwe w użyciu hostowane czcionki za pomocą tagu <link>. Hostuj czcionki samodzielnie z użyciem @font-face, formatu WOFF2 i font-display: swap, aby uzyskać najlepszą wydajność. Wstępnie ładuj krytyczne czcionki i używaj local(), aby unikać niepotrzebnych pobrań.

Często zadawane pytania

Czy lekcja „Google Fonts i @font-face” jest bezpłatna?

Tak — pełny tekst „Google Fonts i @font-face” 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 CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Google Fonts i @font-face”?

Wczytają Państwo zewnętrzne czcionki z Google Fonts lub zdefiniują własne czcionki za pomocą reguły @font-face. Ćwiczysz 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ąć CSS Academy?

Nie wymagamy żadnego doświadczenia. 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 4 z 4.

Ile czasu zajmuje lekcja „Google Fonts i @font-face”?

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 CSS Academy?

Tak. Każda lekcja 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

  1. Rodziny czcionek i czcionki bezpieczne dla sieci
  2. Rozmiar, grubość i styl czcionki
  3. Wyrównanie, dekorowanie i odstępy tekstu
  4. Google Fonts i @font-face
← Powrót do CSS Academy