Ci sono degli scenari in cui il web designer, a richiesta specifica dell'utente, deve utilizzare dei caratteri specifici (webfont) nella creazione di un sito web, caratteri che in modo predefinito non sono visualizzabili.
1. Preparare il font in locale.
- http://www.font2web.com/
- http://www.fontsquirrel.com/tools/webfont-generator
- http://convertfonts.com/
2. Utilizzare il font dalla cartella "fonts"
@font-face { font-family: 'BebasNeueRegular';
src: url('../fonts/bebasneue.eot');
src: url('../fonts/bebasneue.eot') format('embedded-opentype'),
url('../fonts/bebasneue.woff') format('woff'),
url('../fonts/bebasneue.ttf') format('truetype'),
url('../fonts/bebasneue.svg#BebasNeueRegular') format('svg');}
h2{
font: 24px/27px 'BebasNeueRegular', Arial, sans-serif!important;}
h2.classeottanta{
font: 24px/27px 'BebasNeueRegular', Arial, sans-serif!important;}
WEB FONTS
Web Fonts è un componente e plugin che permette ai web designer di Joomla ! di integrare facilmente sui caratteri. L'estensione sfoglia , seleziona e importa i font forniti da servizi di terze parti .
Guardalo in azione su YouTube :
Attualmente , sia il servizio Google Web Fonts e il servizio Fonts.com sono integrati (oltre 16.800 caratteri fra gratuiti e commerciali).
Inoltre i font disponibili hanno una vasta gamma di set di caratteri ( Khmer , giapponese, arabo , cirillico , greco , ecc ecc )
Importante : Sia il componente che il plugin devono essere installati e abilitati . L'interfaccia di estensione sul lato amministratore supporta IE9 e IE8 e le versioni correnti di Fire Fox , Chrome, Safari e Opera. I font sono tutti gestiti attraverso l'interfaccia del componente , tuttavia gli utenti devono avere almeno una conoscenza di base delle regole CSS .
HD-GFONTS
Una terza (e ottima) possibilità è quella di usare il Plugin HD-GFONTS.
Lo trovate qui: HD-GFONTS
HD-GFONTS permette di creare 5 stili nuovi sia per "selettori" che per "classi" di CSS usando i fonts che possiamo trova nel Sito Web di Google, e dopo vedremo come si fa..
Una volta scaricato ed installato lo dobbiamo attivare come mostrato nell'immagine qui sotto.
a questo punto però, prima di creare i nostri nuovi stili, occorre conoscere quali Fonts poter usare e qui ci viene in aiuto Google, recandoci a questo link: http://www.google.com/webfonts potremmo selezionare lo stile preferito: SANS SERIF, SERIF, etc.. etc come possiamo vedere nell'immagine qui sotto:
Una volta scelta la famiglia di Fonts da usare siamo pronti per impostare il nostro Plugin, come, ad esempio, possiamo vedere nell'immagine qui sotto:
Una volta salvate le nostre personali impostazioni (notare le personalizzazioni CSS in dimensione) potremmo ammrare immediatamente l'effetto con un refresh sulla nostra pagina Web.
Ed ecco in azione il Fonts Fugaz-One!