Filtra la ricerca ...
Frase esatta
Categorie

Come includere qualunque font su un sito internet

Ciao e benvenuto. Se hai bisogno di chiarimenti sul codice, lascia un commento (no WhatsApp); ricorda però che non fornisco assistenza gratuita sugli articoli che ho scritto nè personalizzo il codice in modo gratuito, quindi se la tua richiesta va oltre il semplice "aiutino", se vuoi mi chiedi una consulenza a pagamento nella pagina contatti. Grazie della comprensione. Alessio

Oggi voglio parlare di un webfont generator, ma che cos’è ? E’ appunto un generator di font (caratteri) che vengono convertiti da un file .ttf o .otf per poi essere utilizzato nello sviluppo di siti internet.

Spesso i mie clienti sono esigenti e mi chiedono font particolari che è difficile trovare su Google Web Font o su siti similari, molte volte sono carateri che hanno già utilizzati per biglietti da visita, brochure e compagnia e vorrebbero in qualche modo che anche sul sito web siano presenti, anche solo per i titoli delle pagine.

Come generare un font web da un file .ttf o .otf

E’ un operazione molto semplice, per prima cosa dobbiamo necessariamente avere a disposizione il file originale del font, di norma avrà estensione .ttf, fatto ciò ci si collega su un servizio di Web Font Generator offerto gratuitamente da Font Squirrel e poi seguite questi semplici passi.

1- Cliccare la checkbox Yes, the fonts I’m uploading are legally eligible for web embedding , inutile dire che il font che possedete deve essere legale e non coperto da copyright.

Figura 1

Webfont generator

1- Cliccare su Add Fonts e selezionare il/i file con estensione .ttf o .otf, dopo il caricamento apparirà una lista di tutti i file pronti per essere generati

Figura 2

Caricamento file

2 – Cliccare l’opzione Optmimal, in questo modo verranno generari i necessari i file .eot e .woff, volendo è possibile generare anche un file .svg se si selezione l’opzione Expert.

3 – Una volta caricati tutti i nostri file, possiamo scaricare in nostro kit per l’implementazione sul sito web, cliccare su Download Your Kit, attendere la procedura e salvare il file.

Figura 3

Download fontkit

Il file sarà in formato zip ed avrà un nome con una parte variabile ed una fissa, tipo webfontkit-20140918-171341

Scopattandolo avremo a disposizione un file HTML pre-generato contente il carattere e tutte le lettere dell’alfabeto ed un file CSS già pronto all’uso.

Figura 4

Elenco file generati dal fontface

Potrebbe interessarti anche ...

Hai bisogno di una consulenza, lo sviluppo di un plugin o vuoi incrementare le performance del tuo sito ?

1 commento su “Come includere qualunque font su un sito internet”

Se vuoi postare codice usa codeshare.io
Se vuoi postare uno screeshot usa postimages.org ed inserisci l'url nel commento.

Lascia un commento


Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Iscriviti e ricevi trucchi e guide

Inserisci la tua email per ricevere gli ultimi articoli dal blog.

Inserendo i tuoi dati confermi di aver letto ed essere d’accordo con la privacy policy.