Darmowe czcionki — najpopularniejsze witryny, podglądy na żywo i jak z nich korzystać

Przeglądaj zaufane źródła bezpłatnych czcionek, testuj podglądy na żywo, kopiuj czyste CSS i naucz się, jak prawidłowo używać czcionek internetowych. Zawiera kolekcje typu open source, bezpłatne do celów komercyjnych i do użytku osobistego.

Czcionki Google

OFL

Największa biblioteka typu open source z szybką globalną siecią CDN, podzbiorami i czcionkami zmiennymi. Idealny do Internetu i aplikacji. Większość rodzin korzysta z licencji SIL Open Font.

Czcionka internetowaZmiennyKomercyjne OK*

Udostępnianie czcionek (przez ITF)

Bezpłatny

Wysokiej jakości kroje pisma oferowane bezpłatnie przez Indian Type Foundry. Czyste rodziny, łatwe osadzanie w CDN i wiele zmiennych opcji.

Czcionka internetowaZmienny

Czcionka Wiewiórka

Darmowa reklama

Wyselekcjonowany katalog skupiający się na czcionkach do użytku komercyjnego. Zawiera generator czcionek internetowych do samodzielnego hostingu.

Komercyjne OK*Generator

Liga Typu Ruchomego

OFL

Klasyczna odlewnia open source z ponadczasowymi rodzinami, takimi jak League Spartan i Raleway. Świetne dla marki i redakcji.

Otwarte źródłoMarka

Aksamitny

OFL

Eksperymentalne kroje pisma typu open source z charakterystycznymi stylami wyświetlania. Idealny do plakatów, kultury i pracy twórczej.

WyświetlaczEksperymentalny

Kolektyw

OFL

Odlewnia społeczności udostępniająca wysokiej jakości darmowe czcionki na otwartych licencjach. Silne opcje redakcyjne i wyświetlania.

Otwarte źródłoRedakcyjny

Otwarta odlewnia

OFL

Wyselekcjonowany indeks czcionek typu open source z narzędziami testowymi i prezentacją zorientowaną na projekt. Idealny do odkrywania nowych rodzin.

1001 czcionek

Licencje mieszane

Duży katalog z filtrami do bezpłatnego użytku komercyjnego. Przeczytaj licencję na rodzinę; wiele z nich jest przeznaczonych wyłącznie do użytku osobistego.

DaFont

Użytek osobisty

Ogromne archiwum najlepsze do osobistych projektów i inspiracji. Licencje są bardzo zróżnicowane; sprawdź każdą stronę pobierania.

Czcionki ikon (czcionka Awesome, ikony materiałów, ikona remiksu)

Darmowe poziomy

W przypadku ikon interfejsu użytkownika korzystających z potoku czcionek. Weź pod uwagę nowoczesne systemy ikon SVG, ale czcionki ikon pozostają przydatne do szybkiego dodawania.

Interfejs użytkownikaCDN

Podgląd na żywo i fragmenty CSS

Tylko lokalnie — nic nie zostało przesłane
The quick brown fox jumps over the lazy dog. 0123456789
rodzina czcionek: Inter, sans-serif; waga czcionki: 600;

Porównanie funkcji (migawka)

Licencje różnią się w zależności od rodziny
Strona Otwarte źródło Darmowa reklama Zmienne czcionki CDN/czcionki internetowe Notatki
Czcionki GoogleTakTak*TakTakNajwiększa biblioteka, szybki CDN
Udostępnianie czcionekMieszanyTakWieleTakNowoczesne rodziny
Czcionka WiewiórkaMieszanyTak*NiektóreGeneratorWyselekcjonowane do użytku komercyjnego
Liga typu ruchomegoTakTakNiektóreSamodzielny gospodarzPonadczasowa klasyka
AksamitnyTakTakNiektóreSamodzielny gospodarzEksperymentalny pokaz
DaFontNIERóżnieKilkaNIEŚwietne do osobistych projektów

Jak korzystać z bezpłatnych czcionek w Internecie

  1. Sprawdź licencję: OFL i inne licencje zezwalające są najlepsze dla projektów komercyjnych. Niektóre witryny zawierają czcionki przeznaczone wyłącznie do użytku osobistego.
  2. Wybierz dostawę: łącze CDN dla szybkości lub własny hosting @font-face dla kontroli i prywatności.
  3. Załaduj wstępnie krytyczne czcionki dla tekstu głównego, jeśli problemem jest CLS; zdefiniuj stosy rezerwowe, aby uniknąć flashowania.
  4. Preferuj czcionki zmienne, jeśli są dostępne, aby zmniejszyć liczbę żądań i uzyskać elastyczne wagi.

Przykład CDN

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
  body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
</style>

Przykład samodzielnego hosta

@font-face{
  font-family: "MyFont";
  src: url("/fonts/MyFont-Variable.woff2") format("woff2");
  font-display: swap;
}
body{ font-family: "MyFont", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

* Zawsze sprawdzaj licencję każdej rodziny w witrynie źródłowej.

Często zadawane pytania

Czy czcionki Google są bezpłatne do użytku komercyjnego?

Większość z nich jest udostępniana w ramach OFL i jest bezpłatna do użytku komercyjnego. Potwierdź licencję na każdej stronie rodziny.

Czy powinienem używać czcionek ikon czy ikon SVG?

Ikony SVG są bardziej elastyczne w przypadku nowoczesnych aplikacji. Czcionki ikon pozostają przydatne w przypadku szybkich konfiguracji lub starszych potoków.

Czy czcionki internetowe wpływają na szybkość witryny?

Tak. Używać wyświetlanie czcionek: zamień, podzbiór, jeśli to możliwe, oraz ogranicz rodziny i wagi.

Jaka jest najlepsza czcionka ogólnego przeznaczenia?

Inter, Roboto i Source Sans 3 są wszechstronne. Połącz z szeryfem, takim jak Merriweather lub Playfair, aby uzyskać nagłówki.