Usare le webfont, i tanti modi per fare tipografia sul web.
Un tempo erano solo Arial, Georgia, Verdana, Courier New, Times New Roman e Trebuchet: i cosidetti web safe font. Quelli la cui visualizzazione è garantita in tutti i principali sistemi operativi. Il webdesigner doveva ingegnarsi per usarli al meglio, valutandone i rispettivi parametri di leggibilità, gradevolezza e coerenza con l’argomento.
Ma con l’avvento dei Css3 il grande problema della tipografia sul web (quello della scarsa disponibilità di caratteri) si è praticamente estinto.
E’ un po’ buffo da dire, ma cambiare carattere è ora possibile (quantomeno su internet!).
Vediamo come.
Come incorporare autonomamente le font sul nostro sito.
Con la direttiva @font-face dei Css3, supportata praticamente da tutti gli attuali browser , è possibile inserire tutti i tipi di caratteri nelle nostre pagine web.
A seguito se ne dimostra l’utilizzo che spiega come utilizzare qualsiasi font (di cui possediamo i diritti di uso) sui nostri siti:
@font-face {
/* porzione di codice per IE */
font-family: "MioFont";
src: url( /cartella-font/miofont.eot );
}
@font-face {
/* porzione di codice per i browser non IE */
font-family: "MioFont";
src: local("MioFont"),
local("MioFont-Regular"),
url( /cartella-font/miofont.ttf ) format("truetype");
}
Il file .ttf è il font nel classico formato TrueType, mentre il file .eot è uno speciale formato di caratteri introdotto da Internet Explorer, generabile per esempio con questo strumento messo a disposizione da Google Code.
Come incorporare comodamente le font con Google Font API.
Google offre un nuovo servizio che consente di incorporare agevolmente una serie di font di libero utilizzo, Google Font Directory. Basta visitare il sito di Google Font, consultare il set di font messi a disposizione e selezionare il tasto GET THE CODE, che consente di ottenere la riga di codice html necessaria per l’utilizzo del font.
Sarà lo stesso Google ad occuparsi di scaricare il giusto formato ttf/eot per il nostro browser.
Ad esempio per poter usare il font con licenza libera Josefin Sans Std Light basta utilizzare la semplice riga:
<link href=’http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light‘ rel=’stylesheet’ type=’text/css’>
Considerando che questa tecnologia propone uno standard più solido ed efficiente dei vari predecessori Cufon, Sifr, e Typekit, possiamo notare notare che i caratteri presenti nella Google Font Directory sono diversi e destinati sempre più ad aumentare di numero nel tempo.
Un esempio d’uso
Un semplice esempio di utilizzo del font Lobster della Google Font Directory è mostrato nel portfolio del designer italiano Cristian Grossi.
L'Autore
KreativeHouse è un laboratorio di immagini, idee, progetti. Usiamo grafica, stampa e web per fondere creatività e comunicazione. Studiamo strategie di promozione a basso impatto ambientale e ad alto impatto emotivo. I nostri prodotti sono interamente realizzato da noi "made in Italy". Le soluzioni KH sono sostenibili ed ecocompatibili. KreativeHouse strada della Lodesana 649 sx 43036 Fidenza, (PR) Italy
Add to Google
24 Commenti
questa l’ho scoperta da poco e infatti non vedo l’ora di poterla usare da qualche parte. chissà che non vedremo inflazionati questi font, così come lo fu il Comics sui primi siti web XD
Come al solito IE si deve “distinguere”
poco male diciamo che questa volta il problema è di facile soluzione.
Google Font Api è un ottimo servizio, il problema è che i font disponibili sono veramente pochi. Si dice che sono destinati ad aumentare nel tempo ma ormai da diversi mesi sono sempre gli stessi
Vero, io stesso avevo parlato di Google Font appena uscito, il 20 maggio e da allora sono sempre gli stessi. Sono rimasto molto deluso..
un salutone..e il solito complimento per questo bell’articolo..spero non diventi un comics 2!
@luryn
Secondo me l’esageratone che non ha un minimo di autocontrollo grafico ci sarà sempre. Aspettiamocelo.
Finalmente ci si potrà sbizzarrire un pò di più… sempre nei limiti della leggibilità. Non vedo l’ora di mettere in pratica quanto sopra.
Scusate, ragazzi, ma vi risulta che non si possano usare più font in uno stesso sito?
Perché Google Chrome mi ha dato parecchi problemi con il mio blog, dove ne utilizzavo tre diversi. Alla fine ne ho dovuto lasciare solo uno, il che è strano perché in altri blog ne uso due e funziona tutto.
Ne sapete qualcosa?
urka che fregatura, è un peccato!
ciao a tutti,
come sempre complimenti per il post, che mi ha dato una buona dritta per un lavoro che sto facendo.
Io ho definito dei font che ho scaricato sul server con questa proprietà
@font-face {font-family: ‘FH’;src: url(FRHND575.eot);src: local(‘FRHND575′), url(‘FRHND575.ttf’) format(‘truetype’);}
e poi dove mi interessa ho ho dato la definizione del font-family.
Mi funziona benissimo su tutti i browser da ie6 a chrome, ed ho anche definito ed usato più font.
Il problema che mi pongo io è questo. Anzichè usare il java di google, secondo voi, posso uploadare i font sul mio server e usarle in come ho descritto o violo qualche copyright?
Grazie.
V.
Probabilmente non ne permette l’utilizzo per limitare abusi antiestetici
Ciao a tutti, finalmente abbiamo realizzato il nostro primo sito web con l’utilizzo di web font non standard (www.folgariabasketballcamp.it).
Uno strumento molto utile per avere il vostro font sia nel formato .eot (per IE) che nel formato .ttf è questo convertitore: http://www.fontsquirrel.com/fontface/generator
Spero vi possa essere utile!
ma l’anti alias come si può impostare? il font si vede male su alcuni browser
per una volta che mi azzardo ad allargarmi al di fuori delle solite quattro fonts… ho inserito una google font nei titoli di un sito, l’ho testato su tutti i browser che avevo (IE FF Opera, Chrome) e poi vado a fare la dimostrazione dal cliente e ARGHHHH il titolo non prende il font, che era un po’ narrow, si rifà al sans serif rimanente e mi spagina tutti i titoli… un disastro…. non so quale modello di IE avesse il cliente ma non si può rischiare così. Ma quelli dello staff di Google non testano il loro prodotto prima di rilasciarlo? Ho trovato qualche ipotesi in rete sul fatto che sopra i 20px la font si rovina. a voi risulta?
se la versione di IE è antecedente la 6 non credo li supporti..non è colpa di google però
un trucco? portarsi sempre dietro il portatile e farglielo vedere da lì il sito
grazie. Il tuo consiglio di portarsi dietro il portatile l’ho pensata anch’io ma non vale, perchè poi alla fine il cliente alla consegna vedrà il suo sito dal suo computer e non dal tuo portatile, per cui è meglio affrontare i problemi nella sede del cliente… comunque intanto ho riportato tutto a Aria, Verdana, Sans Serif
in attesa di cose più testate…
però andando dal cliente hai modo di sbirciare che versione del browser ha e mettere a posto le cose…cmqn sono convinta che avesse un browser ante ie6 perchè i google fonts mi sembra si vedano bene almeno fino alla 6 tornando indietro…
che font avevi usato? basterebbe vedere se dal sito google si vede bene o meno su quel browser…
a me funzionano su ie6.
sì adesso ho visto che in effetti funzionano anche sul 6! mi sembrava che il cliente avesse un Windows XP e un IE 7 o 8. Cosa ci vuole per far funzionare le googlefonts? una runtime java aggiornata? adesso che ci penso… oltre al titolo avevo messo un menu jquery… potrebbe essere quello che interferisce!!! vedi che bello potersi confrontare con i colleghi
grazie intanto…
non so come li carichi tu i google font… io uso una chiamata direttamente nel css e li vedo bene su tutti i siti.
mi viene un dubbio grazia, di una cosa che è successa anche a me: tu i font li hai installati anche in locale? perchè doversti provare a disinstallarli per testarli effettivamente. non mi chiedere perchè, ma le chiamate al css non funzionavano a dovere, ma da mac li vedeva, da win no…
sì hai ragione, potrebbe influire anche quello. Avevo installato le fonts utilizzate per poterle inserire nella progettazione iniziale. Adesso le ho rimosse e mi sembra che le cose vadano meglio. Mantengo però il sospetto che possano dare qualche problema se inserite in contesti delicati, con altri script che forse possono generare conflitti.
Grazie ancora, le vostre osservazioni mi sono state veramente utilissime.
io li carico via css ma non funziona lo stesso
che sistema e che browser utilizzi? e se inserisci lo stile direttamente nella pagina invece che in un foglio esterno cambia qualcosa?
non importa il browser e il so che uso, conta quello dei miei visitatori. se anche uno solo di loro non lo vede bene per me è una cosa negativa