Jak dodać Google Fonts do strony (3 proste sposoby)

Żeby dodać czcionkę Google do swojej strony, robisz dwie małe rzeczy: wczytujesz czcionkę, a potem mówisz tekstowi, żeby jej używał. Wczytać ją możesz znacznikiem <link> w nagłówku (head) strony, linijką @import na samej górze CSS albo z plików czcionki, które hostujesz sam. Najszybciej dostaniesz dokładne linijki dzięki darmowemu rozszerzeniu FontMee: wypróbowujesz czcionkę na własnej stronie, naciskasz Kopiuj CSS i wklejasz. Poniżej są wszystkie trzy sposoby, z kodem do skopiowania bez zmian.

Co naprawdę znaczy „dodać czcionkę”

Pomyśl o czcionce jak o gościu na kolacji. Najpierw trzeba go zaprosić, czyli twoja strona musi pobrać plik czcionki. Potem trzeba mu dać miejsce przy stole, czyli powiedzieć tekstowi, żeby jej używał. Pominiesz zaproszenie, a czcionka nigdy się nie pojawi. Pominiesz miejsce, a ona usiądzie w kącie, podczas gdy tekst zostanie przy starej czcionce.

Obie rzeczy zapisuje się w CSS, czyli zestawie reguł stylu, który mówi stronie, jak ma wyglądać. Zaproszenie idzie do head strony (ukrytego obszaru na górze HTML-a, w którym przeglądarka czyta swoje instrukcje) albo na samą górę pliku CSS. Miejsce przy stole to jedna krótka reguła, jak w przykładach poniżej. Którykolwiek sposób wybierzesz, te dwie rzeczy zostają takie same.

Sposób 1: znacznik link w head strony

To metoda, którą Google pokazuje na własnej stronie. Wstawiasz trzy linijki do head strony: dwie, które mówią przeglądarce, żeby przygotowała się do połączenia z Google, i jedną, która wczytuje czcionkę. Zwykle wczytuje się odrobinę wcześniej niż przy innych sposobach, bo przeglądarka może zacząć pobierać czcionkę, zanim jeszcze przeczyta twój CSS.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap">
  <style>
    h1, h2 { font-family: 'Lora', serif; }
  </style>
</head>

Ostatnia część linku, display=swap, każe przeglądarce od razu pokazać tekst czcionką zapasową i podmienić ją na prawdziwą, gdy tylko dotrze, więc odwiedzający nigdy nie patrzą na pustą przestrzeń. Słowo po przecinku w twojej regule (serif) to właśnie ta zapasowa, a Google zaleca, żeby zawsze ją dodawać. Używaj tego sposobu, gdy możesz edytować HTML strony.

Sposób 2: linijka @import na górze CSS

Czasem nie możesz dotknąć head strony, tylko CSS. Tak jest z polem Dodatkowy CSS w WordPressie, sekcją CSS w wielu kreatorach stron albo zwykłym plikiem style.css. Wtedy zaproszenie może mieszkać w twoim CSS, jako jedna linijka, która musi być na samej górze, nad wszystkimi innymi regułami.

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');

h1, h2 { font-family: 'Lora', serif; }

Najłatwiej ją wkleić, ale zwykle jest odrobinę wolniejsza niż znacznik link, bo przeglądarka odkrywa czcionkę dopiero po przeczytaniu twojego CSS. Na małej stronie prawie tego nie zauważysz.

Sposób 3: hostuj pliki czcionki samemu

Tu pobierasz pliki czcionki od Google, wgrywasz je na własną stronę i wskazujesz na nie, więc przeglądarki twoich odwiedzających w ogóle nie łączą się z Google. Jedni wybierają to dla prywatności, inni dla szybkości, a jeszcze inni dlatego, że przepisy w tej sprawie różnią się w zależności od kraju, więc sprawdź, co dotyczy twoich odwiedzających. To kilka kroków więcej, ale nic trudnego: kopiujesz folder, a potem dodajesz regułę, która mówi, gdzie leży plik.

@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

h1, h2 { font-family: 'Lora', serif; }

Google Fonts są open source, więc możesz je pobierać i hostować, także w projektach komercyjnych. Wolne jest znajdowanie i pobieranie każdego pliku oraz ręczne pisanie każdego bloku @font-face. FontMee robi to za ciebie, jak zaraz zobaczysz.

Który sposób wybrać?

• Możesz edytować HTML strony: użyj znacznika link (sposób 1).
• Możesz edytować tylko CSS albo używasz kreatora stron z polem CSS: użyj @import (sposób 2).
• Chcesz, żeby przeglądarki odwiedzających wczytywały wszystko z twojego serwera: hostuj pliki (sposób 3).

Nie jesteś pewien? Zacznij od sposobu 1 lub 2. Możesz zmienić później, a zmienia się tylko jedna linijka, która wczytuje czcionkę.

Dokładny kod dostaniesz z FontMee

Ręczne wpisywanie tych linijek to miejsce, w którym dzieje się większość błędów: zgubiony plus, grubość, której czcionka nie ma, reguła niepasująca do twoich nagłówków. FontMee to darmowe rozszerzenie Chrome, czyli mały dodatek, który daje przeglądarce jedną nową funkcję, i pisze te linijki za ciebie. Najpierw wypróbowujesz czcionkę na swojej prawdziwej stronie, widzisz, jak wygląda, a potem kopiujesz kod dokładnie dla tego wyboru. Ma ponad 1900 czcionek, a film pokazuje panel w akcji.

1. Zainstaluj FontMee. Dodaj je ze Sklepu Chrome. Jest darmowe i nie wymaga konta. Kliknij ikonę puzzla w Chrome i przypnij rozszerzenie, żeby zawsze było o jedno kliknięcie.
2. Otwórz swoją stronę i kliknij ikonę FontMee. Panel otwiera się obok strony. Możesz też nacisnąć Alt + Shift + F. Własnych stron Chrome (Nowa karta, Sklep, strony chrome://) nie da się zmienić.
3. Wybierz, gdzie ma trafić czcionka. Pod Zastosuj zmiany do wybierz Wszystko, Nagłówki lub Tekst, a potem kliknij czcionkę. Nagłówki i tekst możesz robić osobno.
4. Sprawdź na prawdziwej stronie. Przełączaj między Oryginalna czcionka a Podgląd FontMee i użyj Dostrój do rozmiaru, grubości i wysokości wiersza, aż będzie dobrze.
5. Naciśnij Kopiuj CSS. Otwiera się okno z czterema kartami: CSS (sposób z @importem), HTML (sposób ze znacznikiem link), Zmienne i Tailwind dla tych, którzy ich używają. Wybierz kartę pasującą do twojego sposobu, naciśnij Kopiuj do schowka i wklej na stronę. FontMee prosi Google tylko o grubości, które czcionka naprawdę ma, więc nie skończysz z zepsutym linkiem.
6. Chcesz sposób 3? W tym samym oknie naciśnij Pobierz ZIP do własnego hostingu. Dostajesz folder z plikami czcionki, fonts.css, fontmee.css i krótkie README. Wgraj folder i dodaj dwa linki do arkuszy stylów.

Cztery rzeczy do sprawdzenia przed publikacją

• Wczytuj tylko to, czego używasz. Każda dodatkowa czcionka i grubość trochę obciąża stronę. Dwie czcionki i dwie grubości w zupełności wystarczą większości stron.
• Miej czcionkę zapasową. Kończ każde font-family ogólną nazwą, jak serif albo sans-serif, żeby tekst dobrze wyglądał, zanim czcionka się wczyta.
• Sprawdź litery, których potrzebujesz. Polskie znaki jak ł, ś i ż oraz cyrylica czy litery wietnamskie nie są w każdej czcionce. Zobacz swoje własne słowa w FontMee, zanim skopiujesz.
• Sprawdź licencję. Google Fonts są open source i darmowe do użytku komercyjnego. Okno z kodem w FontMee wymienia licencję każdej czcionki, więc zobaczysz ją przed publikacją.

Nie masz jeszcze strony? Wtedy czcionka jest na drugim miejscu. Strona potrzebuje też domu, w którym zamieszka, a kreator stron to najszybszy sposób, żeby go mieć bez kodu.

Pobierz rozszerzenie

FontMee jest darmowe, z ponad 1900 czcionkami, kopiowaniem CSS w czterech formatach, ZIP-em do własnego hostingu i wgrywaniem własnych czcionek. Bez konta, bez subskrypcji. Dodaj je ze Sklepu Chrome albo najpierw przeczytaj stronę FontMee.

Warto wiedzieć, zanim zaczniesz

FAQ