In un sito web la tipografia è importante.
scegliere i font giusti per il tuo sito o per la tua applicazione può determinare la buona riuscita o meno del tuo business.
Al giorno d’oggi, per fortuna abbiamo delle potenzialità quasi infinite a proposito:
- possiamo utilizzare i font messi a disposizione dal sistema operativo (web-safe fonts), i classici Arial, Verdana, Tahoma, Georgia, etc..
Non basta. - nel nostro arsenale abbiamo la possibilità di utilizzare la proprietà CSS @font-face.
Basta definire il nome del carattere e puntare ad esso con il foglio di stile, questa è la sintassi:
|
1 2 3 4 5 6 7 |
@font-face { font-family: ilMioFont; src: url(brankovic.ttf); font-weight: normal; } p { font-family: ilMioFont; } |
Ci sono tante alternative, ad esempio, i font di Adobe, a questo link trovate la lista aggiornata.
Ma quello che volete leggere, se non siete qui per caso, è come utilizzare i Google fonts nel vostro sito realizzato con WordPress.
Come si usano i Google Fonts in WordPress
Per aggiungere i Google Fonts in WordPress, il primo passo da compiere è sceglierli dal sito ufficiale di Google a questo indirizzo.
Una volta entrati nel sito, avrete davanti a voi una miriade di font tra cui scegliere, serif, sans-serif, che simulano la scrittura manuale.
Sono davvero tanti, sta a voi decidere quale è il più adatto per il sito che realizzate.
Scelto il font, cliccate sul pulsante “Add to Collection”, una volta selezionato clic su “Quick-use”.
Il prossimo step è scegliere i stili che vogliamo avere a disposizione (Bold, Normal, etc), tenendo presente che più stili selezioniamo, più tempo occorrerà per caricarli, quindi non esagerate.
Adesso, copiate il link che si trova al punto 3, in questo caso:
|
1 |
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> |
All’interno dello snippet che segue copierete solamente la parte compresa tra i due apici, praticamente il link al font.
Aprite il file functions.php della nostra installazione con il vostro editor preferito ed aggiungete questo snippet:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* * Stili */ function stili_addizionali() { if ( !is_admin() ) { // register styles wp_register_style('googlefont-open_sans', 'http://fonts.googleapis.com/css?family=Open+Sans', array(), false, 'all'); // enqueue styles wp_enqueue_style('googlefont-open_sans'); } } add_action('wp_enqueue_scripts', 'stili_addizionali'); |
Fatto questo, il font è a nostra disposizione, ci basterà inserire la regola CSS come al solito, nel nostro caso, se volessimo applicare il font “Open-Sans” a tutti i paragrafi sarà più o meno così:
|
1 2 3 4 5 |
p { font-family: 'Open Sans', sans-serif; } |
Se volete inserire altri font dal sito di Google fonts, basterà ripetere i due passi (register, enqueue) all’interno dello snippet per ciascun carattere.
