UltKit

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

Plik wynikowy

Pliki są przetwarzane na naszych serwerach i usuwane po 30 min.

Jak korzystać z narzędzia

  1. 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. 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. 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.

Odpowiedź

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

Typowo dla wielopismowej czcionki tekstowej

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

Przykładowa reguła; zmień nazwy i usuń unicode-range, jeśli nie tworzyłeś podzbioru
@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

  1. 2014

    Chrome 36

    Przeglądarka Google jako pierwsza domyślnie dekoduje WOFF2.

  2. 2015

    Firefox 39

    Mozilla włącza domyślnie dekodowanie WOFF2.

  3. 2016

    Edge 14

    Pierwotny Edge od Microsoftu dodaje WOFF2 wraz z aktualizacją Windows 10 Anniversary Update.

  4. 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
Konwerter TTF

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)
Konwerter WOFF2

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.