Web Fonts e Google Web Fonts

Eccoci davanti a una delle novità introdotte in questo ultimo periodo…i Web Fonts e i google web fonts!… Molti web designer, fino ad oggi, per incompatibilità cross-browser non potevano caricare i fonts che avevano preso da siti come www.dafonts.it per cambiare quelli che sono i soliti caratteri preinstallati o standard di sistema operativo…Se visitate www.fontsquirrel.com con il font-face generatorpotremmo usare il font scelto per i nostri siti.

@font-face {
font-family: ‘font mio’;
src: url(‘nome-font.eot’);
src: url(‘nome-font.eot?#iefix’) format(‘embedded-opentype’),
url(‘nome-font.woff’) format(‘woff’),
url(‘nome-font.ttf’) format(‘truetype’),
url(‘nome-font.svg#nome-font’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

quindi sempre nel nostro css

p {
font-family:’font mio creato’, Arial, sans-serif;
}

godiamo quindi di vantaggi per:

-Compatibilità con tutti i dispositivi (anche mobili)

-Set di font praticamente infinito e creabile su misura

ma alcuni svantaggi:

- Tempi di caricamento un pò più lunghi rispetto ai google fonts.

- Per i novizi risulta essere una tecnica forse più complicata rispetto ai google fonts

Atrimenti, Google offre una galleria di caratteri da poter inserire nell’HTML rendendo così il nostro sito unico. ecco che avviene la rivoluzione: tecnica @Font-Face dei CSS3 ecco come usarla…

/* all’interno del css*/
h1 { font-family: ‘Yanone Kaffeesatz’, arial, serif; }

i vantaggi in questo caso per design complessi risulta la soluzione preferibile

come svantaggi posso segnalare solo la scarsa scelta al momento di fonts

A mio avviso sbizzarritivi nel provare e vedrete i risultati =) fatemi sapere con i vostri commenti. =)

vi lascio un po’ di siti di Fonts belli davvero perderete un bel po’ del vostro tempo =)

galleria di fonts gratuiti

http://www.fontspring.com/fonts/exljbris/museo-sans

https://typekit.com/

http://www.fontburner.com/fonts/

http://fontdeck.com/

http://webfonts.fonts.com/en-US

http://webfonts.info/wiki/index.php?title=Kernest

http://www.typotheque.com/webfonts

http://www.extensis.com/en/WebINK/

http://webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding

altri siti per fonts a pagamento

http://www.fontshop.com/

http://www.fontspring.com/fontface

http://www.webtype.com/

http://typefront.com/