Wie man eine andere Schriftart in übersetzten Versionen verwendet

In diesem Artikel erfahren Sie, wie Sie die Schriftart für Ihre übersetzten Versionen ändern können.

Einleitung: Wenn Sie Ihre Website in mehreren Sprachen präsentieren, ist es wichtig, dass die Typografie mit den ästhetischen und leserlichen Standards der jeweiligen Sprache übereinstimmt. Die Verwendung unterschiedlicher Schriftarten für übersetzte Versionen kann die Benutzerfreundlichkeit und Zugänglichkeit erheblich verbessern. Dieser Artikel führt Sie durch den einfachen Prozess der Anpassung von Schriftarten für Ihre übersetzten Inhalte mit Google Fonts und Weglot.

1. Wählen Sie Ihre Schriftart und Ihren Stil auf Google Fonts

Nehmen wir ein Beispiel mit der Schriftart "Roboto".

Wenn Sie Google Fonts aufrufen, können Sie die Suchfunktion verwenden, um nach "Roboto" zu suchen:

Dann können Sie die gewünschte Schriftart auswählen, indem Sie darauf klicken.

Auf der neuen Registerkarte sehen Sie die verschiedenen Stile, die auf die ausgewählte Schriftart angewendet werden:

Um diese Schriftart auf Ihrer übersetzten Website zu verwenden, müssen Sie zunächst auf die Schaltfläche "Schriftart abrufen" oben rechts klicken:

Danach können Sie die Option "Einbettungscode abrufen" verwenden:

Auf dieser neuen Seite können Sie über das Panel auf der linken Seite verschiedene Stile auswählen.

Wählen Sie in der rechten Leiste "Web" und "@import" anstelle von "Link".

Kopieren Sie den Inhalt innerhalb der "style"-Tags (ohne die Tags selbst):

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

Und fügen Sie es in Ihr Weglot Dashboard > Einstellungen > Language Switcher > "Custom CSS" ein:

Sobald das erledigt ist, können Sie zum zweiten Teil übergehen.

2. Hinzufügen von benutzerdefiniertem CSS zur Anzeige der Schriftart

Kehren Sie zum Google Fonts-Panel auf der rechten Seite zurück und kopieren Sie die CSS-Regel. In unserem Beispiel lautet sie:

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

Sie müssen nur den folgenden Code in Ihrem Weglot Dashboard > Einstellungen > Sprachumschaltung > "Custom CSS" hinzufügen:

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

Ersetzen Sie "YOUR_FONT" durch die Schriftart, die Sie für die übersetzte Sprache verwenden möchten. Für Roboto wäre das zum Beispiel:

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

Ersetzen Sie den Sprachkurzcode entsprechend Ihrer übersetzten Sprache (siehe die Kurzcodes hier: Verfügbare Sprachen). Um zum Beispiel die Schriftart für Spanisch zu ändern, verwenden Sie:

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

Klicken Sie abschließend auf "Änderungen speichern", und schon sind Sie fertig!

Schlussfolgerung: Die Anpassung von Schriftarten für verschiedene Sprachversionen Ihrer Website ist einfach und kann das Nutzererlebnis erheblich beeinflussen. Wenn Sie diese Schritte befolgen, können Sie sicherstellen, dass Ihre Website nicht nur die Sprache Ihres Publikums spricht, sondern sie auch optisch ansprechend und kulturell angemessen präsentiert. Vergessen Sie nicht, Ihre Änderungen im Weglot Dashboard zu speichern, um die unmittelbaren Auswirkungen auf Ihre Website zu sehen.