Fontplop: darmowe narzędzia do czcionek online — tester, konwerter i generator

Fontplop to darmowy serwis z narzędziami do czcionek online działającymi w przeglądarce: tester fontów (TTF, OTF, WOFF, WOFF2), konwerter TTF do WOFF2 i z powrotem, generator webfontów z CSS, porównywarka krojów, ściąga cech OpenType i generatory tekstu Unicode do Instagrama czy Discorda. Według deklaracji serwisu pliki fontów są przetwarzane lokalnie, a interfejs jest w całości po angielsku.

Serwis ma nową odsłonę i rozbudowany zestaw narzędzi. Poniżej: co każde z nich robi, jak go użyć, dla kogo jest i na co uważać — z myślą o polskich znakach.

Narzędzia fontplop w pigułce: do czego i dla kogo

Przeglądarka i tester fontów: podgląd czcionki online bez instalacji

Strona główna to przeglądarka i tester fontów. Przeciągasz na nią plik TTF, OTF, WOFF lub WOFF2 i dostajesz siedem zakładek:

• Glyphs — wszystkie glify z kodami Unicode; wyszukiwarka przyjmuje literę, kod U+0105 albo nazwę glifu.
• Tester — własny tekst, suwaki rozmiaru, interlinii i odstępów, „wodospad” rozmiarów 12–80 px i gotowe zestawy, m.in. Accents.
• Info — nazwy, wersja, licencja, ustawienie osadzania (fsType), liczba glifów i tabele fontu.
• Features i Variable — przełączanie cech OpenType oraz suwaki osi fontu zmiennego, z gotowym CSS do skopiowania.
• Languages — lista 27 sprawdzanych języków (w tym polski) z brakującymi znakami i pokrycie bloków Unicode.
• Metrics & checks — szybka kontrola jakości: znaki, nazwy, metryki pionowe, kerning.

Na przykładowym Interze (przycisk „Try Inter (variable)”) kontrola dała 18 testów zaliczonych i jedno ostrzeżenie: usWinAscent/usWinDescent są mniejsze niż zasięg glifów, więc wysokie akcenty mogą zostać przycięte w Windows. To wstępna kontrola, nie zamiennik Font Bakery. Plików .ttc, .dfont, Type 1 i archiwów ZIP narzędzie nie otworzy.

Jak sprawdzić polskie znaki w foncie

1. Wczytaj plik fontu na stronę główną.
2. Otwórz zakładkę Languages i sprawdź, czy przy „Polish” jest znak ✓. Jeśli nie, poniżej zobaczysz brakujące litery.
3. W zakładce Tester kliknij zestaw Accents — pierwsza fraza to „Zażółć gęślą jaźń”. Dopisz wersję wielkimi literami i powiększ tekst, żeby ocenić kształt ogonków.
4. W zakładce Glyphs wpisz „ą” lub U+0105 — wyszukiwarka pokaże glif, jego szerokość i punkty konturu.

Każdą odmianę (Regular, Bold, Italic) sprawdź osobno. Inne metody, także offline i w Pythonie, opisuje poradnik jak sprawdzić, czy czcionka ma polskie znaki.

Konwerter czcionek: TTF do WOFF2, WOFF2 do TTF i generator webfontów

Konwertery używają kodera i dekodera WOFF2 od Google skompilowanych do działania w przeglądarce. Każdy przyjmuje TTF, OTF, WOFF i WOFF2 — nazwa strony ustala tylko domyślny format wyjściowy. Glify, kerning, cechy OpenType i hinting zostają. Specyfikację formatu opisuje rekomendacja W3C WOFF 2.0.

TTF do WOFF2: pliki na stronę

1. Otwórz konwerter TTF do WOFF2 i przeciągnij pliki na pole „Drop TTF files here” — całą rodzinę naraz.
2. Wybierz Convert to WOFF2 (web).
3. Pobierz pliki pojedynczo albo przyciskiem Download all jako ZIP.

Według serwisu WOFF2 waży często od jednej trzeciej do połowy TTF. Błąd „WOFF2 compression failed” oznacza zwykle uszkodzony plik źródłowy.

WOFF2 do TTF: font webowy w Wordzie lub Figmie

Konwerter WOFF2 do TTF przydaje się, bo systemy nie instalują WOFF2. Font z konturami PostScript (CFF) zapisze się jako OTF. Fonty webowe bywają przycięte do podzbioru znaków, a konwerter nie dorobi brakujących liter — polskie znaki sprawdź w testerze.

Generator webfontów z CSS @font-face

Generator webfontów z gotowym CSS to opcja „Webfont kit (WOFF2 + WOFF + CSS)”. Paczka zawiera pliki WOFF2 i WOFF, stylesheet.css z regułą @font-face dla każdego pliku (z font-display: swap) i podgląd demo.html. Nazwę rodziny, grubość i kursywę narzędzie czyta z plików, więc Regular, Bold i Italic trafiają do jednej rodziny.

Generator nie robi subsettingu ani nie dopisuje unicode-range. Przycięcie do Latin-1 i polskich liter opisuje artykuł o fontach na stronie, WOFF2 i font-display. Pliki WOFF możesz pominąć — współczesnym przeglądarkom wystarczy WOFF2.

Porównanie dwóch fontów i font zapasowy bez skoku układu (CLS)

Porównywarka fontów ma dwa sloty, Font A i Font B: każdy wybierasz z listy 165 krojów na otwartych licencjach albo wczytujesz własny plik („Upload a font”).

• Overlay nakłada oba kroje na wspólną linię bazową, a Side by side stawia je obok siebie.
• Match x-height wyrównuje wysokość małych liter, żeby porównywać kształty, a nie rozmiar.
• Tabela Measurements pokazuje w em wysokość x, wersalików, wydłużenia i średnią szerokość.

Najbardziej praktyczna jest sekcja „Use font B as a fallback for font A”: generuje regułę z size-adjust, ascent-override i descent-override, dzięki której font zapasowy zajmuje tyle miejsca co docelowy. Gdy font webowy dociąga się z font-display: swap, tekst nie przeskakuje, a CLS nie rośnie. Wartości są przybliżone — size-adjust czasem trzeba skorygować o 1–2%.

Ariala nie ma na liście, więc wczytaj jego plik z C:\Windows\Fonts i sprawdź, czy src w regule wskazuje font lokalny przez local(). Safari ignoruje ascent-override, więc na iPhone’ach dopasowanie będzie częściowe. Efekt zmierzysz w PageSpeed Insights, jak opisano w poradniku test strony internetowej.

Cechy OpenType w CSS: liga, kern, tnum, smcp

Strona cechy OpenType z podglądem i CSS to ściąga z tagami takimi jak liga, kern, smcp, onum, tnum, frac czy ss01–ss20. Kolumna „In this font” pokazuje każdą cechę wyłączoną i włączoną — w Interze albo, po kliknięciu „Test your own font”, w Twoim pliku.

Serwis zaleca w codziennym CSS właściwości wysokiego poziomu, np. font-variant-numeric: tabular-nums zamiast tnum czy font-variant-caps: small-caps zamiast smcp. Właściwość font-feature-settings w dokumentacji MDN zostaw na tagi bez odpowiednika.

Statystyki fontów Google Fonts

Statystyki fontów to raport, a nie narzędzie. Opiera się na katalogu Google Fonts (1908 rodzin, październik 2026 r.) zmierzonym biblioteką fontTools i na danych o wyszukiwaniach z Ahrefs. Wynika z niego m.in., że 28% rodzin to fonty zmienne, 56% ma tylko jedną grubość, a 78% zawiera kerning.

Generator czcionek do Instagrama i Discorda: to znaki Unicode, nie fonty

Osobna grupa to style tekstu do kopiowania, w tym generator czcionek na Instagram i czcionki do Discorda: wpisujesz tekst, kopiujesz styl i wklejasz w bio, nick albo komentarz.

Technicznie nie zmieniasz tu fontu. Każda litera jest zamieniana na inny znak Unicode, najczęściej z bloku Mathematical Alphanumeric Symbols (U+1D400–U+1D7FF). Ten blok powstał dla zapisu matematycznego: pogrubione „𝐀” to osobny symbol, a nie „A” w innym kroju.

Test: „Zażółć gęślą jaźń” w generatorze

Po wpisaniu „Zażółć gęślą jaźń” w generatorze pisma odręcznego styl Bold Script daje: „𝓩𝓪żółć 𝓰ęś𝓵ą 𝓳𝓪źń”. Ozdobne są tylko litery łacińskie bez znaków diakrytycznych, a ż, ó, ł, ć, ę, ś, ą, ź i ń zostały zwykłymi literami. Tak samo wyszły pogrubienie, kursywa, fraktura, monospace, kapitaliki i litery w kółkach. Ogonki zachowały tylko style dodające do litery znak łączący (przekreślenie, podkreślenie, glitch), a w stylu „do góry nogami” polskie litery nie zostały obrócone. Blok matematyczny po prostu nie ma liter z diakrytykami, więc ozdobne polskie słowo zawsze będzie mieszanką dwóch krojów.

Skutki: czytniki ekranu, wyszukiwarka, limity znaków

• Czytniki ekranu mogą odczytać takie znaki jako nazwy symboli matematycznych, przeliterować je albo pominąć — ozdobny nick bywa dla niewidomego użytkownika niezrozumiały.
• Wyszukiwarki i wyszukiwanie w aplikacjach często nie traktują „𝓩” jak „Z”. Fontplop sam radzi trzymać w nazwie profilu słowa kluczowe zwykłym tekstem, a stylizowane hashtagi nie działają.
• Znaki spoza podstawowej płaszczyzny Unicode zajmują dwie jednostki kodu (UTF-16) i wiele aplikacji liczy je podwójnie. W 150-znakowym bio na Instagramie zmieścisz wtedy nawet o połowę mniej liter.

Niewidzialny znak, pusty nick, Wingdings i runy

Narzędzie niewidzialny znak do skopiowania zbiera „puste” znaki z przyciskiem Copy. Do pustych nicków najlepiej sprawdzają się Hangul Filler (U+3164) i Braille Pattern Blank (U+2800), bo aplikacje traktują je jak litery, a nie spacje. Spacja zerowej szerokości (U+200B) przydaje się np. do wyłączenia automatycznej wzmianki po „@”. Detektor na tej samej stronie znajduje ukryte znaki we wklejonym tekście i je usuwa.

Uwaga: Puste nicki służące do omijania banów albo podszywania się pod innych łamią regulaminy większości gier i komunikatorów. Niewidoczne znaki w kodzie, adresach czy hasłach potrafią zepsuć działanie i są trudne do wykrycia.

Tłumacze Wingdings i run zamieniają litery angielskie na symbole Unicode (w obie strony). Polskie znaki zostały w teście bez zmian, więc pisz bez ogonków.

Gry i symulatory: kerning, krzywe Béziera, kaligrafia

• Gra w kerning: w 10 rundach przesuwasz litery słowa, a wynik 0–100 mówi, jak blisko jesteś odstępów zapisanych w foncie.
• Gra w krzywe Béziera uczy rysowania piórem: punkty na skrajnych pozycjach łuku, poziome lub pionowe uchwyty, jak najmniej punktów — przydaje się w Figmie czy Illustratorze.
• Symulator pióra kaligraficznego pokazuje, skąd bierze się kontrast kreski przy różnych piórach i kątach; eksport do PNG lub SVG.

Typowe scenariusze krok po kroku

Font na stronę w 5 krokach

1. W testerze sprawdź licencję i fsType (zakładka Info) oraz polskie znaki (Languages) — w każdej grubości.
2. Przekonwertuj pliki TTF do WOFF2 albo zbuduj paczkę w generatorze webfontów.
3. Jeśli zależy Ci na rozmiarze, przytnij font do Latin-1 i polskich liter narzędziem pyftsubset, a wynik ponownie wczytaj do testera.
4. W porównywarce wybierz font zapasowy i skopiuj regułę z size-adjust.
5. W cechach OpenType dobierz np. cyfry tabelaryczne i wklej CSS do arkusza.

Font do logo lub prezentacji z polskimi znakami

W generatorze fontów do logo wpisz nazwę marki i porównaj ją w 18 krojach na licencji OFL. Jeśli nazwa ma polską literę, nie ufaj samemu podglądowi: pobierz wybrany font przyciskiem „Get font”, wczytaj go do testera i sprawdź „Zażółć gęślą jaźń” w dużym rozmiarze. Logo eksportujesz jako PNG, a przy wyborze kroju przydadzą się też prawa UX i zasady projektowania.

Ozdobny podpis na Instagramie bez szkody dla dostępności

Stylizuj jedno lub dwa słowa, a nie cały opis. Słowa z polskimi literami zostaw zwykłym tekstem, bo i tak wyjdą „w kratkę”. Nazwa profilu i hashtagi zawsze zwykłymi literami, żeby dało się Cię znaleźć.

Licencje i prywatność: na co uważać

Konwersja formatu nie zmienia licencji. Licencja desktopowa często nie obejmuje użycia na stronie (webfont wymaga wtedy osobnej licencji), a webowa — instalacji w systemie. Konwertuj fonty własne lub na otwartych licencjach (np. SIL OFL), nie pobrane z cudzych stron.

Ważne: Polityka prywatności fontplop mówi, że wpisywany tekst jest przetwarzany w przeglądarce, a strona główna i stopka — że pliki fontów też nie są wysyłane. Serwer zapisuje standardowe logi (m.in. adres IP), a serwis może korzystać z Google Analytics i reklam AdSense z plikami cookie.

Wiele konwerterów online przesyła plik na serwer i kasuje go nawet po 24 godzinach, więc przy komercyjnych fontach klienta lokalne przetwarzanie ma znaczenie.