@font-face Webfont-generaattori
Muuttuvat fontit, WOFF2 ja CSS yhdellä napsautuksella
Pudota TTF, OTF, WOFF tai WOFF2 tiedostosi — mukaan lukien muuttuvat fontit — valitse asetuksesi ja lataa valmiiksi isännöitävä paketti, jossa on WOFF2, WOFF, täydellinen stylesheet.css ja live-demo-sivu.
Vedä fontit tänne tai napsauta selaa
TTF, OTF, WOFF, WOFF2 ja muuttuvat fontit — useita tiedostoja sallittu
Valitut fontit
Muunna asetukset
Tämä on nimi, jota käytät CSS:ssä, kuten font-family: 'MyName';. Jätä tyhjäksi, jotta jokaisen fontin alkuperäinen perheen nimi säilyy tiedostosta.
Säätelee, miten teksti näytetään, kun webfonttia ladataan.
Polku, jota käytetään url(...) sisällä luodussa tyylitiedostossa.
Vinkki: paina Ctrl+Enter luodaksesi.
Webfont-pakettisi on valmis
ZIP sisältää: muunnetut fontit, stylesheet.css:n ja live demo.html:n.
100 % asiakaspuolella
Muuntaus tapahtuu kokonaan selaimessasi käyttäen WebAssemblyä. Fonttisi eivät koskaan ladata.
Muuttuvat fontit & kaikki muodot
TTF, OTF, WOFF ja WOFF2 sisään — optimoitu WOFF2 ulos, täydellä muuttuvan fontin akselitukella (wght, wdth, slnt, ital).
Tuotantovalmiit tulosteet
Lähetetään stylesheet.css oikealla font-display:llä, valinnaisella local() ja demo.html, jotta voit pudottaa paketin suoraan projektiisi.
Mikä on webfont-generaattori?
Webfont-generaattori muuntaa työpöytä- tai ladattuja fonttitiedostoja (TTF, OTF, WOFF, WOFF2 — mukaan lukien modernit muuttuvat fontit) muotoihin, joita selaimet voivat ladata verkossa — pääasiassa WOFF2 tänään, WOFF perintövarana — ja tuottaa vastaavat CSS @font-face -ilmoitukset, jotta voit itse isännöidä verkkosivustosi typografiaa.
Miksi isännöidä fontteja itse?
Itse isännöinti antaa sinulle täydellisen hallinnan suorituskyvystä, yksityisyydestä ja luotettavuudesta. Ei ole kolmannen osapuolen pyyntöä Google Fontsille (hyödyllistä GDPR:n kannalta), ei ylimääräistä DNS-hakua, voit esiladata tiedoston, ja päätät tarkalleen, mitkä painot, tyylit ja akselit lähetetään sivustosi mukana.
Kuinka muunnos toimii
WOFF2 käärii TTF/OTF-viivat Brotli-pakatun säiliön sisään, joka on suunniteltu erityisesti verkkoa varten — tyypillisesti 30 % pienempi kuin WOFF ja yli 50 % pienempi kuin raaka TTF. WOFF on vanhempi zlib-pakatun kääreen, jota pidetään varalla hyvin vanhoille selaimille. Generaattorimme käyttää Googlen virallista WOFF2-kooderia ja -purkaja, joka on käännetty WebAssembly:lle, joten muunnos tapahtuu paikallisesti selaimessasi. Pudota WOFF2, jonka latasit Google Fontsista, ja puramme sen läpinäkyvästi takaisin sfnt-säiliöön ennen uudelleenkoodausta — sinun ei koskaan tarvitse metsästää alkuperäistä TTF:tä.
Mitä saat paketissa
- Fontit WOFF2:ssa (ja valinnaisesti WOFF/TTF) jokaiselle ladatulle kasvomuodolle — mukaan lukien muuttuvat fontit, jotka pidetään yhtenä pienenä tiedostona.
- Täydellinen stylesheet.css yhdellä @font-face -säännöllä per tiedosto, oikeat format() vihjeet, font-weight -arvot, font-style, font-stretch, font-display ja valinnainen local().
- Demo.html-sivu, jotta voit esikatsella jokaista painoa, tyyliä ja akselia useissa kooissa ennen julkaisua.
- Valinnainen Base64-upotus, jotta fontti voidaan lähettää inline CSS:ssä offline-ensimmäisissä tai yksittäistiedostotilanteissa.
Yksityisyys & lisensointi
Tiedostot eivät koskaan poistu laitteeltasi — kaikki käsitellään selaimessasi. Varmista aina, että fonttisi lisenssi sallii webfontin upottamisen ennen sen julkaisemista verkkosivustollasi.