Google Schriftart in Website einbinden – Webdesign-Tutorial

In diesem Tutorial zeige ich dir, wie du eine beliebige Schrift aus der Google Font Library in deine Website einbinden kannst. Das Gute an Google Fonts ist, dass alle dort integrierten Schriftarten kostenlos für private und auch kommerzielle Projekte eingesetzt werden dürfen.

Google Schriftart in Website einbinden – Webdesign-Tutorial
Webdesign bei Amazon: amzn.to/2ThvxPN *

Zum Einbinden brauchst du lediglich volle Kontrolle über den Head-Bereich des HTML-Codes. Das Einfügen der Schriftart geht dabei ganz einfach: Auf die Website fonts.google.com gehen und dort beliebige Schriftart(en) heraussuchen. Anschließend den Embed-Code (Link-Tag) in den Head deines HTML-Dokuments einfügen. Danach nur noch mittels CSS die Schriftart definieren. Vergiss nicht die Schriftschnitte zu definieren. Nur so kannst du z. B. bestimmte Bold- oder Italic-Schnitte verwenden.

In diesem Video spreche ich Deutsch. I speak german in this tutorial.

* Dies ist ein Affiliate-Link, der mit dem Partnerprogramm von Amazon zusammenhängt. Sobald du darauf geklickt hast, wird bei dir am Rechner für 24 Stunden ein Cookie gespeichert. Wenn du in diesem Zeitraum etwas bei Amazon kaufst, dann bekomme ich dafür eine kleine Provision (zwischen einem und zehn Prozent des Warenkorb-Wertes). Auf dich oder deinen Einkauf hat dies keine Auswirkungen. Vielen Dank für deine Unterstützung! 😊

Hi Leute und herzlich willkommen zu einem neuen HTML/CSS-Tutorial. Heute zeige ich euch, wie ihr in eure Website eine Google Custom Font einbinden könnt. Das geht relativ schnell und einfach – mit nur einem Link-Tag und der Zuweisung im CSS. Wie das genau funktioniert, zeige ich euch jetzt Schritt für Schritt.

Zuallererst brauchen wir unser HTML-Grundgerüst und ein bisschen Inhalt. Wenn ihr in einem CMS arbeitet, braucht ihr zumindest Zugriff auf den Head-Bereich.

Ich habe hier einfach mal ein paar definierte Absätze und ein Strong- und Em-Tag für Fett und Kursiv verwendet.

So sieht das aktuell aus:

Wenn ich nun meine Seite aufrufe, habe ich standardmäßig eine einfache Schrift – in diesem Fall die Browser-Standardschrift, die zum Beispiel in Firefox eingestellt ist.

Jetzt müssen wir unsere Google Font einbinden. Dafür gehe ich auf fonts.google.com – dort gibt es eine riesige Auswahl an Schriftarten.

Hier kann ich die Auswahl einschränken, zum Beispiel nur Serif-Schriften anzeigen lassen. Ich wähle dann eine beliebige Schrift aus, zum Beispiel „Open Sans“.

Dort sehe ich die verschiedenen Schnitte und Kombinationen der Schrift.

Oben habe ich den Button „Select this style“. Damit füge ich die Schrift zu meiner Auswahl hinzu.

Danach öffne ich den Einbettungscode. Das ist der Link, den ich in meinen Head-Bereich im HTML-Dokument einfügen muss.

Alternativ kann man das auch über die @import-Funktion im CSS machen, aber Google empfiehlt die Variante mit dem Link-Tag.

Bevor ich den Code einfüge, gehe ich auf „Customize“. Hier kann ich die Schriftschnitte auswählen:

  • Regular (400)
  • Bold (700)
  • Italic

Ich wähle zum Beispiel Regular für Fließtext, Bold für Überschriften und zusätzlich Italic.

Wenn ich auch spezielle Zeichen brauche (zum Beispiel Kyrillisch), kann ich das ebenfalls hier aktivieren.

Jetzt ändert sich der Einbettungscode. Ich habe oben den Font-Link und darunter die ausgewählten Schnitte.

Diesen Code kopiere ich und füge ihn in den Head-Bereich meines HTML-Dokuments ein.

Als Nächstes definiere ich die Schrift im CSS. Ich erstelle entweder eine separate CSS-Datei oder schreibe schnell einen Style-Bereich.

Ich setze zum Beispiel die importierte Google Font für den Body und zusätzlich eine Fallback-Schrift, zum Beispiel Arial.

Das ist wichtig, falls die Google Fonts nicht geladen werden können – etwa bei fehlender Internetverbindung. Dann greift automatisch die Fallback-Schrift des Browsers.

Jetzt speichere ich die Datei und lade die Seite neu.

Die Schrift ist jetzt eingebunden. Überschriften werden automatisch fett dargestellt, Strong-Tags ebenfalls. Em-Tags werden kursiv dargestellt.

Wenn ich den Italic-Schnitt entferne, fällt die Darstellung entsprechend zurück. Entferne ich den Bold-Schnitt, wird alles normal dargestellt.

Jetzt können wir das Ganze erweitern und eine zweite Schrift hinzufügen – zum Beispiel für Headlines.

Dafür gehe ich wieder zu Google Fonts und wähle eine zweite Schrift aus, zum Beispiel „Merriweather“.

Ich füge sie ebenfalls hinzu und kann wieder die gewünschten Schnitte auswählen, zum Beispiel Black 900.

Der Einbettungscode wird erweitert. Ich kann ihn entweder komplett kopieren oder nur den neuen Teil hinzufügen.

Der Aufbau ist immer gleich:

  • Schriftfamilie
  • Schriftschnitte
  • getrennt durch einen senkrechten Strich (Pipe)

Jetzt weise ich die zweite Schrift zum Beispiel meinen H1- und H2-Elementen zu und setze sie als Font-Family in CSS.

Als Fallback lasse ich weiterhin eine Standardschrift wie Arial stehen.

Ich speichere alles und lade die Seite neu.

Jetzt wird für meine Headlines die neue Schrift mit dem Schnitt 900 (Black) verwendet.

So einfach geht das: Link-Tag einfügen, Schrift von Google Fonts auswählen, im CSS zuweisen – fertig.

Damit könnt ihr auf jeder Website individuelle Schriften über Google Fonts einbinden.

Ich hoffe, ich konnte euch damit etwas beibringen. Bis dann!