Konwerter czcionek TTF na WOFF2
Własny hosting czcionki zaczyna się tutaj: WOFF2 to format, który każda współczesna przeglądarka pobiera w pierwszej kolejności, i zarazem najmniejsze opakowanie dla danych TrueType, które już masz. Ta strona przygotowuje też regułę CSS, która go wczytuje.
Konwerter czcionek
lub upuść Pliki TTF, OTF, WOFF … tutaj ·
Maks. 95 MB na plik· Do 20 plików· Usuwane po 30 min
Pliki są przetwarzane na naszych serwerach i usuwane po 30 min.
Usunięcie nieużywanych pism może zmniejszyć czcionkę internetową z setek KB do mniej niż 30 KB. Dla czcionek instalowanych na komputerze zachowaj wszystkie znaki.
Wklej tekst lub znaki, które czcionka ma obejmować, np. słowo z logo lub nagłówek. Wszystko inne zostanie usunięte.
Hinting wyostrza mały tekst na ekranach Windows. Usunięcie go często oszczędza 10–30% w czcionkach internetowych; auto-hint dodaje go do czcionek, które go nie mają.
Zostaw puste, aby zachować oryginał. Zmiana nazwy pozwala zainstalować przekonwertowaną czcionkę obok oryginału bez konfliktu.
Np. Regular, Bold, Italic. Zostaw puste, aby zachować oryginalną nazwę stylu.
Jak korzystać z narzędzia
- 1
Prześlij pliki TTF
Dodaj wszystkie odmiany i style, których zamierzasz używać – do 20 plików, każdy do 95 MB. Zmienne pliki TTF też działają i zachowują swoje osie.
- 2
Zostaw CSS włączony, w miarę możliwości utwórz podzbiór
Opcja Dołącz CSS @font-face jest już zaznaczona. W sekcji Ustawienia zaawansowane ustaw Zachowaj znaki na Basic Latin lub Latin + akcenty, jeśli Twoja strona jest w języku zachodnim, i rozważ ustawienie Hinting na Remove.
- 3
Konwertuj na WOFF2
Kliknij Konwertuj na WOFF2 i pobierz czcionki razem z plikiem .css. Wgraj oba na swoją stronę i podepnij arkusz stylów albo wklej regułę do własnego.
Jak przekonwertować TTF na WOFF2 na stronę internetową?
Wgraj plik .ttf, zostaw zaznaczoną opcję Dołącz CSS @font-face i kliknij Konwertuj na WOFF2. Otrzymasz plik .woff2 oraz plik .css z regułą @font-face, która na niego wskazuje.
Dlaczego warto publikować czcionki w formacie WOFF2
TTF to nieskompresowane tabele danych: kontury, metryki, kerning, nazwy. WOFF2, opublikowany jako rekomendacja W3C w 2018 roku, zachowuje dokładnie te same tabele, ale przepuszcza je przez Brotli, algorytm kompresji wydany przez Google w 2015 roku, po wcześniejszym przeorganizowaniu konturów glifów, by lepiej się kompresowały. Własne testy Google wykazały, że WOFF2 jest średnio około 30% mniejszy niż starszy format WOFF, a przeglądarka po pobraniu odtwarza oryginalne dane czcionki, więc kształt liter się nie zmienia.
Czcionki blokują renderowanie, więc ich rozmiar liczy się bardziej, niż sugerują kilobajty. Zanim czcionka internetowa dotrze, przeglądarka ukrywa tekst albo pokazuje czcionkę zastępczą, a spóźniona podmiana może przesunąć układ strony. Mniejsze pliki skracają ten czas, a dwie opcje tutaj skracają go jeszcze bardziej: Zachowaj znaki usuwa glify, których Twoje strony nigdy nie pokazują, a Hinting ustawiony na Remove pomija instrukcje, które telefony i ekrany o dużej gęstości i tak ignorują. Zachowaj pliki TTF do użytku na komputerze; WOFF2 do TTF może później rozpakować czcionkę internetową, ale nie przywróci glifów usuniętych w podzbiorze.
Rozmiar pliku: TTF a WOFF2
TTF, pełny zestaw znaków
100%
Nieskompresowane tabele czcionki, tak jak instalowane na komputerze
WOFF2, podzbiór Basic Latin
często 10–25%
Kompresja Brotli i mniej glifów; zależy od czcionki
Reguła @font-face dla czcionki WOFF2
@font-face {
font-family: "Brand Sans";
src: url("/fonts/brand-sans-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF;
}Obsługa WOFF2 w przeglądarkach według wersji
2014
Chrome 36
Przeglądarka Google jako pierwsza domyślnie dekoduje WOFF2.
2015
Firefox 39
Mozilla włącza domyślnie dekodowanie WOFF2.
2016
Edge 14
Pierwotny Edge od Microsoftu dodaje WOFF2 wraz z aktualizacją Windows 10 Anniversary Update.
2018
Rekomendacja W3C
Specyfikacja zostaje sfinalizowana; do tego czasu Safari na macOS i iOS również dekoduje WOFF2.
TTF
Czcionka TrueType
TTF to format czcionek TrueType opracowany przez Apple pod koniec lat 80. i wydany w 1991 roku, a następnie licencjonowany firmie Microsoft. Opisuje kontury znaków za pomocą krzywych kwadratowych i zawiera instrukcje hintingu, dzięki którym tekst wygląda ostro na ekranie. TrueType obsługuje każdy system desktopowy, edytor tekstu i aplikacja graficzna. Brakuje mu niektórych zaawansowanych funkcji typograficznych OpenType, a pliki są większe niż w formatach czcionek internetowych.
- Kompresja
- Bezstratna
- Przezroczystość
- –
- Animacja
- –
- Rok powstania
- 1991 · Apple
WOFF2
Web Open Font Format 2
WOFF2 to druga wersja Web Open Font Format, oparta na kompresji Brotli od Google i opublikowana jako Rekomendacja W3C w 2018 roku. Pliki są o około 30% mniejsze niż WOFF, co pomaga szybciej wczytywać strony. Każda nowoczesna przeglądarka obsługuje WOFF2 i jest to zalecany format czcionek internetowych. Systemy desktopowe i aplikacje graficzne nie mogą go bezpośrednio instalować.
- Kompresja
- Bezstratna
- Przezroczystość
- –
- Animacja
- –
- Rok powstania
- 2018 · W3C (Google)
TTF do WOFF2 pakuje czcionkę z komputera do kontenera kompresowanego algorytmem Brotli, który przeglądarki preferują, więc te same glify docierają do odwiedzających w mniejszej liczbie bajtów; strona w drugą stronę jest dla osób, które chcą zainstalować czcionkę znalezioną w sieci.
TTF na WOFF2 – najczęstsze pytania
Czy obok WOFF2 nadal potrzebny jest zapasowy TTF lub WOFF?
W przypadku publicznych stron dziś zwykle nie. Chrome, Edge, Firefox i Safari obsługują WOFF2 od lat, a nieliczne przeglądarki, które tego nie robią, jak Internet Explorer 11, rzadko są warte dodatkowego pliku. Dodaj plik z TTF do WOFF jako drugi wpis src tylko wtedy, gdy analityka pokazuje takich użytkowników.
Dlaczego moja czcionka WOFF2 wciąż waży ponad 100 KB?
Kompresja zmniejsza tylko sposób zapisu glifów, a nie ich liczbę. Czcionka obejmująca łacinę, cyrylicę, grekę i wietnamski zawiera je wszystkie. Dopiero podzbiór pism, które faktycznie wyświetlasz, sprowadza czcionkę tekstową do kilkudziesięciu kilobajtów.
Do czego służy font-display: swap?
Mówi przeglądarce, by od razu pokazała tekst czcionką zastępczą, a po pobraniu Twojej czcionki internetowej ją podmieniła, zamiast ukrywać tekst w trakcie pobierania. Dodaj ją do reguły @font-face jak w przykładzie powyżej albo użyj optional, jeśli wolisz pominąć spóźnioną podmianę przy wolnym łączu.
Czy można przekonwertować TTF z Google Fonts na WOFF2 i hostować go samodzielnie?
Tak. Rodziny czcionek Google Fonts są wydawane na licencji SIL Open Font License lub Apache License, które zezwalają na konwersję i hosting na własnym serwerze. Hostowanie pliku samodzielnie pozwala też uniknąć zapytania do zewnętrznego serwera.
Czy WOFF2 działa w newsletterach e-mailowych?
Tylko w niektórych programach. Apple Mail i iOS Mail ładują czcionki internetowe przez @font-face, a Gmail i większość wersji Outlooka ignoruje je i pokazuje czcionkę zastępczą. Zawsze podawaj bezpieczną czcionkę systemową w stosie czcionek wiadomości e-mail.