Google Webfonts in Contao einsetzen

Es gibt verschiedene Methoden, Schriften, die nicht systemübergreifend auf den Rechner der Besucher einer Website installiert sind, in die eigene Website einzubauen. Neben den Möglichkeiten, Schriftersetzungs-Methoden wie Cufón (siehe dazu auch im Buch ab Seite 168 ff; Kapitel 8.14.3) zu verwenden, bietet unter anderem Google mit seinem Font-Directory die Möglichkeit, einige Schriften in die eigene Website zu integrieren.

Wie geht das?
Zunächst rufen Sie das Google Font Directory auf und suchen sich eine zu Ihrem Design passende Schrift aus.

Google Font Directory - Schrift auswählen

Schrift aus dem Google Font Directory auswählen

Für dieses Tutorial wählen Sie die Schrift Droid Sans aus. Wählen Sie diese Schrift aus in dem Sie auf den Link "Click to embed Doid Sans" klicken.

Google Font Directory - Schrift einbinden

CSS-Definitionen (Link zum Google Font Directory) kopieren

Und anschließend klicken Sie auf den Link "Use this Font".

Google Font Directory - Schrift einbinden

Sie erhalten nun oben abgebildete Seite mit der Anleitung und dem Code zum Einbinden:

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'

Achtung:
Fügen Sie am Ende des Aufrufs noch ein Leerzeichen – gefolgt von einem Slash – ein, damit die Seite auch später validiert. Das hat Google vergessen ;-)

Also korrekt validierend so:
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css' />

Und wenn Sie mehrere Schriften aus dem Google Font Directory nutzen möchten, binden Sie den Aufruf so ein:
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold|Droid+Serif:regular,bold,bolditalic&subset=latin' rel='stylesheet' type='text/css' />

Die weitere Schrift wird nach einem trennenden Pipe-Zeichens | einfach angefügt.

CSS-Link in das Seitenlayout einbinden

Kopieren Sie sich den Aufruf der CSS-Definitionen in Ihr Seitenlayout in der Rubrik "Experten-Einstellungen" unter "Zusätzliche <head> Tags".

CSS-Link in das Seitenlayout einbinden

CSS-Definitionen erstellen

Nun können Sie beliebige Elemente in den CSS-Definitionen festlegen und die eingebundene Schrift in den Schriftdefinitionen (Font Stack) angeben. Die Angaben von mehreren Schriften im Font Stack (Schriftenstapel) sorgt dafür, dass bei einem Fehlaufruf der Google Fonts dann die nächste Schriftfamilie aus der CSS-Definition verwendet wird. Wichtig ist zu beachten, dass Schriftnamen mit zwei Wörtern immer in Anführungszeichen anzugeben sind.

#main h3.ce_headline
{
	font-size:3em;
	color:#f30;
	font-family: "Droid Sans", verdana, arial, serif;
	font-style:normal;
}

Beispiel

Überschrift h3 in Droid Sans

Fazit

Eine einfache Methode, Schriften die nicht systemübergreifend zur Verfügung stehen, über das Google Font Directory einzubinden. Ein weiterer Vorteil besteht darin, dass die Schriften vor dem Einbinden nicht umgewandelt werden müssen und Fragen der Lizenzierung bereits geklärt sind. Zu wünschen ist, das Google in Zukunft weitere Schriften zur Verfügung stellt, die so einfach eingebunden werden können.

Mit Hilfe der Funktion Google Font Previewer lassen sich die Schriften individuell testen. Gleichzeitig werden auch die entsprechende CSS-Definitionen erstellt.

Auch hier der Hinweis: Google gibt die Schriftgrößen in px aus; wenn Sie em in Ihren CSS-Definitionen verwenden, müssen Sie die Angaben entsprechend umrechnen.

Je nach eingesetztem Browser kommt es bei der Verwendung von Webfonts zu einem kurzen Flackern. Die als Standard verwendete Schrift wird für einen kurzen Bruchteil (< 3 Sekunden) angezeigt, bis die einzubindenden Schriften komplett geladen sind. Paul Irish nennt dieses Verhalten FOUT (Flash Of Unstyled Text) und zeigt hier Methoden auf, das zu verhindern.

Weiterführende Links

twitter
rss-news-feed
weitzeldesign
planepix