Contao-News

Wir informieren Dich hier regelmäßig zu Updates, stellen Best-Practice-Arbeiten vor und berichten über Aktuelles aus dem Contaoversum.

Google Webfonts in Contao einsetzen

von Thomas Weitzel – Aus der Praxis

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 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.

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 indem Sie auf den Link "Click to embed Doid Sans" klicken.

CSS-Definitionen (Link zum Google Font Directory) kopieren

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

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-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-family:"Droid Sans",verdana,arial,sans-serif;
    font-style:normal;
    font-size:3em;
    color:#f30;
}

Beispiel

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.

Alle News anzeigen

Kommentare

Kommentar von MacKP |

Inzwischen kann man per Modul verschiedene Webdienste nutzen.

Kommentar von Denis |

Ist es nicht erlaubt einfach die jeweilige Stylesheet auf dem Google Server zu öffnen und hier den Quelltextschnipsel heraus zu kopieren?

So hat man keine Probleme mit Google Pagespeed, dass man externe Stylesheets doch lieber kombinieren sollte und zu kleine Stylesheets direkt ins Template einbinden müsste.

LG

Kommentar von Tim |

"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 ;-)"

Kommt darauf an auf welcher Grundlage die Website erstellt wird. Beim noch gängigen XHTML ist die Aussage natürlich vollkommen korrekt. Wird die Seite allerdings bereits in HTML5 erstellt (auf dem auch das Google Font Directory bereits basiert), wird auf den schließenden Slash verzichtet. Das betrifft alle Tags die kein Endtag haben (also bspw. br, img, hr, etc.).

Kommentar von Stefan |

Sehr guter Artikel, werde ich gleich mal lossurfen und mir die Fonts mal ansehen.

Kommentar von ideefixx |

Genau danach habe ich gesucht. Danke!!!

Einen Kommentar schreiben

Bitte addieren Sie 9 und 8.