HTML/Tutorials/Google-Fonts einbinden

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

In diesem Tutorial lernen Sie, wie Sie Schriften von Google Fonts einfach und kostenfrei auf Ihrer Webseite einbinden.

Beachten Sie, dass auf diese Weise auch Google selbst von den Besuchen auf Ihren Seiten erfährt und Daten Ihrer Gäste erhält.

Alternative mit @font-face[Bearbeiten]

Die Alternative, Webschriften mittels @font-face einzubinden, setzt voraus, dass Sie die Schriften in mehreren Formaten einbinden, um ein gleichmäßiges Aussehen in allen Browsern sicherzustellen.

Dabei muss das Urheberrecht beachtet werden. Kommerzielle Anbieter wie typekit bieten eine einfache Einbindung Ihrer Schriften an, verlangen dafür aber jährliche Lizenzzahlungen. Es gibt aber auch viele freie Schriften (siehe Weblinks).

Google Fonts[Bearbeiten]

Google-Fonts
Google-Fonts - Suchkriterien (Categories:)

Auf Google Fonts finden Sie eine Liste mit mehr als 800 frei einbindbaren Schriften. Sie können Ihre gewünschte Schrift leichter finden, wenn Sie verschiedene Suchkriterien (Categories:) wählen. Da viele Schriften zwar bekannten Schriftarten ähneln, aber Phantasienamen haben, ist eine Suche nach Namen nur dann zu empfehlen, wenn Sie ihn bereits kennen.

Sie können unter folgenden Kategorien wählen:

  • Serif (z. B. „Times New Roman“ oder „Georgia“)
  • Sans Serif (z. B. „Arial“ oder „Futura“)
  • Display
  • Handwriting (Handschriften)
  • Monospace (Wie z. B. die Schreibmaschinenschrift „Courier“)

Daneben kann man Strichstärke, Neigung und Laufweite einstellen.

Zusätzlich kann man neben den Standardzeichen weitere Schriftergänzungen auswählen. Diese Ergänzungen bieten dann mehr Zeichen, wie z. B. kyrillische Buchstaben, die dann aber auch längere Ladezeiten haben.

Wichtig ist, dass Sie eine Schrift vor dem endgültigen Auswählen in der später gewünschten Größe anzeigen lassen. Manche Schriften sehen nur als Überschriften in großen Zeichengrößen gut aus, während sie in kleinem Normaltext das Lesen erschweren würden. Durch einen Klick auf die Schrift können Sie eine Vorschau der Schriften in verschiedenen Größen und Strichstärken aktivieren.

Auswahl der Schriften[Bearbeiten]

Vorschauansicht
Google-Fonts - Vorschauansicht der gewählten Schriften / PageLoad

Wenn Sie eine Schrift auf Ihrer Webseite verwenden wollen, verwenden Sie das rechte Icon +. Sie können auch mehrere Schriften zu einer Sammlung zusammenfassen.

Daneben sehen Sie auf einer Anzeige, wie viel Speicher die geladenen Schriften verbrauchen werden.

Empfehlung: Überlegen sie vorher, welche Schriftgrößen und -gewichte sie brauchen. Je weniger Optionen Sie auswählen, desto schneller lädt Ihre Webseite die gewünschten Schriften.

Einbindung[Bearbeiten]

Die Einbindung der Schriften erfolgt nun mit wenigen Zeilen Code, die Sie mit „Einfügen und Ersetzen“ in Ihre Webseite kopieren. Dabei gibt es folgende Möglichkeiten:

im HTML[Bearbeiten]

Im head der Webseite wird ein Link zu Google und der dort verfügbaren Schriftart eingefügt:

Beispiel: Einbindung im head
<head>
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css?family=Butterfly+Kids|Roboto" rel="stylesheet"> 
  <title>Einbindung eines Google Fonts</title>
</head>

Die verschiedenen Fonts werden durch einen senkrechten Trennstrich getrennt, Leerzeichen durch ein "+" ersetzt.

im CSS[Bearbeiten]

Alternativ könnten die Schriftarten durch die @import-regel in das Stylesheet eingebunden werden:

Beispiel: Einbindung im CSS
@import url('https://fonts.googleapis.com/css?family=Butterfly+Kids|Roboto');

Im CSS legen Sie die Schriftart in den Eigenschaften font-family oder der Kurzschreibweise font fest:

Beispiel: Einbindung im CSS
h1{
  font-family: 'Roboto', sans-serif;
}

h2 {
  font: italic small-caps normal 13px/150% 'Kalam', cursive;
}

Gestaltungstipps[Bearbeiten]

Der Einsatz attraktiver Schriftarten ist eine gute Möglichkeit das Design einer Webseite aufzuwerten. Allerdings sollten Sie diesen Effekt nicht übertreiben.

Empfehlung:
  • Verwenden Sie besondere Schriften sparsam, z. B. nur für Überschriften.
  • Betonen Sie besondere Schriftarten durch eine große Schriftgröße.
  • Passen Sie die Zeilenhöhe und andere Werte an die Schrift an.
  • Verwenden Sie nur wenige verschiedene Schriften nebeneinander.

Fazit[Bearbeiten]

Die Einbindung von Google Fonts ist eine schnelle Möglichkeit verschiedene Schriftarten zu verwenden. Google dient als CDN, das Inhalte zur Verfügung stellt. Beim erstmaligen Laden wird die Datei dort angefordert, danach liegt sie im Cache des Browsers.

Trotzdem ist es nicht unproblematisch, da Google so Daten über die Nutzer Ihrer Webseite erhält. Sie sollten dies in der Datenschutzerklärung Ihrer Webseite erwähnen. Eine Alternative ist es, die Fonts herunterzuladen und selbst zur Verfügung zu stellen:

Weblinks[Bearbeiten]