Una collezione di font gratuiti per usare @font-face nei CSS

mercoledì 2 settembre 2009 - 8:32

di Cesare Lamanna

Parlando di Dive into HTML 5, abbiamo anche tessuto le lodi delle scelte tipografiche adottate sul sito grazie all’uso nei CSS di font particolari e incorporati nella pagina tramite @font-face.

In effetti, la possibilità  di far scaricare un font specifico, senza quindi doversi preoccupare che esso sia presente sul PC dell’utente, apre vie straordinariamente interessanti, soprattutto ora che tale funzionalità  è supportata da tutti i principali browser.

Come molti sanno, uno dei problemi nell’adottare questa soluzione deriva dal fatto che Internet Explorer supporta come formato il solo EOT. Cià rende necessario, ogni volta, avere a disposizione o creare la versione EOT di un font TrueType. Il tutto deve poi avere corrispondenza nelle regole CSS:

/* IE6/7/8 - Questa dichiarazione deve essere all'inizio */  
@font-face {  
  font-family: nomeDelFont;  
  src: url( /nomeDelFont.eot );  
}  
 
/* Firefox 3.5/Safari/Opera 10 */  
@font-face {  
  font-family: nomeDelFont ;  
  src: url( nomeDelFont.ttf );  
} 

Sul sito Font Squirrel è possibile scaricare dei veri e propri kit per l’uso di @font-face. In un singolo pacchetto si trovano le versioni EOT e TTF del font prescelto e un CSS di esempio. Comodo. Ampia la scelta dei font gratuiti messi a disposizione.

Tags:,

Categoria: CSS | Commenta

Commenti per Una collezione di font gratuiti per usare @font-face nei CSS

molto comodi i kit scaricabili.
ho notato 2 cose che non mi entusiasmano pero’ finora:
- su chrome non funziona
- safari chiede conferma per utilizzare le font (penso all’utonto)

# - Postato da Troglos 2 settembre 2009 alle 10:24

Troglos, per quanto ne so (link), i web fonts sono supportati da Chrome in quanto basato su webkit, ma la funzionalità  é stata disabilitata per motivi di sicurezza.

Curiosità : che versione di Safari usi e su quale sistema operativo? Suppongo Windows, perché su Mac non mi é mai capitata una situazione del genere…

# - Postato da Cesare Lamanna 2 settembre 2009 alle 11:39

@Cesare: Safari 4.0.2 su Mac
Quando ho accettato ho cliccato sul flag “non chiedermelo in futuro”, quindi magari l’hai fatto in passato…? boh

comunque ora che ricordo mi é gia capitata sta cosa parecchio tempo fa

# - Postato da Troglos 2 settembre 2009 alle 12:37

Cesare grazie per il link, molto utile. Unico appunto, il tuo esempio non e’ dei piu’ corretti (anche se dei piu’ usati online) perche’ in quel modo IE fara’ 2 richieste invece che una, ergo pagine lente a caricare se si usano piu’ fonts o se ne usano di pesanti poiche’ IE scarica prima l’eot, poi l’altro anche se non lo utilizza (FF e gli altri invece ignorano la prima e la sovrascrivono, troppo difficile da fare per IE … eh?)

Ci sono controversie sulla tecnica migliore per evitare doppia richiesta al server, per ora posso dirti che commenti condizionali per i CSS sul layout (classico .. ) per la sola definizione o inclusione dei fonts sono i piu’ “sicuri”.

# - Postato da andr3a 2 settembre 2009 alle 14:19

Grazie ad Andr3a per l’appunto e a Troglos per la precisazione :) Sono un po’ pigro ultimamente e ho ancora la beta di Safari 4, non ricordo di aver mai visto quel messaggio a dire il vero, forse lo hanno aggiunto per motivi di sicurezza nella release finale… approfondirò ;)

# - Postato da Cesare Lamanna 2 settembre 2009 alle 14:50

Tutto ciò quando in rete impazza la polemica per l’IKEA che é passata al Verdana persino per il catalogo cartaceo :)

# - Postato da Gennaro 3 settembre 2009 alle 02:13

Un altra modifica dell’esempio, in termini di performance, potrebbe essere questa: se il font é particolarmente completo di caratteri e simboli ma a noi serve ad esempio il solo set di caratteri Latin-A é possibile definire la proprietà  unicode-range : U+00??, U+01??;

Questa regola permetterà  di scaricare i soli caratteri che fanno match con il set richiesto, diminuendo pertanto i tempi di caricamento e di rendering (di default il valore di questa proprietà  dovrebbe essere U+07FF).

E’ possibile definire valori singoli o intervalli di valori ed é consentito l’uso di wildcards (* e ?)

# - Postato da Fabrizio Calderan 4 settembre 2009 alle 10:55

Volevo utilizzare font-face e il post di Cesare mi ha dato lo spunto con l’ottimo kit di squirrel. Orrore! Contrariamente alle mie aspettative con IE si visualizza correttamente e con Firefox NO! Firefox non supporta la funzionalità  font-face se il font non é presente nello stesso dominio. Su Blogger non é possibile farlo. Quindi? Qualcuno ha una soluzione “pulita”?

# - Postato da ester 5 settembre 2009 alle 18:02

Per chi volesse evitare di sprecare banda, ogni font pesa fino a 100Kb o più, o poplare il server di errori, IE non capisce un accidente di niente, questo é il risultato di almeno 4 persone, me compreso, che si sonmessi giù a capire cosa c’era che non andava, e cosa si poteva fare per risolvere.
L’update per la soluzione, post più commenti per approfondire:
http://webreflection.blogspot.com/2009/09/font-face-we-are-already-doing-wrong.html

# - Postato da andr3a 5 settembre 2009 alle 20:03

Pingback: Il modo migliore per usare @font-face | Edit - Il blog di HTML.it

… in effetti questa notizia apre molti orizzonti!!!
ma siamo sicuri che funziona con tutti i browser??

# - Postato da Gianluca 9 settembre 2009 alle 08:05

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>