04 Ott Come integrare i font di Google su WordPress
Un font può fare la differenza, è la pura realtà poichè può cambiare l’aspetto di un lavoro grafico, di qualsiasi natura, da così a così (mentre leggete immaginate la mano che ruota per far capire la differenza).
Detta questa sacrosanta verità, nello sviluppo di un sito abbiamo la possibilità di incorporare il font che desideriamo o di provarne quanti vogliamo finchè non troviamo quello che meglio si abbina alla linea grafica del nostro lavoro. In aiuto di ciò, in grande aiuto oserei dire, ci viene anche Google Fonts, il quale possiede un catalogo enorme di caratteri suddivisi per tecnologia, decorazione, classificazione e proprietà, il tutto con tanto di testo da poter scrivere in modo da avere una prova reale ed immediata.
Ma lo scopo di questo articolo è quello di capire come integrare i font di Google su WordPress. Da premettere che molti temi permettono già di loro la possibilità di scegliere un font esistente, ma talvolta non sono sincronizzati con Google Fonts e succede anche che proprio quel font che serve non compare nel classico menu a tendina. Come fare?
Esistono diversi metodi per incorporare i font in un tema di WordPress
Dopo aver scelto il font su Google Fonts, non si deve fare altro che cliccarlo per vedere la sua pagina dedicata nella quale troverai, nella parte destra di ogni tipologia di stile di quel font, una voce chiamata “Select” con l’annessa icona “+“. Cliccandola, quello stile si andrà ad aggiungere ad un pannello laterale che si aprirà automaticamente chiamato “Selected family“. Si tratta di una sidebar nella quale sotto il tuo font troverai la voce “Use on the web“, qui potrai scegliere se usare il link (che poi dovrà essere incollato nel tag <head> del tuo sito), oppure usare @import, che è ciò che faremo in questo articolo. Una volta selezionato @import, il codice che si presenterà sarà all’incirca come il seguente:
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
</style>
Copia il codice di importazione ed incollalo nel tuo sito andando su Aspetto > Personalizza > CSS aggiuntivo.
Fatto ciò però, sempre nel Css aggiuntivo del tuo sito, incolla successivamente anche la seguente regola CSS:
h1, h2, h3, h4, h5, h6 {
font-family: 'Roboto', sans-serif;
}
A titolo di esempio io ho usato il font Roboto, ma il procedimento è lo stesso per qualsiasi altro font di Google. Inoltre, nel secondo codice, come noterai ho detto al sito di usare quel font per tutti i titoli (H1, H2, H3, H4, H5, H6), per tale motivo, se invece hai bisogno di usare il tuo font solo per un titolo specifico e non tutti, ti basterà lasciarlo nella regola CSS cancellando gli altri.
Non ci sono commenti