Hoe een ander lettertype gebruiken op vertaalde versies

In dit artikel leer je hoe je het lettertype kunt wijzigen dat wordt weergegeven op je vertaalde versies.

Inleiding: Wanneer je je website in meerdere talen presenteert, kan het essentieel zijn om ervoor te zorgen dat de typografie aansluit bij de esthetische en leesbaarheidsnormen van elke taal. Het gebruik van verschillende lettertypes voor vertaalde versies kan de gebruikerservaring en toegankelijkheid aanzienlijk verbeteren. Dit artikel leidt je door het eenvoudige proces van het aanpassen van lettertypes voor je vertaalde inhoud met behulp van Google Fonts en Weglot.

1. Selecteer uw lettertype en stijl op Google Fonts

Laten we een voorbeeld nemen met het "Roboto"-lettertype.

Als je bij Google Fonts komt, kun je de zoekfunctie gebruiken om te zoeken naar "Roboto":

Vervolgens kun je het gewenste lettertype selecteren door erop te klikken.

Op het nieuwe tabblad zie je de verschillende stijlen die zijn toegepast op het geselecteerde lettertype:

Om dit lettertype op je vertaalde website te hebben, moet je eerst klikken op de knop "Lettertype verkrijgen" in de rechterbovenhoek:

Daarna kun je de optie "Insluitcode ophalen" gebruiken:

Op deze nieuwe pagina kun je verschillende stijlen selecteren via het paneel aan de linkerkant.

Selecteer in het paneel aan de rechterkant "Web" en "@import" in plaats van "link".

Kopieer de inhoud binnen de "style" tags (zonder de tags zelf):

@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');

En plak het in je Weglot Dashboard > Instellingen > Taalwisselaar > "Aangepaste CSS":

Zodra dit klaar is, kun je overschakelen naar het tweede deel.

2. Aangepaste CSS toevoegen om het lettertype weer te geven

Ga terug naar het rechterpaneel van Google Fonts en kopieer de CSS-regel. In ons voorbeeld is dat:

Lettertype: 'Roboto', schreefloos;

U hoeft alleen maar de volgende code toe te voegen in uw Weglot Dashboard > Instellingen > Taalwisselaar > "Aangepaste CSS":

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

Vervang "YOUR_FONT" door het lettertype dat je wilt gebruiken voor de vertaalde taal. Voor Roboto zou dat bijvoorbeeld zijn:

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

Vervang de taal shortcode volgens je vertaalde taal (zie de shortcodes hier: Beschikbare talen). Om bijvoorbeeld het lettertype voor Spaans te wijzigen, gebruik je:

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

Klik ten slotte op "Wijzigingen opslaan" en je bent klaar!

Conclusie: Het aanpassen van lettertypen voor verschillende taalversies van je website is eenvoudig en kan de gebruikerservaring aanzienlijk beïnvloeden. Door deze stappen te volgen, kunt u ervoor zorgen dat uw website niet alleen de taal van uw publiek spreekt, maar deze ook presenteert op een visueel aantrekkelijke en cultureel passende manier. Vergeet niet om uw wijzigingen op te slaan in het Weglot Dashboard om de onmiddellijke impact op uw site te zien.