Esistono innumerevoli modi per rendere il tuo sito WordPress più gradevole agli occhi dei tuoi utenti . Uno di questi è l’aggiunta di font personalizzati.
Ad ogni modo, la scelta dei font di WordPress può essere limitata e dipendente dal tema. In questo articolo imparerai come aggiungere caratteri personalizzati a WordPress sia manualmente che utilizzando i plugin.
Dove scaricare i font per WordPress?
Esistono numerosi siti in cui è possibile trovare font web gratuiti e Font Squirrel è uno di questi. Puoi facilmente trovare font gratuiti concessi in licenza per lavori commerciali. Oltre a ciò, Google Fonts ha oltre 900 famiglie di font e Edge web Fonts, fornito da Adobe, offre una vasta collezione di font web.
Se sei alla ricerca di qualcosa di più adatto per uso personale, controlla siti come Fonts.com , Dafont e 1001 free fonts .
Conversione di font in un formato compatibile con il web
Vale la pena ricordare che non tutti i browser web supportano i font personalizzati. Tuttavia, anche se il carattere scelto non è supportato, puoi comunque convertirlo in un formato compatibile.
Prima di convertire i fonti da un formato all’altro, diamo una rapida occhiata ai diversi formati di carattere:
- Open Type Fonts (OTF): i font web più comunemente utilizzati e sono un marchio registrato di Microsoft. Questo formato funziona bene con quasi tutti i principali browser.
- True Type Fonts (TTF) – sviluppato da Microsoft e Apple nel 1980. Ampiamente usato sia per Windows che per macOS.
- web Open Font Format (WOFF): formato ampiamente utilizzato per le pagine web e raccomandato dal World Wide web Consortium (W3C).
- WOFF 2.0 – considerata un’opzione migliore di WOFF 1.0 grazie alle migliori capacità di compressione. Questo formato non è supportato da Safari e Internet Explorer, ma funziona bene con Google Chrome, Firefox o Opera.
- Caratteri OpenType incorporati (EOF): fontOTF più compatti, utilizzati come caratteri incorporati nelle pagine web. Tutti i principali browser supportano EOF.
Se non sei sicuro che il tuo font sia compatibile con il tuo browser predefinito, usa il web Font Generator . Questo strumento ti consente di convertire facilmente quasi tutti i font in un formato web friendly:
- Vai a webfont Generator .
- Fai clic sul pulsante Upload Fonts e scegli un carattere che desideri convertire,
- Seleziona la casella nella sezione Agreement per indicare che i tuoi caratteri sono legalmente idonei per l’incorporamento web.
- Premi il pulsante Download your kit e salva l’ archivio .zip sul tuo computer.
- All’interno dell’archivio, troverai caratteri in formato WOFF e WOFF 2.0 insieme a file CSS e pagina HTML demo .
Come aggiungere caratteri personalizzati a WordPress?
Ecco come puoi aggiungere caratteri personalizzati a WordPress, manualmente o utilizzando i plugin.
Come aggiungere manualmente i font a WordPress
Se non vuoi sovraccaricare il tuo WordPress con troppi plugin, puoi aggiungere manualmente i font al tuo sito web. Devi caricare il tuo carattere sul tuo account di hosting e modificare il file CSS del tuo tema.
È necessario scaricare il carattere che desideri utilizzare sul computer ed estrarre l’ archivio .zip .
Carica il tuo file di font nella directory wp-content/themes/il-tuo-tema/fonts . Crea una cartella dei font separata se non ne hai ancora una. Puoi utilizzare un client FTP come FileZilla o File Manager di cPanel per questa attività. Nel nostro esempio, abbiamo caricato il carattere AguafinaScript-Regular.ttf utilizzando il File Manager in cPanel.
Vai all’area di amministrazione di WordPress. Quindi, vai su Aspetto -> Editor temi . Ti verrà presentato il file style.css . Scorri verso il basso e aggiungi il seguente codice:
@font-face {
font-family: Aguafina Script-Regular;
src: url(https://test-site.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf);
font-weight: normal;
}
Non dimenticare di modificare la famiglia di font e i valori dell’URL in modo che corrispondano al tuo carattere.
Premi il pulsante Aggiorna file per salvare le modifiche.
Ricorda, il cidice font-face carica il carattere ogni volta che un visitatore visita il tuo sito web. Tuttavia, il carattere non è ancora applicato ad alcun elemento.
Per assegnare il carattere per un elemento specifico, è necessario modificare lo stesso file style.css . Ad esempio, il codice seguente applicherebbe il carattere Aguafina Script al titolo del nostro titolo del sito web :
.site-title {
font-family: "Aguafina Script-Regular", Arial, sans-serif;
}
Come aggiungere caratteri in WordPress usando i plugin
L’uso dei plugin è probabilmente il modo più semplice per questa attività. Ecco alcune delle opzioni più conosciute e utilizzate:
WP Google Fonts
WP Google Fonts ti offre la libertà di utilizzare caratteri personalizzati e applicarli a particolari elementi CSS.
Installa il plugin WP Google Fonts dalla directory dei plugin di WordPress e apri il pannello di controllo di Google Font tramite la dashboard di WordPress. Qui puoi selezionare i caratteri e modificare varie impostazioni come lo stile del carattere, gli elementi assegnati, ecc.
Easy Google Fonts
Con Easy Google Fonts, puoi utilizzare qualsiasi tema e visualizzare l’anteprima di qualsiasi font in tempo reale. È anche semplice da usare poiché non sono richieste conoscenze di codice.
Una volta installato e attivato il plugin, puoi modificare e gestire le impostazioni dei caratteri accedendo a Impostazioni -> Google Fonts . Se desideri modificare subito la tipografia del tuo tema, accedi al customizer di WordPress facendo clic su Aspetto -> Personalizza . Successivamente, puoi iniziare a personalizzare nella sezione Tipografia da dove puoi gestire i caratteri di qualsiasi parte del tuo sito.
Use Any Font
Use Any Font è un altro eccellente plugin che può aiutarti ad aggiungere diversi caratteri al tuo sito web WordPress. Una volta installato, crea una chiave API gratuita e premi il pulsante Verifica .
Al termine della verifica, sarai in grado di caricare i caratteri nei formati TTF , OTF e WOFF . Usare un altro carattere ti consente di assegnare i caratteri anche agli elementi personalizzati.
Conclusione
In questo post hai imparato a scaricare e convertire i caratteri in un formato web friendly. Hai anche scoperto due modi per aggiungere caratteri personalizzati a WordPress. Qualunque sia il carattere che scegli, assicurati che sia adatto al tema e allo stile del tuo sito.
Buon lavoro!