Google Fonts

Google Fonts stellt über 800 Schriftarten und zahlreiche Schriftschnitte für die kostenlose Verwendung zur Verfügung. Diese Schriften werden ab dem Google Fonts Sertver eingebunden, sei's per @import ins eigene CSS (empfohlen) oder per Stylesheet Link im <head> des HTML Dokuments.

Gehe zu Google Fonts und suche eine oder mehrere Schriften/Schriftschnitte aus. Wähle den + Button aus, um die Schrift in deine Selection zu nehmen, welche sich als zu öffnender Reiter unten rechts befindet.

Öffne den Reiter, drücke auf "Customize" und wähle die passenden Schnitte aus.

Gehe zurück zu Embed, wähle dort @import und beziehe den Code für dein CSS (blaue Markierung ohne "script"). Danach kannst du Schrift einsetzen (siehe unten).

In diesem Fall würde der fette Schnitt mit "font-weight:700" ausgezeichnet.

Websafe Fonts

Die traditionelle Art, Schriften im Web zu verwenden, besteht darin, nur Schriften zu benutzen, die auf den drei Systemen MacOS, Windows und Linux vorinstalliert sind. Die gemeinsame Menge der auf allen Systemen vorhandenen Schriften ist jedoch äussert limitiert und beschränkt sich auf:

  • Arial, Arial Black
  • Verdana
  • Courier New
  • Times New Roman
  • Tahoma
  • Geneva
  • Lucida Sans Unicode, Lucida Grande
  • Trebuchet MS
  • Monaco
  • …plus einige weitere

Diese Methode lohnt sich nur, wenn in der Tat eine dieser Schriften vewendet werden soll. Eine Ausnahme ist Helvetica – falls Helvetica zum Zuge kommen soll, kann diese zumindest für Macs eingesetzt werden, und für Windows und Linux sollte Arial als Fallback (Ertsatzschrift) angegeben werden:
 

body {
font-family: Helvetica, Arial, sans-serif;
}

Fallbacks

Überhaupt sollte man bei font-families immer mehrere sogenannte Fallbacks (Ersatzschriften) angeben, falls es mit der vorangehenden Schrift nicht geklappt hat. Der Browser wird die erstbeste Schrift nehmen, welche er anwenden kann.

Egal ob ein Google-, ein websafe oder ein eingebetteter Font als erste Schrift gewählt worden ist, sollte noch eine zweite, einigermassen ähnliche Schrift (meist eine websafe) und als Drittes die generelle Schriftart eingebunden werden; siehe Beispiel oben "Helvetica, Arial, sans-serif".

Bezeichnung der allgmeinen Schriftart als letzter Fallback:

Serif Schriftarten: serif
Serifenlose Schriftarten: sans-serif
Nichtproportionale Schriftarten: monospace


 

Einbinden mit @font-face

Seit CSS3 können lokale Schriften mit eingebunden werden. Dabei ist zu beachten, dass für die raufgeladenene Schrift eine gültige Lizenz vorliegen muss, da ansonsten rechtliche Schwierigkeiten entstehen können. Die Schrift wird im Webordner abgelegt und eingebunden (siehe Box).

Zulässige Formate sind:

  • .ttf (TrueType Format)
  • .otf (Open TrueType Format)
  • Woff
  • woff2
  • svg

Nicht alle funktionieren auf allen Browsern, am sichersten sind gemäss W3Schools ttf, otf und woff. Oft wird die Schrift gleich in mehreren oder allen Formaten abgelegt und eingebunden, um alle Browser sicher zu bedienen.

Codierung:

/* Schrift einbinden */
@font-face {
font-family: 'MyWebFont';
src: url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

 
/* Eingebundene Schrift einsetzen */
body {font-family: 'MyWebFont', Fallback, sans-serif;}

Falls die Schrift im Webordner in einem Unterordner (zB. namens "fonts") liegt, muss der Dateipfad bei src: url dementsprechend angepasst werden, zB. url('fonts/webfont.woff')…