Guide per aspiranti programmatori

Il linguaggio CSS ci permette di customizzare anche i font dei testi delle nostre pagine web.
Vediamo, in questa guida, come incorporare un font nel nostro progetto, qual è la sintassi da utilizzare per assegnarlo ad un selettore e quali sono le proprietà per caratterizzarne lo stile.

Importare un font

Abbiamo due modi per importare un tipo di font nel nostro progetto: il primo, e più utilizzato, è attraverso link esterno, avvalendoci di librerie quali, ad esempio, Google fonts. 

Come funziona Google fonts? Scopriamolo.

Atterrato sulla home di Google fonts, ti si presenterà un’interfaccia molto intuitiva. Potrai scegliere il tuo font tra uno dei molti a disposizione, rendendo più facile la tua ricerca anche mediante all’aiuto di un sistema di filtri, oppure, nel caso in cui tu ne abbia già uno ben preciso in mente, andare a cercarlo con l’ausilio della barra di ricerca. Supponiamo di voler ricercare il font ‘Montserrat’.
A questo punto, selezionandolo, ti si paleserà una situazione del genere.

Quello che dovrai fare sarà selezionare i “pesi” e le “versioni” del font che pensi potranno essere utili (bold, regular, italic ecc) e cliccare sul simbolino del “+” per aggiungerli alla tua selezione.
A quel punto, le versioni del font aggiunte appariranno in lista in un pannello in alto a destra.
Immediatamente sotto quel pannello, ne troverai un altro intitolato “Use on web” . 

Come puoi vedere nell’immagine, questo pannello ti fornirà un link e una regola CSS.

Nel primo riquadro troverai il link, che dovrai copiare-incollare nell’head del tuo documento.
Nel secondo riquadro, invece, troverai la regola CSS precisa (CSS rules) che dovrai incollare nel tuo foglio CSS, accanto al selettore desiderato. Semplicissimo, vero?

Tuttavia esiste un altro metodo da utilizzare per inglobare un font nel tuo progetto.
Immagina di avere un font che un graphic designer ha realizzato ad hoc proprio per il tuo progetto. Magnifico, no? Chiaramente, però, questo font, interamente realizzato su misura per te, non può essere presente su Google fonts. Come fare?
Hai idea di rinunciare ad utilizzarlo? Fermati! La soluzione è a portata di mano.

In questi casi possiamo utilizzare una delle “@ rule”.

Inseriremo nel foglio css la regola “@font-face”, dove specificheremo il nome del font e il path – percorso – per arrivare ad esso, come nell’esempio.

@font-face {
  font-family: Miofont;
  src : url(./miofont)
}

e, successivamente, potremo applicare questa font-family ai selettori desiderati.
La sintassi  

Come abbiamo già ampiamente avuto modo di osservare, a permetterci di istruire il browser sulla tipologia di font da renderizzare è la proprietà ‘font-family’. 
Con questa, infatti, è possibile dichiarare al browser il font da utilizzare, dandole come valore il nome del font inserito tra apici.
È possibile dichiarare più di un font nella stessa proprietà font-family, in maniera tale che, qualora il browser non dovesse supportare il primo font indicato, passerebbe immediatamente al secondo e così via.
Se abbiamo, invece, intenzione di utilizzare più font diversi in un solo documento, andremo a dichiararli come valori di due proprietà font-family differenti e, poi, ad indicare al selettore di interesse quale utilizzare.
È buona norma inserire il font desiderato per primo, seguito – non obbligatoriamente – da un font sostitutivo e, immediatamente dopo, da una font-family generica, come ad esempio “serif” “sans-serif” “cursive” e via discorrendo.
esempio:

* {
font-family: “times new roman” , “times” , “serif”;
}

Le proprietà dello stile dei testi nel CSS

Una volta scelto un font è possibile modificarne lo stile con diverse proprietà. Vediamole:

• font-style: serve a modificare lo stile del font; può assumere valori come “normal”, “italic”, “oblique”. Naturalmente funzionerà a patto che, se per esempio abbiamo importato il font da Google fonts, abbiamo importato anche quelle versioni.
• font-weight: serve a definire il peso del font; i valori accettati saranno “normal”, “bold”, “bolder”, “lighter” o anche valori numerici da 100 a 900 (puoi avere una maggiore contezza del valore di un peso su Google fonts stesso)
• font-size: permette di modificare le dimensioni del tuo font; accetta, di conseguenza, tutti i valori relativi alle unità di misura.

Ci sono, poi, diverse proprietà utili alla formattazione del testo.

• text-align: serve a modificare l’allineamento del testo; accetta valori come “left”, “right”, “center” e “justify”.  Quando alla proprietà text-align viene assegnato il valore justify, la riga viene allungata per adattarsi alla pagina.
• text-decoration: nonostante abbia diversi valori, nella realtà dei fatti si utilizza principalmente in merito all’effetto sottolineatura dei link.
  Il valore di riferimento più concreto, è, quindi, la keyword “none”, che serve proprio a rimuovere la sottolineatura di cui sopra.
• text-transform: ci consente di trasformare le nostre lettere in maiuscole o minuscole; i valori che accetta sono “uppercase” per il maiuscolo, “lowercase” per il minuscolo, e “capitalize” per rendere maiuscola la prima lettera di ogni parola.
• text-indent: ci permette di indentare la prima linea di un blocco di testo.
  Cos’è l’indentazione? È l’inserimento di una determinata quantità di spazio vuoto all’inizio di una riga di testo, molto utile, ad esempio, per scrivere un codice pulito e ben leggibile.
  Accetta valori di dimensione (pixel, percentuale ecc..) sia in positivo che in negativo.
• text-shadow: serve a dare un’ ombreggiatura al testo. Ha come valori ampiezza orizzontale, ampiezza verticale, raggio di sfocatura e colore, che andranno inseriti separati da una virgola.
  Troverai online dei text-shadow generator che ti aiuteranno a settare il codice avendo già una resa grafica.esempio

  .element1 {
  text-shadow: 2px 2px 9px #FFEE00;
  }

• letter-spacing: è utile per aumentare o ridurre la “crenatura” ovvero lo spazio che intercorre tra una lettera ed un’altra all’interno di una parola; accetta valori in px.
• word-spacing: simile alla precedente proprietà, regola, però, lo spazio che intercorre tra una parola e l’altra.
• line-height: regola l’interlinea del testo, vale a dire lo spazio che intercorre verticalmente tra una riga e l’altra.