Google Web Fonts: Eigene Schriftarten einbinden

Bei mir kam in den letzten Tagen die Frage auf, wie man am besten eigene Schriftarten auf seiner Webseite einsetzen kann. Abgesehen von der CSS-Eigenschaft @font-face gibt es noch den Umweg über Flash - genannt sIFR (Scalable Inman Flash Replacement).

Beide haben jedoch einen Nachteil: Die CSS-Eigenschaft "@font-face" funktioniert an sich zwar problemlos, aber die eingebundenen Schriftarten werden meist in allen Browsern unterschiedlich dargestellt. Bei der sIFR Methode ist das zwar nicht der Fall, allerdings ist es zwingend erforderlich dass der User Flash installiert und aktiviert hat. Zudem ist diese Methode nicht sonderlich ressourcenschonend.

Anders bei Google Web Fonts. Google greift hier zwar auch auf die CSS-Eigenschaft "@font-face" zurück, der Unterschied besteht aber darin, dass durch die Google-API und die von Google bereitgestellten Schriftarten, die Browser Kompatibilität gewährleistet ist. Derzeit bietet Google mit Google Web Fonts über 300 Schriftarten, welche mit wenig Aufwand in die eigene Website eingebunden werden können.

Hinweis: Es muss unbedingt beachtet werden, dass Google Web Fonts nicht darauf ausgelegt ist, den gesamten Content einer Internetseite zu gestalten. Dadurch würde sich die Ladezeit der Internetseite merklich verschlechtern. Man sollte also nur die wesentlichen Dinge wie Überschriften, Menüpunkte ect. damit zieren.

Im Anschluss noch ein Beispiel wie einfach es ist mit Google Web Fonts zu arbeiten:

Ein wunderschöner Text mit Google Web Fonts

Es wird lediglich eine von Google bereitgestellte CSS-Datei mit der jeweiligen Schriftart in die eigene Homepage eingebunden:

<link href='http://fonts.googleapis.com/css?family=Engagement' rel='stylesheet' type='text/css'>

Bei der rot markierten Stelle handelt es sich um den Namen der Schriftart. Im Anschluss kann dann ganz normal mit der CSS-Eigenschaft "font-family" gearbeitet werden.

Weiter Informationen findet ihr unter: Getting Started

Tags: eigene schriftart css, html schrift einbinden, css3 flash font generator, festlegen einbetten