Web e Code Script

GOOGLE WEB FONTS | Google Font API cambia il web

google-web-font

Con i web font la prospettiva prossima è quella di cambiare rapidamente il web.

La scelta dei caratteri da utilizzare per le pagine internet non sarà più limitata. Se prima infatti il campo era limitato ai classici font installati sul computer degli utenti, grazie alla direttiva CSS @font-face qualcosa è già cambiato, ossia è possibile utilizzare qualsiasi carattere tipografico (salvo possedere la sua licenza d’uso).

Sappiamo quanto sia importante cercare di evitare le immagini (di testi) nei siti web al fine di favorire l’indicizzazione dei testi presenti nelle pagine. I motori di ricerca infatti non leggono i testi presenti nelle immagini.

Poteva Google restare fuori da questo “mercato”?! Ovviamente no.
Infatti, se già con il sistema precedentemente detto tutto ciò era possibile, Google con il nuovo servizio Google Font API si ripromette di semplificare la procedura di adozione dei web fonts ampliando le possibilità creative dei web designer.

Ovviamente conviene non esagerare con l’utilizzo di queste famiglie di font, perchè rallentano leggermente lo scaricamento della pagina.

Il servizio è online, gratuito e di facile comprensione, basta solo imparare poche righe di sintassi.

Come primo elemento nel tag Head inseriremo un link alle API di Google, dichiarando il font scelto nella Google Font Directory:

Poi basta formattare il testo scelto secondo del regole classiche dei css:

h1 {
font-family: 'nomedelfont';
}

NOTA BENE:

  • Nel caso in cui il nome del font sia composto da più parole, le stesse devono essere divise nel link dell’head da un + (es.: nome+del+font), mentre nel css basta inserire semplici spazi;
  • Se si vuole importare più di una famiglia di font, le stesse devono essere divise da | (es.: nomedelfont|nomedelfont)  mentre nel css si dichiara separatamente quindi il problema non sussiste;
  • E’ possibile anche richiamare un font nella sua variante (es.: nomedelfont:italic).

 

CREDITS
Google Web Fonts
GoogleFonts.com




emoticons

avatar
Autore: Valerio Del Re

Dott. in Comunicazione e Pubblicità per le Organizzazioni,
Grafico e Web Designer freelance, CEO presso Robadagrafici


Cosa ne pensi? Esprimi la tua opinione.
Scrivi un commento.

Loading Facebook Comments ...

Ti potrebbero interessare anche:


font-awesome

Icon Font Awesome. Come inserire sul sito icone tramite font

Le icone sono ormai uno standard per chi realizza siti internet. Permettono infatti un’ottima personalizzazione per lo stile […]


testare-sito-mobile-online

Testare sito mobile online. Effettua il test con Google

Se sei un webdesigner sicuramente nell’ultimo periodo ti starai dedicando allo studio della tecnica del responsive design. Un […]


orologio-esadecimale

What colour is it? L’orologio esadecimale

Oggi vi segnalo un sito creativo, da veri nerd, per appassionati di grafica e web. Si tratta del […]


sfumature-css3

Come creare una sfumatura con CSS3

CSS3 ha tantissime potenzialità che ogni web designer dovrebbe conoscere per evitare di fare un uso spropositato di […]


css3-box-shadow

Ombra CSS3. Come aggiungerla a testo, div e immagini

CSS3 è una rivoluzione. Ci permette di aggiungere tanti effetti grafici agli oggetti presenti nelle nostre pagine web, […]


css3-border-radius

Come smussare angoli di immagini e div con CSS3 Border Radius

Con Html5 e CSS3 il mondo del web ha fatto un notevole passo avanti, offrendo un’esperienza più ricca […]


mappa-vettoriale-jquery

Mappa del mondo con ingrandimento in jQuery

Creare una mappa navigabile per il sito internet è diventata ormai pratica comune, specialmente quando si tratta di […]


atlas

Arriva Atlas, la concorrenza di Facebook a Google

È ufficiale: Google ha un concorrente. Si chiama Atlas ed è di proprietà di Facebook. Quest’ultimo aveva acquistato […]


jquery-document-ready-function

La base della sintassi di jQuery: $(document) .ready()

Se vi state avvicinando da poco a jQuery e state iniziando a studiarlo, avrete notato che spesso il […]


php-if-else

PHP: gestire le condizioni con le istruzioni if e else

Se state realizzando un sito nel linguaggio di programmazione Php, magari con il CMS WordPress, imparare a gestire […]


Shares

Robadagrafici.com non è una testata giornalistica in quanto viene aggiornato senza alcuna periodicità. Non può pertanto considerarsi prodotto editoriale ai sensi della legge 62/2001. Le immagini e i testi pubblicati sono valutati come di pubblico dominio: qualora il loro uso violasse diritti d'autore, lo si comunichi all'autore del blog che provvederà alla loro pronta rimozione.
Tutti i contenuti sotto Licenza Creative Commons. Marchi e loghi di soggetti terzi utilizzati in questo sito sono di proprietà esclusiva dei rispettivi proprietari.
Roba da Grafici © 2011-2016 - Progetto a cura di ServiziWeb Srl - Privacy & Cookies Policy