HTML/Tutorials/Google-Fonts

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.

Google Web Fonts[Bearbeiten]

Google-Webfonts
Google-Webfonts - Suchkriterien (Filters:)

Auf Google Fonts finden Sie eine Liste mit mehr als 600 frei herunterladbaren Schriften. Sie können Ihre gewünschte Schrift leichter finden, wenn Sie verschiedene Suchkriterien (Filters:) 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.

Suchkriterien
Google-Webfonts - Suchkriterien (Vorschauansicht: words)

Durch die Vorschauansicht „word“ erhalten Sie ein Raster mit vielen Schriften auf einmal. 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 kleinen Icons rechts unten können Sie eine Voranschau der Schriften in verschiedenen Strichstärken aktivieren.

Auswahl der Schriften[Bearbeiten]

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

Wenn Sie eine Schrift auf Ihrer Webseite verwenden wollen, verwenden Sie das mittlere Icon „Quick Use“.

Alternativ können Sie auch mehrere Schriften mittels „Add to Collection“ zu einer Sammlung zusammenfassen. Wenn Sie alle gewünschten Schriften ausgewählt haben, drücken Sie rechts unten auf „Use“.

Hier können Sie Ihre Schriften noch einmal anschauen und Varianten auswählen bzw. wieder wegklicken.

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='http://fonts.googleapis.com/css?family=Rubik+One|Kalam' rel='stylesheet' type='text/css'>
  <title>Einbindung eines Google Web 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('http://fonts.googleapis.com/css?family=Kalam');

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

Beispiel: Einbindung im CSS
h1{
  font-family: 'Rubik One', 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.

Weblinks[Bearbeiten]