Převodník TTF do WOFF2

Vlastní hostování fontu začíná tady: WOFF2 je formát, který všechny současné prohlížeče stahují přednostně, a zároveň nejmenší obal pro data TrueType, která už máte. Tato stránka navíc vytvoří pravidlo CSS, které font načte.

nebo sem přetáhněte soubory TTF, OTF, WOFF … ·

Max. 95 MB na soubor· Až 20 souborů· Smazáno po 30 minutách

Výstup

Převést na

Soubory se zpracovávají na našich serverech a po 30 minutách se smažou.

Jak nástroj používat

1
Nahrajte soubory TTF
Přidejte všechna řezy a styly, které chcete použít, až 20 souborů po maximálně 95 MB. Fungují i variabilní TTF a zachovají si své osy.
2
Nechte zapnuté CSS a použijte podmnožinu znaků
Volba Přiložit CSS s @font-face je už zaškrtnutá. V části Pokročilá nastavení nastavte Zachovat znaky na Basic Latin nebo Latin + diakritika, pokud je váš web v západním jazyce, a zvažte nastavení Hinting na Odstranit.
3
Převést na WOFF2
Klikněte na Převést na WOFF2 a stáhněte fonty spolu se souborem .css. Nahrajte obojí na svůj web a připojte stylopis, nebo pravidlo vložte do vlastního CSS.

Odpověď

Jak převést TTF do WOFF2 pro svůj web?

Nahrajte soubor .ttf, nechte zaškrtnuté Přiložit CSS s @font-face a klikněte na Převést na WOFF2. Získáte soubor .woff2 a soubor .css s pravidlem @font-face, které na něj odkazuje.

Proč na web nasadit právě fonty WOFF2

TTF jsou nekomprimovaná tabulková data: obrysy, metriky, kerning, jména. WOFF2, vydaný jako doporučení W3C v roce 2018, zachovává přesně tyto tabulky, ale po úpravě obrysů glyfů pro lepší kompresi je protáhne přes Brotli, kompresní algoritmus, který Google vydal v roce 2015. Vlastní testy Googlu ukázaly, že WOFF2 je v průměru zhruba o 30 % menší než starší WOFF, a prohlížeč po stažení obnoví původní data fontu, takže se tvary písmen nijak nemění.

Fonty blokují vykreslení, takže na jejich velikosti záleží víc, než naznačují kilobajty. Dokud webový font nedorazí, prohlížeč text buď skrývá, nebo zobrazuje záložním fontem a pozdní výměna může posunout rozvržení. Menší soubory toto okno zkracují a dvě volby zde ho zkracují ještě víc: Zachovat znaky odstraní glyfy, které vaše stránky nikdy nezobrazí, a Hinting nastavený na Odstranit zahodí instrukce, které telefony a displeje s vysokou hustotou stejně ignorují. Hlavní soubory TTF si ponechte pro desktop; WOFF2 do TTF umí webový font později rozbalit, ale glyfy odstraněné při omezení znaků nevrátí.

Velikost souboru TTF a WOFF2

TTF, úplná znaková sada

100%

Nekomprimované tabulky fontu, jak se instalují na desktop

Typické pro textový font s více písmy

WOFF2, podmnožina Basic Latin

často 10–25 %

Komprese Brotli a méně glyfů; liší se podle fontu

Pravidlo @font-face pro font WOFF2

Ukázkové pravidlo; nahraďte názvy a pokud jste font neomezili, vynechte unicode-range

@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;
}

Podpora WOFF2 v prohlížečích podle verzí

2014
Chrome 36
Prohlížeč od Googlu jako první dekóduje WOFF2 ve výchozím nastavení.
2015
Firefox 39
Mozilla ve výchozím nastavení zapíná dekódování WOFF2.
2016
Edge 14
Původní Edge od Microsoftu přidává WOFF2 s aktualizací Windows 10 Anniversary Update.
2018
Doporučení W3C
Specifikace je dokončena; Safari v macOS i iOS už v té době také dekóduje WOFF2.

TTF

Písmo TrueType

TTF je formát písem TrueType, který vyvinul Apple koncem 80. let, vydal v roce 1991 a poté licencoval Microsoftu. Obrysy znaků popisuje kvadratickými křivkami a obsahuje hinting, díky němuž je text na obrazovce ostrý. TrueType podporuje každý desktopový operační systém, textový procesor i návrhářská aplikace. Chybí mu některé pokročilé typografické funkce OpenTypu a je větší než webové formáty písem.

Komprese: Bezztrátová
Průhlednost: –
Animace: –
Představeno: 1991 · Apple

Převodník TTF

WOFF2

Web Open Font Format 2

WOFF2 je druhá verze formátu Web Open Font Format, založená na kompresi Brotli od Googlu a vydaná v roce 2018 jako doporučení W3C. Soubory jsou asi o 30 % menší než WOFF, což pomáhá rychlejšímu načítání stránek. WOFF2 podporuje každý moderní prohlížeč a je doporučeným formátem webových písem. Desktopové operační systémy a návrhářské aplikace jej přímo nainstalovat nedokážou.

Komprese: Bezztrátová
Průhlednost: –
Animace: –
Představeno: 2018 · W3C (Google)

Převodník WOFF2

Převod TTF do WOFF2 zabalí desktopový font do kontejneru s kompresí Brotli, který prohlížeče preferují, takže stejné glyfy dorazí k návštěvníkům v menším počtu bajtů; opačná stránka je pro ty, kdo potřebují nainstalovat font nalezený na webu.

Časté dotazy k převodu TTF do WOFF2

Potřebuji vedle WOFF2 ještě záložní TTF nebo WOFF?

Pro veřejné weby dnes obvykle ne. Chrome, Edge, Firefox i Safari čtou WOFF2 už řadu let a těch pár prohlížečů, které ne, například Internet Explorer 11, málokdy stojí za další soubor. Výstup z TTF do WOFF přidejte jako druhý záznam src jen tehdy, pokud vaše analytika takové návštěvníky ukazuje.

Proč má můj font WOFF2 pořád přes 100 KB?

Komprese zmenšuje jen způsob uložení glyfů, ne jejich počet. Font, který pokrývá latinku, cyrilici, řečtinu i vietnamštinu, je obsahuje všechny. Textový font srazí na desítky kilobajtů až omezení na písma, která skutečně zobrazujete.

Co dělá font-display: swap?

Říká prohlížeči, aby text ihned zobrazil záložním fontem a po načtení váš webový font vyměnil, místo aby text během stahování skrýval. Přidejte ji do pravidla @font-face jako v příkladu výše, nebo použijte optional, pokud na pomalém připojení nechcete pozdní výměnu.

Mohu převést TTF z Google Fonts do WOFF2 a hostovat ho sám?

Ano. Rodiny z Google Fonts jsou vydané pod licencí SIL Open Font License nebo Apache License a obě umožňují převod i vlastní hosting. Hostování souboru u sebe navíc ušetří požadavek na server třetí strany.

Funguje WOFF2 v e-mailových newsletterech?

Jen v některých klientech. Apple Mail a iOS Mail načítají webové fonty přes @font-face, zatímco Gmail a většina verzí Outlooku je ignoruje a zobrazí záložní font. V seznamu fontů e-mailu vždy uveďte bezpečný systémový font.

Převodník TTF do WOFF2

Převodník písem

Jak nástroj používat

Nahrajte soubory TTF

Nechte zapnuté CSS a použijte podmnožinu znaků

Převést na WOFF2