Home

Css Trix - Il font che pare a me!

Vi è mai capitato di non voler rinunciare ad avere un font particolare nel vostro sito?

Vi sarete allora inerpicati inevitabilmente tra le dure regole del web design, nella fattispecie in uno di questi casi:

 

-image replacement, ovvero la tecnica di rimpiazzo di testi con immagini (con tutte le problematiche annesse e connesse);

 

-la regola css3 @font-face (che sarebbe la soluzione ideale, se non fosse che alcuni browser ancora in voga non la interpretano correttamente);

 

-il metodo @import per caricare il font (un po' difficile da gestire per quanto riguarda il cross-browsing tra i tipi di font);

 

Tralasciando l'oramai tramontata tecnica dell'image replacement e la non-da-tutti-compresa tecnica del @font-face possiamo buttarci a pesce nel caro vecchio metodo @import, cercando di trovare una soluzione cross-browser.

In realtà i tempi bui sono finiti, infatti grazie all'amico Google che mette a disposizione un'ampia serie di font "fuori standard" possiamo con una semplice regola di stile css ottenere finalmente una soluzione ottimale per avere il nostro font particolare nel nostro sito!

 

Il procedimento è particolarmente semplice, basterà visitare la pagina di Google Web fonts (dove sarà possibile scegliere tra un vasto pool di font) e seguire la procedura che darà come risultato una riga di css da caricare all'inizio del nostro foglio di stile; per completare l'opera non dovremo far altro che utilizzare la regola font-family per dare agli elementi desiderati il font scelto. 

 

Vediamo un esempio pratico:

 

Per il mio sito web ho deciso che voglio utilizzare il font "Dosis", molto carino e leggibile, quindi mi collego a Google Web fonts e scrivo il nome del font nel form di ricerca; clicco poi sul pulsante "Add to Collection" e infine su "Use" (sulla barra blu in fondo alla pagina).

Nella schermata successiva posso andare direttamente al punto 3, dove scelgo la modalità in cui caricare il font, in questo caso faccio clic sulla seconda linguetta (che si chiama appunto "@import") e selezionando il testo sotto (che sarà simile a "@import url(http://fonts.googleapis.com/css?family=Dosis);") lo copio all'inizio del mio css.

Poi devo creare la regola di stile per assegnare questo font, nel mio caso lo voglio dare a tutto il sito, quindi scrivo:

 

body

{

     font-family: "Dosis", sans-serif;

}

 

In definitiva avrò nel mio css qualcosa di simile a questo:

 

@import url(http://fonts.googleapis.com/css?family=Dosis);

 

body

{

     font-family: "Dosis", sans-serif;

}

 

e il gioco è fatto!   

 

Ovviamente ci sono numerose possibilità di cui non vi ho parlato, per esempio è possibile caricare più di un font con la stessa regola @import (basta selezionare più elementi nella prima schermata di Google Web font), oppure caricare solo determinati caratteri (per un logo o un banner)...

 

Il mio consiglio è comunque di non esagerare, infatti anche questa piccola regola di stile ha il suo peso nel caricamento della pagina web. Evitiamo quindi di caricare troppi font, anche perché difficilmente otterremo un effetto gradevole utilizzando 5 caratteri diversi...  :)

 

Le vostre reazioni...

Postato da James G. P. :: Mon 29 Oct 2012 - 11:11:46

Very nice! Thanks... :)

Postato da totta :: Thu 18 Oct 2012 - 12:26:09

grazie per la condivisione!


Lascia un commento





Giura di non essere spam!
Giuro!
Lo ammetto, sono spam...




Dai un'occhiata agli altri post

Love food, hate waste!

Joyrix è una app gratuita (con un portale web a completamento del servizio) ideata per ridurre gli sprechi alimentari, che mette in relazione direttamente e in tempo reale il negoziante (che pubblica, a fine giornata, delle offerte con i cibi destinati al cestino)...

Il poster di Torino BeBi per Save the Children

Ho di nuovo avuto l'onore e il piacere di lavorare con la magica squadra redazionale di Save the Children (grazie alla mia partnership con TeamDev, che ringrazio per la fiducia e...

Motion graphics

Ecco una piccola raccolta di lavori in movimento...     Trailer di Melting App Un divertente lavoro di animazione per il sistema Melting App, di cui non posso...

Crowdfunding per espandere il proprio mercato? Proviamo!

Che la situazione economica in Italia non sia delle migliori non ci sono dubbi, e molta gente -me compreso- comincia a chiedersi se non sia il caso di espandere il proprio business all'estero, per quanto possibile. Tra le tante opportunità che...

La nascita di un communication hero!

Joshua CT è il nuovo brand di riferimento per chi di brand ha bisogno...    E' la nuova nata tra le agenzie di comunicazione, con una marcia in più: l'apporto tecnologico di TeamDev,...

3D modeling, animazione e rendering per l'anello Rosarium

Amo il mio lavoro...  :) Questa volta la sfida era ricostruire in 3D l'anello Rosarium (www.rosarium.it), per poi creare un'animazione per uno spot pubblicitario. Qui sotto potete vedere un draft...

La grafica a Perugia!

A tutti gli appassionati di benessere visivo, godetevi le meraviglie sfornate da questi grandi grafici di Perugia.   Se volete suggerire qualche bel lavoro

BemSlide

Sto lavorando ad uno slider molto semplice e leggero che abbia funzioni sia automatiche che manuali, indice, fullscreen mode, diverse modalità di transizione e anche altre cosucce interessanti.  Gestisce qualsiasi tipo di contenuto, html,...

BemSo, una solida e versatile base per il tuo sito web!

Sono tempi difficili, questi. Qualsiasi sia la tua attività, negozio o vendita di servizi è molto difficile essere competitivi senza un buon sito web, un interessante blog e una ben aggiornata pagina facebook. Ma partiamo dall'inizio; cosa significa...

I consigli del grafico :: I diversi approcci del design

Vorrei soffermarmi sull'importanza di cogliere la diversità che esiste tra i diversi ambiti della progettazione, un concetto a cui non tutti danno il giusto valore. Per dirlo in parole più consone...

Un lavoro di motion graphic!

Eccolo qui, è un video di 5 minuti fatto per GEOCARE, un Laboratorio Didattico e Sperimentale sulle tecnologie geomatiche realizzato dall’Istituto d’Istruzione Superiore “CIUFFELLI - EINAUDI” in collaborazione con TeamDev...

I consigli del grafico :: Centrare il bersaglio

Nella comunicazione visiva è fondamentale avere sempre in mente alcuni concetti base (che sono poi la chiave per ottenere risultati che funzionano). Cominciamo col dire alcune cose scontate (che poi tanto scontate non sono). Il punto di...

Una raccolta di slider niente male...

Benvenuto, qui trovi una raccolta di slider jQuery molto ma molto interessanti, enjoy!       Refine Slider

Evoluzioni

Una raccolta di evoluzioni dal web, stay tuned for updates!     Windows scrollbars evolution

Back Contattami Informativa sull'utilizzo dei cookies