Come utilizzare un font diverso nelle versioni tradotte

In questo articolo scoprirete come modificare il carattere visualizzato nelle versioni tradotte.

Introduzione: Quando si presenta il proprio sito web in più lingue, può essere essenziale garantire che la tipografia sia in linea con gli standard estetici e di leggibilità di ciascuna lingua. L'uso di font diversi per le versioni tradotte può migliorare significativamente l'esperienza utente e l'accessibilità. Questo articolo vi guiderà attraverso il semplice processo di personalizzazione dei font per i vostri contenuti tradotti utilizzando Google Fonts e Weglot.

1. Selezionate il carattere e lo stile su Google Fonts

Facciamo un esempio con il font "Roboto".

Quando si raggiunge Google Fonts, è possibile utilizzare la funzione di ricerca per cercare "Roboto":

Quindi, è possibile selezionare il carattere desiderato facendo clic su di esso.

Nella nuova scheda è possibile vedere i diversi stili applicati al carattere selezionato:

Per avere questo font sul vostro sito web tradotto, dovete prima cliccare sul pulsante "Ottieni font" in alto a destra:

Dopodiché, è possibile utilizzare l'opzione "Ottieni codice incorporato":

In questa nuova pagina è possibile selezionare diversi stili tramite il pannello a sinistra.

Nel pannello a destra, selezionare "Web" e "@import" invece di "link".

Copiare il contenuto dei tag "style" (senza i tag stessi):

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

E incollarlo nella Dashboard di Weglot > Impostazioni > Language Switcher > "Custom CSS":

Una volta terminato, si può passare alla seconda parte.

2. Aggiungere CSS personalizzati per visualizzare il carattere

Tornate al pannello destro di Google Fonts e copiate la regola CSS. Nel nostro esempio, è:

font-family: 'Roboto', sans-serif;

È sufficiente aggiungere il seguente codice nella Dashboard di Weglot > Impostazioni > Language Switcher > "Custom CSS":

html[lang="shortcode"] :is(h1,h2,h3,h4,h5,h6,span,p,a) {font-family: "YOUR_FONT" !important;}

Sostituire "YOUR_FONT" con il carattere che si desidera utilizzare per la lingua tradotta. Ad esempio, per Roboto, sarebbe:

html[lang="shortcode"] :is(h1,h2,h3,h4,h5,h6,span,p,a) {font-family: 'Roboto', sans-serif !important;}

Sostituire lo shortcode della lingua in base alla lingua tradotta (vedere gli shortcode qui: Lingue disponibili). Ad esempio, per cambiare il carattere per lo spagnolo, utilizzare:

html[lang="es"] :is(h1,h2,h3,h4,h5,h6,span,p,a) {font-family: 'Roboto', sans-serif !important;}

Infine, fare clic su "Salva modifiche" e il gioco è fatto!

Conclusione: La personalizzazione dei font per le diverse versioni linguistiche del vostro sito web è semplice e può avere un impatto sostanziale sull'esperienza dell'utente. Seguendo questi passaggi, potrete garantire che il vostro sito web non solo parli la lingua del vostro pubblico, ma la presenti anche in modo visivamente accattivante e culturalmente appropriato. Ricordate di salvare le modifiche nella Dashboard di Weglot per vedere l'impatto immediato sul vostro sito.