In questa guida ti spiegherò come aggiungere font personalizzati nel tuo sito WordPress.
Ammettiamolo, tutti noi amiamo i blog e i siti web con i caratteri scelti saggiamente. Non solo rendono l’intero sito di aspetto gradevole, ma agganciano anche l’utente ai suoi contenuti.
Tuttavia, la scelta dei font WordPress è limitata e dipende dal tema che si sta utilizzando. Ma la buona notizia è che è possibile aggiungere font personalizzati a WordPress manualmente o facendo uso di alcuni plugin.
Scegliere il font da utilizzare in WordPress
Esistono vari siti Web da cui è possibile ottenere font Web gratuiti. Ad esempio Google Font Service è un servizio di font gratuito fornito da Google e ha font in oltre 135 lingue. Edge Web Fonts è invece un servizio di font gratuito fornito da Adobe che vanta la sua vasta collezione di caratteri web. Potresti anche provare Typekit, una libreria gratuita di migliaia di caratteri Web, insieme a Fonts.com che afferma di fornire oltre 150.000 caratteri Web e desktop.
Ora che hai trovato il carattere che vuoi usare sul tuo sito web, è tempo di controllare il loro formato. Vale la pena ricordare qui che non tutti i tipi di carattere sono supportati dai browser web. Ma non preoccuparti, anche se il tuo font scelto non è supportato, puoi comunque convertirlo in un formato compatibile.
Prima di convertire i font da un formato all’altro, diamo una rapida occhiata a diversi formati di font.
Open Type Fonts
Abbreviato come OTF, questi sono i caratteri web più comunemente usati e sono un marchio registrato di Microsoft. Funzionano bene con quasi tutti i principali browser.
True Type Fonts
Chiamato anche come TTF, questi font sono stati sviluppati da Microsoft e Apple nel 1980 e sono ampiamente utilizzati sia per i sistemi operativi Windows sia per quelli Mac. Sono supportati da tutti i principali browser.
Web Open Font Format
I font WOFF sono ampiamente utilizzati nelle pagine Web e sono consigliati da W3C. Questi sono supportati principalmente da tutti i browser.
WOFF 2.0
I font WOFF 2.0 hanno un vantaggio rispetto a WOFF 1.0 grazie alle loro migliori capacità di compressione. Non sono supportati da Safari e Internet Explorer, ma funzionano bene con Google Chrome, Firefox e Opera.
Embedded Open Type Fonts
Questi caratteri sono caratteri OTF compatti e vengono utilizzati come caratteri incorporati nelle pagine Web. Sono supportati da tutti i principali browser.
Se hai trovato il carattere che desideri utilizzare sul tuo sito Web WordPress, ma non sei sicuro se sia compatibile con tutti i browser, utilizza lo strumento Web Font Generator. Questo strumento ti consente di convertire facilmente qualsiasi tipo di carattere in un formato web friendly:
- Accedi allo strumento Web Font Generator.
- Premi il pulsante Upload Fonts per caricare il tuo carattere e accetta che i caratteri siano legalmente idonei per l’incorporamento web.
- Premi il pulsante Download e salva l’archivio .zip sul tuo computer.
- All’interno del file .zip troverete i font in formato WOFF e WOFF 2.0 insieme ai file CSS e alla pagina HTML dimostrativa. Questi formati di carattere sono supportati da quasi tutti i browser.
Aggiungere nuovi font su WordPress tramite plugin
I plugin sono probabilmente il modo più semplice per aggiungere font in WordPress. Ecco alcuni dei plugin più popolari elencati di seguito:
WP Google Font
Puoi facilmente aggiungere font al tuo sito Web WordPress usando il plug-in per i font WP Google Font. Questo plugin include automaticamente il codice necessario per aggiunger i nuovi font al tuo sito WordPress. Fornisce inoltre la libertà di utilizzare caratteri personalizzati in specifici elementi CSS dall’amministratore di WordPress.
Basta installare questo plug-in dalla directory ufficiale dei plugin di WordPress e aprire la nuova sezione che si creerà nella dashboard di WordPress: Google Fonts. Ti apparirà il Google Font Control Panel, cioè la pagina delle impostazioni. Qui puoi selezionare i caratteri e modificare varie impostazioni come lo stile del carattere, gli elementi assegnati, ecc.
Use Any Font
Use Any Font è un altro plugin attraverso il quale è possibile aggiungere font al tuo sito Web WordPress.
Puoi installare questo plugin dalla directory dei plugin ufficiale di WordPress. Una volta completata l’installazione, vai su Use any font section e crea una chiave API gratuita e premi il pulsante Verifica.
Una volta completata la verifica, sarà possibile caricare i caratteri nei formati TTF, OTF, WFF. Il plugin consente inoltre di assegnare caratteri a elementi personalizzati.
Aggiungere nuovi font su WordPress a mano
Se non vuoi sovraccaricare il tuo WordPress con plugin, puoi aggiungere manualmente i font a WordPress. Il processo è abbastanza semplice: devi caricare i font sul tuo account di hosting e modificare il file CSS del tema.
Istruzioni precise su come aggiungere font personalizzati a WordPress:
- Scarica il font sul tuo computer.
- Di solito i file dei font li trovi in un archivio .zip. Estrailo.
- Ora è necessario caricare il file del font (è possibile utilizzare il client FTP o il File Manager per questo) nella directory wp-content / themes / il-tuo-tema / fonts (devi creare tu la cartella dei font se non esiste). Nel nostro esempio, abbiamo caricato il font AguafinaScript-Regular.ttf.
- Ora vai all’area amministrativa di WordPress e apri Aspetto -> Editor. Vai sul file style.css. Scorri fino alla fine di questo file e aggiungi il seguente codice (non dimenticare di cambiare i valori della famiglia di font e dell’URL per far corrispondere il tuo carattere):
@font-face {
font-family: Aguafina Script-Regular;
src: url(https://www.b-fast.it/wp-content/themes/twentyseventeen/fonts/AguafinaScript-Regular.ttf);
font-weight: normal;
}
Premere il pulsante Aggiorna file per salvare le modifiche.
Il codice font-face carica il carattere ogni volta che un visitatore accede al tuo sito web. Tuttavia, il carattere non è ancora applicato a nessun elemento. Pertanto, non vedrai cambiamenti nel front-end. Per assegnare il carattere per un elemento specifico, è necessario modificare lo stesso file style.css.
Ad esempio per assegnare quel font al tuo titolo (h1) basta semplicemente scrivere
h1 {
font-family: "Aguafina Script-Regular", Arial, sans-serif;
}
Conclusione
Spero che questo tutorial ti abbia aiutato ad aggiungere font personalizzati al tuo WordPress.
Si consiglia, per chi non conosce il linguaggio CSS, di utilizzare il metodo con i plugin poiché è un metodo più semplice e non richiede altre conoscenze implicite di scrittura a codice.
Related Posts
