@font-face Tagabuo ng Webfont
Variable fonts, WOFF2 at CSS sa isang click
I-drop ang iyong mga TTF, OTF, WOFF o WOFF2 na mga file — kabilang ang variable fonts — piliin ang iyong mga setting, at i-download ang handa nang i-host na bundle kasama ang WOFF2, WOFF, isang kumpletong stylesheet.css at isang live demo page.
I-drop ang mga font dito o i-click upang mag-browse
TTF, OTF, WOFF, WOFF2 at variable fonts — pinapayagan ang maraming mga file
Napiling mga font
Mga setting ng conversion
Ito ang pangalan na gagamitin mo sa iyong CSS, tulad ng font-family: 'MyName';. Iwanang walang laman upang panatilihin ang orihinal na pangalan ng pamilya ng bawat font mula sa file.
Kontrolin kung paano ipinapakita ang teksto habang naglo-load ang webfont.
Daan na ginamit sa loob ng url(...) sa nabuo na stylesheet.
Tip: pindutin ang Ctrl+Enter upang bumuo.
Handa na ang iyong webfont pack
Ang ZIP ay naglalaman ng: na-convert na mga font, stylesheet.css at isang live demo.html.
100% sa panig ng kliyente
Ang conversion ay ganap na tumatakbo sa iyong browser gamit ang WebAssembly. Ang iyong mga font ay hindi kailanman na-upload.
Variable fonts & lahat ng format
TTF, OTF, WOFF at WOFF2 sa — optimized na WOFF2 out, na may buong suporta sa variable-font axis (wght, wdth, slnt, ital).
Resultang handa para sa produksyon
Naglalaman ng isang stylesheet.css na may tamang font-display, opsyonal na local() at isang demo.html upang maihulog mo ang bundle nang direkta sa iyong proyekto.
Ano ang tagabuo ng webfont?
Ang tagabuo ng webfont ay nagbabago ng mga desktop o na-download na font files (TTF, OTF, WOFF, WOFF2 — kabilang ang modernong variable fonts) sa mga format na ma-load ng mga browser sa web — pangunahing WOFF2 ngayon, na may WOFF bilang legacy fallback — at gumagawa ng mga tumutugmang CSS @font-face declarations upang maaari mong i-self-host ang typography ng iyong website.
Bakit i-self-host ang mga font?
Ang self-hosting ay nagbibigay sa iyo ng buong kontrol sa pagganap, privacy at pagiging maaasahan. Walang third-party request sa Google Fonts (kapaki-pakinabang para sa GDPR), walang karagdagang DNS lookup, maaari mong i-preload ang file, at ikaw ang nagpasya kung aling mga timbang, estilo at axis ang isasama sa iyong site.
Paano gumagana ang conversion
Ang WOFF2 ay nagbabalot ng iyong TTF/OTF outlines sa isang Brotli-compressed container na dinisenyo partikular para sa web — karaniwang 30% na mas maliit kaysa sa WOFF at higit sa 50% na mas maliit kaysa sa raw TTF. Ang WOFF ay isang mas lumang zlib-compressed wrapper, na pinanatili bilang fallback para sa napaka-lumang mga browser. Ang aming tagabuo ay tumatakbo sa opisyal na WOFF2 encoder at decoder ng Google na nakompile sa WebAssembly, kaya ang conversion ay nagaganap nang lokal sa loob ng iyong browser. I-drop ang isang WOFF2 na na-download mo mula sa Google Fonts at kami ay transparently na nag-decode nito pabalik sa isang sfnt container bago muling i-encode — hindi mo kailangang hanapin ang orihinal na TTF.
Ano ang makukuha mo sa bundle
- Mga Font sa WOFF2 (at opsyonal na WOFF/TTF) para sa bawat na-upload na mukha — kabilang ang variable fonts na pinanatili bilang isang maliit na file.
- Isang kumpletong stylesheet.css na may isang @font-face rule bawat file, ang tamang format() hints, mga saklaw ng font-weight, font-style, font-stretch, font-display at opsyonal na local().
- Isang demo.html na pahina upang maaari mong i-preview ang bawat timbang, estilo at axis sa maraming sukat bago pumunta sa live.
- Opsyonal na Base64 embedding upang i-ship ang font inline sa iyong CSS para sa offline-first o single-file na mga senaryo.
Pagkapribado at paglilisensya
Ang mga file ay hindi kailanman umaalis sa iyong device — lahat ay pinoproseso sa iyong browser. Palaging siguraduhin na ang lisensya ng iyong font ay nagpapahintulot sa webfont embedding bago ito ilathala sa iyong website.