@font-face Generador de Webfonts
Fonts variables, WOFF2 i CSS en un clic
Deixa caure els teus fitxers TTF, OTF, WOFF o WOFF2 — incloent fonts variables — tria les teves configuracions i descarrega un paquet llest per allotjar amb WOFF2, WOFF, un full d'estil complet .css i una pàgina de demostració en viu.
Deixa caure fonts aquí o fes clic per navegar
TTF, OTF, WOFF, WOFF2 i fonts variables — es permeten múltiples fitxers
Fonts seleccionades
Configuracions de conversió
Aquest és el nom que utilitzaràs en el teu CSS, com font-family: 'MyName';. Deixa buit per mantenir el nom original de la família de cada font del fitxer.
Controla com es mostra el text mentre es carrega la webfont.
Camí utilitzat dins de url(...) en el full d'estil generat.
Consell: prem Ctrl+Enter per generar.
El teu paquet de webfonts està llest
El ZIP conté: fonts convertides, stylesheet.css i un demo.html en viu.
100% del costat del client
La conversió es realitza completament al teu navegador mitjançant WebAssembly. Les teves fonts mai s'uploaden.
Fonts variables i tots els formats
TTF, OTF, WOFF i WOFF2 en — WOFF2 optimitzat fora, amb suport complet per a eixos de fonts variables (wght, wdth, slnt, ital).
Sortida llesta per a producció
Inclou un stylesheet.css amb el font-display correcte, local() opcional i un demo.html perquè puguis deixar caure el paquet directament al teu projecte.
Què és un generador de webfonts?
Un generador de webfonts converteix fitxers de fonts de sobretaula o descarregats (TTF, OTF, WOFF, WOFF2 — incloent fonts variables modernes) als formats que els navegadors poden carregar a través de la web — principalment WOFF2 avui, amb WOFF com a substitut llegat — i produeix declaracions CSS @font-face coincidents perquè puguis allotjar tu mateix la tipografia del teu lloc web.
Per què allotjar fonts per tu mateix?
L'allotjament propi et dóna un control total sobre el rendiment, la privadesa i la fiabilitat. No hi ha cap sol·licitud de tercers a Google Fonts (útil per al GDPR), cap cerca DNS addicional, pots pre carregar el fitxer, i tu decideixes exactament quins pesos, estils i eixos s'inclouen al teu lloc.
Com funciona la conversió
WOFF2 embolica els teus contorns TTF/OTF en un contenidor comprimit amb Brotli dissenyat específicament per a la web — típicament un 30 % més petit que WOFF i més del 50 % més petit que el TTF brut. WOFF és un embolcall més antic comprimit amb zlib, mantingut com a substitut per a navegadors molt antics. El nostre generador executa l'encoder i decoder oficial de WOFF2 de Google compilats a WebAssembly, així que la conversió es realitza localment dins del teu navegador. Deixa caure un WOFF2 que has descarregat de Google Fonts i el decodegem de manera transparent de nou a un contenidor sfnt abans de re-codificar — mai has de buscar el TTF original.
Què obtens al paquet
- Fonts en WOFF2 (i opcionalment WOFF/TTF) per a cada cara carregada — incloent fonts variables mantingudes com un sol fitxer petit.
- Un full d'estil complet .css amb una regla @font-face per fitxer, les pistes format() correctes, rangs de font-weight, font-style, font-stretch, font-display i local() opcional.
- Una pàgina demo.html perquè puguis veure prèviament cada pes, estil i eix en múltiples mides abans de fer-ho en viu.
- Incorporació opcional Base64 per enviar la font en línia al teu CSS per a escenaris fora de línia o de fitxer únic.
Privadesa i llicències
Els fitxers mai abandonen el teu dispositiu — tot es processa al teu navegador. Assegura't sempre que la llicència de la teva font permet la incorporació de webfonts abans de publicar-la al teu lloc web.