Najlepsze fonty na strony internetowe: 30 darmowych Google Fonts w prawdziwych układach

Najlepsze fonty na strony internetowe są czytelne w małych rozmiarach, szybko się ładują i pasują do marki: Inter lub Geist dla stron produktowych, Source Serif 4 lub Newsreader do czytania, Rubik lub Nunito dla lokalnych firm. Oto 30 darmowych Google Fonts pokazanych na żywo, z licencjami, osiami zmiennymi i kodem CSS do skopiowania.

Zaktualizowano 13 października 2026

Oto 30 darmowych fontów z Google Fonts, które sprawdzają się na prawdziwych stronach, posortowanych według zadania, w którym są najlepsze. Każdy pokazujemy poniżej w nagłówku, akapicie i przycisku, razem z licencją, informacją, czy jest fontem zmiennym, dostępnymi grubościami, stosem zastępczym i gotowym fragmentem kodu. Dane sprawdziliśmy w październiku 2026 w katalogu Google Fonts i w plikach licencji w repozytorium Google Fonts.

Szybki wybór

• SaaS lub aplikacja: Inter lub Geist do wszystkiego albo Plus Jakarta Sans dla cieplejszej strony docelowej.
• Blog lub publikacja: Source Serif 4 lub Newsreader do tekstu głównego, z fontem bezszeryfowym do nawigacji.
• Lokalna firma: Rubik, Nunito lub Work Sans, czytelne na telefonie i przyjazne.
• Marka premium lub klasyczna: Playfair Display lub EB Garamond do nagłówków, ze spokojnym fontem bezszeryfowym do tekstu głównego.
• Wiele języków: Noto Sans.

Wypróbuj własny tekst

Pisz poniżej, aby zastąpić przykładowy tekst w każdym podglądzie na tej stronie. Fonty ładują się z Google Fonts, gdy otworzysz tę sekcję; do tego czasu każdy podgląd pokazuje swój stos zastępczy, czyli to, co odwiedzający widzą przez chwilę, zanim pobierze się font webowy.

Wszystkie 30 fontów w skrócie

Wszystkie 30 udostępniono na licencji SIL Open Font License 1.1, która pozwala na użycie komercyjne, osadzanie na stronach i hosting na własnym serwerze, a także na modyfikowanie fontów, o ile nie sprzedajesz samych plików fontów i nie używasz zastrzeżonych nazw fontów dla zmodyfikowanych wersji. Niewielka część rodzin w Google Fonts korzysta z innych otwartych licencji: niektóre są na Apache License 2.0 (na przykład Permanent Marker i Special Elite), a rodzina Ubuntu używa licencji Ubuntu Font Licence. Zanim wdrożysz font, zawsze sprawdź licencję podaną na stronie rodziny w fonts.google.com.

<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Geist:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Figtree:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Merriweather:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Merriweather", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Lora:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Lora", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Playfair Display", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Source Serif 4", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "EB Garamond", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Fraunces:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Fraunces", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Newsreader:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Newsreader", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

/* CSS */
font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Nunito:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Rubik:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Work+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">

/* CSS */
font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Archivo:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

Jak wczytać font z Google Fonts

Umieść te linie w <head> strony, przed własnym arkuszem stylów. Dwie wskazówki preconnect pozwalają przeglądarce wcześnie otworzyć połączenia z hostem arkusza stylów i hostem plików fontów; pliki fontów są serwowane z innej domeny i pobierane w trybie CORS, dlatego druga wskazówka ma crossorigin.

<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:[email protected]&family=Source+Serif+4:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">

body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
h1, h2, h3 { font-family: "Source Serif 4", Georgia, "Times New Roman", serif; }

Jak czytać adres URL css2

• family=Inter:[email protected] pobiera zakres grubości z fontu zmiennego. Zawęź zakres do tego, czego używasz; przeglądarka i tak pobiera jeden plik na podzbiór.
• family=Lato:wght@400;700 pobiera dwie konkretne grubości statyczne. W rodzinach statycznych każda wymieniona grubość to kolejny plik.
• ital,wght@0,400..700;1,400..700 dodaje style kursywy. Nazwy osi podaje się w kolejności alfabetycznej, małe litery przed wielkimi.
• Powtórz family=, aby wczytać kilka rodzin w jednym żądaniu.
• display=swap ustawia font-display: swap w zwracanych regułach @font-face, więc tekst pojawia się od razu w foncie zastępczym i przełącza się, gdy dotrze font webowy, zamiast pozostawać niewidoczny.
• text=Hello zwraca plik zawierający tylko te znaki, co przydaje się przy słowie w logo złożonym fontem, którego nie używasz nigdzie indziej.

Opcje font-display

Hosting na własnym serwerze

Ponieważ te fonty mają otwarte licencje, możesz serwować pliki z własnej domeny zamiast z serwerów Google. Powody, dla których ludzie to robią: jedno połączenie z zewnętrzną usługą mniej, pełna kontrola nad cache i prywatność, bo żądania do serwerów Google wysyłają do Google adres IP odwiedzającego, czego część europejskich właścicieli stron unika. Jak to zrobić:

• Pobierz rodzinę z jej strony w fonts.google.com, przekonwertuj pliki do WOFF2 lub zachowaj gotowe i napisz własne reguły @font-face.
• W projekcie JavaScript zainstaluj rodzinę z Fontsource (na przykład npm install @fontsource-variable/inter) i zaimportuj ją w pliku wejściowym.
• Projekty Next.js mogą używać next/font/google, które pobiera pliki podczas budowania i serwuje je z Twojej domeny.

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;      /* the variable range */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF;
}

Przy hostingu na własnym serwerze wstępnie ładuj tylko ten jeden plik, którego potrzebuje tekst widoczny bez przewijania, przez <link rel="preload" href="/fonts/inter-latin-var.woff2" as="font" type="font/woff2" crossorigin>. Wstępne ładowanie kilku fontów sprawia, że konkurują one z obrazami i skryptami.

Uwagi o fontach zmiennych

Font zmienny to jeden plik zawierający ciągły zakres wartości na jednej lub kilku osiach, zamiast osobnego pliku dla każdej grubości. 28 z 30 fontów na tej stronie jest zmiennych; Poppins i Lato są statyczne.

• Grubość (wght) kontroluje się zwykłą właściwością font-weight i działa każda liczba z zakresu: font-weight: 650 jest poprawne.
• Szerokość (wdth), dostępna tutaj w Roboto, Open Sans, IBM Plex Sans, Noto Sans, Archivo i Merriweather, odpowiada font-stretch wyrażonemu w procentach, na przykład font-stretch: 85%.
• Rozmiar optyczny (opsz), w Inter, DM Sans, Source Serif 4, Newsreader, Merriweather i Fraunces, dopasowuje kształty liter do rozmiaru, w jakim są złożone. Przeglądarki stosują go automatycznie na podstawie rozmiaru fontu, bo font-optical-sizing ma domyślnie wartość auto. Aby go dostać, zażądaj tej osi w adresie URL (na przykład family=Inter:opsz,[email protected],100..900).
• Osie niestandardowe, takie jak SOFT i WONK w Fraunces, ustawia się przez font-variation-settings: "SOFT" 100, "WONK" 1;. Do grubości, szerokości i pochylenia używaj zamiast tej właściwości standardowych właściwości tam, gdzie istnieją, bo wartości font-variation-settings nie łączą się między regułami.
• Plik zmienny jest większy niż jakakolwiek pojedyncza grubość statyczna. Opłaca się, gdy używasz mniej więcej trzech lub więcej grubości i gdy chcesz grubości pośrednich do precyzyjnego dostrajania.

h1 { font-weight: 780; font-stretch: 90%; }
.lede { font-weight: 350; }
.fun-heading { font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 1; }

Web-safe fonts i systemowe stosy fontów

Fonty "web-safe" to te zainstalowane na niemal każdym komputerze z Windows i Mac, więc nie trzeba ich pobierać. Nie ma gwarancji, że będą na Androidzie, Linuksie czy każdym iPhonie, dlatego stos fontów zawsze kończy się rodziną ogólną, taką jak sans-serif lub serif.

Systemowy stos fontów idzie dalej i używa własnego fontu interfejsu każdego systemu operacyjnego: San Francisco na urządzeniach Apple, Segoe UI na Windows, Roboto na Androidzie i zwykle Noto lub innego domyślnego na Linuksie. Nic nie kosztuje przy ładowaniu i wygląda natywnie. Oto stosy, które polecamy w chwili pisania:

/* Sans: the operating system's interface font */
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  "Helvetica Neue", Arial, "Noto Sans", sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";

/* Serif */
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

/* Monospace */
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
  "Liberation Mono", "Courier New", monospace;

system-ui jest obsługiwany przez wszystkie aktualne główne przeglądarki. -apple-system i BlinkMacSystemFont pomagają tylko starszym przeglądarkom na urządzeniach Apple i można je pominąć, jeśli ich nie wspierasz. ui-serif i ui-monospace nie są rozpoznawane przez każdą przeglądarkę, dlatego każdy stos ciągnie się dalej nazwanymi fontami. Fonty emoji są na końcu, żeby znaki emoji wyświetlały się w kolorze.

Ten akapit jest złożony systemowym stosem bezszeryfowym, więc pokazuje font interfejsu Twojego urządzenia.

Uwagi o wydajności

• Używaj mniej rodzin i grubości. Każda grubość statyczna, każda kursywa i każda dodatkowa rodzina to kolejny plik. Dwie rodziny albo jedna rodzina zmienna z kursywą wystarczą większości stron.
• Wybieraj WOFF2. To najmocniej skompresowany format fontów webowych i obsługuje go każda aktualna przeglądarka. Google Fonts serwuje go automatycznie.
• Dziel na podzbiory według języka. Arkusz stylów Google Fonts już dzieli każdą rodzinę na podzbiory przez unicode-range, więc strona po angielsku pobiera tylko plik łaciński. Rób to samo przy hostingu na własnym serwerze.
• Ogranicz przesunięcia układu przy podmianie. Jeśli font zastępczy i font webowy mają różne szerokości, tekst przelewa się na nowo, gdy font dotrze. Wybierz font zastępczy o podobnych proporcjach albo dostrój go przez size-adjust, ascent-override i descent-override w zastępczej regule @font-face. next/font i niektóre narzędzia do budowania generują te wartości za Ciebie.
• Nie ukrywaj tekstu. Bez font-display: swap lub optional przeglądarki mogą przez chwilę nie pokazywać tekstu, gdy fonty się pobierają, co opóźnia moment, w którym stronę da się czytać.
• Mierz, nie zgaduj. Przepuść stronę przez test laboratoryjny przed zmianą fontów i po niej. Nasz przewodnik po PageSpeed Insights wyjaśnia, na które wskaźniki wpływają fonty.

Propozycje łączenia fontów

Łącz fonty, które wyraźnie się różnią (szeryfowy z bezszeryfowym albo szeroki krój display ze zwykłym krojem tekstowym), ale mają coś wspólnego, na przykład podobną wysokość x lub nastrój. Ogranicz się do dwóch rodzin. Te zestawienia używają wyłącznie fontów z tej strony:

Aby porównać więcej zestawień obok siebie, użyj narzędzia do łączenia fontów. Kolory pasujące do Twojej typografii znajdziesz w schematach kolorów stron internetowych, a gotowe układy z tymi fontami w komponentach sekcji hero.

Najczęściej zadawane pytania

Jaki font jest najlepszy na stronę internetową?

Nie ma jednego najlepszego fontu, ale Inter, Source Sans 3 i Open Sans to niezawodne wybory do tekstu głównego, bo pozostają wyraźne w małych rozmiarach. Do nagłówków wybierz coś z większym charakterem, co pasuje do marki, na przykład Playfair Display, Fraunces lub Space Grotesk.

Czy Google Fonts są darmowe do użytku komercyjnego?

Tak. Każda rodzina w Google Fonts jest na otwartej licencji, głównie SIL Open Font License 1.1, a niektóre na Apache License 2.0 i Ubuntu Font Licence. Wszystkie trzy pozwalają na użycie komercyjne na stronach, w aplikacjach i w druku. Przed użyciem sprawdź licencję na stronie każdej rodziny.

Ile fontów powinna używać strona internetowa?

Zwykle jedną lub dwie rodziny. Częsty układ to jedna do nagłówków i jedna do tekstu głównego albo jedna rodzina z różnymi grubościami w obu rolach. Każda dodatkowa rodzina i grubość to kolejne pliki, które przeglądarka musi pobrać.

Czym jest font zmienny?

Font zmienny to jeden plik fontu zawierający ciągły zakres stylów na osiach, takich jak grubość, szerokość czy rozmiar optyczny. Zamiast ładować osobne pliki dla odmiany regular, medium i bold, ładujesz jeden plik i możesz użyć dowolnej grubości z jego zakresu.

Czym są fonty web-safe?

To fonty, które są już zainstalowane na prawie wszystkich komputerach z Windows i Mac, takie jak Arial, Verdana, Georgia i Times New Roman, więc nie trzeba ich pobierać. Nie ma gwarancji, że będą na każdym telefonie czy systemie Linux, więc zawsze kończ stos fontów rodziną ogólną, taką jak sans-serif.

Czy hostować Google Fonts na własnym serwerze?

Możesz, bo licencje na to pozwalają. Hosting na własnym serwerze usuwa połączenie z domeną zewnętrzną, daje kontrolę nad cache i nie przekazuje adresów IP odwiedzających do Google. Wczytywanie z Google Fonts jest prostsze i samo dzieli fonty na podzbiory. Tak czy inaczej używaj WOFF2 i font-display: swap.

Tekst nagłówka

Nazwa Twojej firmy lub nagłówek

Tekst akapitu

Zdanie z Twojej strony głównej

Etykieta przycisku

Zarezerwuj teraz

Rozmiar nagłówka: {n}px

Przywróć przykłady

Zacznij za darmo · Bez karty kredytowej

Powiązane: Poradniki

• Darmowe biblioteki ikon SVG
• Rekord BIMI
• Bing Places for Business
• Przykłady Bootstrap 5 z odpowiednikami w Tailwind
• Klucz Brave Search API
• Brutalizm w web designie
• Strony z blogiem
• Tematy e-maili biznesowych, które ktoś otwiera

Produkt

• Kreator stron z AI
• Wdrożymy nasz kreator stron z AI za $2M w Twojej firmie
• Enterprise
• Dokumentacja API

Dla kogo

• Dla agencji
• Dla freelancerów
• Dla firm hostingowych
• Dla platform SaaS
• Dla startupów
• Usługi finansowe
• Rozwiązania dla ochrony zdrowia

Funkcje

• Edytor przeciągnij i upuść
• SEO i analityka
• Własny branding
• Panel klienta
• Rozliczenia dla resellerów

Zasoby

• Blog
• Centrum pomocy
• Darmowe narzędzia dla firm
• Free UI Components
• Szablony
• Kolekcje szablonów
• Przykłady stron
• Poradniki
• Porównania
• Alternatywy
• Najlepsze
• Recenzje
• Przewodniki po cenach
• Słownik i poradniki
• Integracje
• Dla programistów
• Benchmark
• Windows App

Firma

• O nas
• Cennik
• Zgłoś się do programu partnerskiego
• Kontakt
• Kariera
• Bezpieczeństwo
• Polityka prywatności
• Warunki świadczenia usług

Mapa strony