Crea il pacchetto web font
Seleziona font TTF, OTF, WOFF o WOFF2 per creare file WOFF2, CSS e un'anteprima HTML. Prima di integrarli in un sito web, controlla il testo di esempio e il nome, il peso, lo stile e la visualizzazione durante il caricamento nel CSS, poi salva il pacchetto come ZIP. Non viene eseguito il subset dei caratteri.
Cosa puoi fare
Raggruppa i file per il web
Crea WOFF2, CSS e un'anteprima HTML da TTF, OTF, WOFF o WOFF2. Puoi selezionare più font insieme.
Controlla i glifi e le impostazioni CSS
Controlla l'aspetto dei font convertiti. Puoi modificare come necessario i nomi, i pesi e gli stili usati sul web e la visualizzazione durante il caricamento.
Condividi l'insieme come ZIP
Salva la cartella fonts, fonts.css e preview.html come un insieme. Usali mantenendo le loro posizioni relative.
Come si usa
Seleziona i font insieme
Seleziona font che puoi usare sul web. Se usi più font, selezionali insieme.
Controlla l'aspetto e le impostazioni per il web
Inserisci il testo da visualizzare in anteprima e controlla ogni font. Per regolare nome, peso o altre opzioni, apri le impostazioni CSS di quel font.
Crea il pacchetto e salva lo ZIP
Fai clic su “Crea pacchetto web font” e salva il file webfont-kit.zip generato.
Estrai e integra in una pagina web
Estrai i file mantenendo le posizioni della cartella fonts, fonts.css e preview.html. Carica il CSS nella pagina in cui userai i font e usa i nomi dei font specificati.
Utile quando
Prepara un sito web per la pubblicazione
Raggruppa i tuoi font in formati web e CSS per preparare i file necessari all'integrazione.
Consegna l'insieme completo al team di produzione
Raggruppa più font, come normale e grassetto, e consegnali insieme a un HTML contenente il testo per controllarli.
Come collaborano font e CSS
WOFF2 è un formato di font per il web
Prepara WOFF2 contenente i caratteri originali. I caratteri non vengono ridotti a un subset. La dimensione del file varia in base al font.
Registra nomi, pesi e stili nel CSS
Queste impostazioni determinano per quali stili richiesti viene usato questo font sul web. Non trasformano i glifi del font in grassetto o corsivo.
Distingui lo stesso nome tramite peso e stile
Gli stili normale e grassetto possono usare lo stesso nome, ma la combinazione di nome, peso e stile non può essere duplicata.
Scegli la visualizzazione durante il caricamento
Per impostazione predefinita, viene mostrato prima un font di riserva e si passa al font quando è pronto. Se necessario, puoi modificare l'attesa e il passaggio nelle impostazioni CSS.
Mantieni le posizioni relative dei file
fonts.css fa riferimento a file come fonts/font-1.woff2. Se sposti la cartella o il CSS, regola di conseguenza i percorsi di riferimento.
Domande frequenti
Dove devo collocare i file generati?
Estrai lo ZIP e disponi la cartella fonts, fonts.css e preview.html mantenendo le loro posizioni relative. Carica fonts.css dalla tua pagina e usa in CSS il nome del font specificato.
In che cosa differisce dalla sola conversione di formato?
Questa schermata raggruppa WOFF2 con CSS e un'anteprima HTML. Se vuoi cambiare solo il formato del font, usa “Convertitore di formato font”.
Posso mantenere solo i caratteri che uso?
Questa schermata non applica un subset dei caratteri. Serve a preparare font che conservano i caratteri originali.
Cambiando il peso i caratteri diventano più marcati?
L'impostazione specifica il valore di peso usato in CSS. Non modifica i glifi nel file del font. Per usare grassetto o corsivo, prepara un file che contenga quei glifi.
Posso usare più file con lo stesso nome del font?
Puoi registrare file con pesi o stili diversi. Se la stessa combinazione di nome, peso e stile risulta duplicata, rivedi le impostazioni corrispondenti.
Cosa succede se seleziono di nuovo i font?
L'insieme attuale di font e lo ZIP generato vengono rimossi e viene caricato il nuovo insieme selezionato. Seleziona insieme ai nuovi anche i file che vuoi continuare a usare.
Cosa fare se non vengono visualizzati tutti i caratteri di esempio?
I caratteri non inclusi nel font possono essere visualizzati con un altro font. Controlla i caratteri supportati e l'aspetto nel contesto in cui il font verrà usato.
Cosa fare se un font non può essere caricato?
Seleziona di nuovo font in un formato supportato. Se un file dell'insieme non può essere convertito o caricato, un insieme parzialmente riuscito non viene salvato.
Input e risultati
- Input
- TTF, OTF, WOFF e WOFF2. Puoi selezionare più file insieme.
- Condizioni
- Controlla le condizioni d'uso dei font di input, incluso l'incorporamento nel web.
- Impostazioni
- Nomi, pesi, stili e visualizzazione durante il caricamento usati in CSS.
- Output
- webfont-kit.zip. Include WOFF2, fonts.css e preview.html.