Webfonts per CSS richtig einbinden

Geschrieben von:

Eigene Schriftart - Pimp my WebsiteObwohl bei Windows standardmäßig eine große Auswahl an Schriftarten installiert sind, reichen die Standard Fonts vielen Webmastern nicht aus. Gerade die Tatsache, dass ein Großteil der Blogger und Webseitenbetreiber mit WordPress arbeitet und daher oftmals dasselbe kostenlosn Theme verwendet wird, hegt den Wunsch, sich mit einer individuellen Schriftart von der Masse abzuheben. Dem Wunsch nach einer coolen, individuellen Schriftart steht die nicht einfache Umsetzung entgegen. Während es auf dem heimischen Rechner überhaupt kein Problem darstellt, neue Fonts zu installieren und in Word oder anderen Programmen einzubinden, steht man bei der Webseite vor der Herausforderung, dass andere User diese Schriftart nicht installiert haben und diese daher nicht angezeigt wird. Um diese technische Bariiere zu umgehen und eine andere Schriftart in einem HTML-Dokument einzubinden, gibt es generell mehrere Möglichkeiten, die wir hier einzeln vorstellen möchten.

Pimp my Website

Google Webfonts per CSS einbinden

Einer der einfacheren Varianten, eine spezielle Schriftart einzubinden, bietet Google an. Unter Google Webfonts findet man ein ziemlich umfangreiches Sammelsurium an Schriftarten mit unterschiedlichen Styles, angefangen von handschriftlichen Schriften über edle Schriften mit Schnörkel Form bis hin zu modern und futuristisch ausschauenden Schriftarten. Um die Google Webfonts auf Ihrer Internetseite zu implementieren, müssen Sie zwei CSS Befehle auf Ihrer Webseite einfügen. Zur Veranschaulichung haben wir den Vorgang für die Schriftart Great Vibes illustriert:
Google Webfonts per CSS in Webseite einbinden
Nach dem Sie sich in der Google Web Fonts Datenbank für eine Schriftart entschieden haben (in unserem Beispiel ‘Great Vibes’) klicken Sie auf Quick Use: Sobal Sie auf den Quick Use Button gedrückt haben, werden Sie zu einer neuen Seite weiter geleitet.

An dieser Stelle stehen Ihnen drei Möglichkeiten zur Einbindung der Schriftart per CSS zur Verfügung:

  • Einbindung der Webfont in die CSS Datei per Link
  • Importieren der Schriftart mit dem CSS Befehl @import
  • Per Javascript

Einfluss von Schriftarten auf die LadezeitenIm Prinzip funktionieren alle drei Varianten. Möglichkeit 2 und 3 haben aber entscheidende Nachteile. Integrieren Sie nämmlich Schriftarten per Javascript in Ihre Website, dann können User, die kein Java installiert haben, die Schriftart auch nicht lesen. Die zweite Methode hat den Nachteil, dass die Ladezeit der Seite sich verlängert, da der Browser erst die Schriftart lädt, bevor er den Rest des Inhalts aufruft.
Die beste Methode zum Implementieren von Google Webfonts ist über die Einbindung via link:

<link href=”http://fonts.googleapis.com/css?family=Great+Vibes” rel=”stylesheet” type=”text/css” />

Kopieren Sie dazu einfach den Link zur Schriftart in den Header-Bereich (header.php) Ihres WordPress Themes. Je höher Sie diesen platzieren, umso besser für die Ladezeit Ihrer Internetseite. Den Einfluss, den eine Google Webfont auf die Geschwindigkeit Ihrer Website hat, zeigt Google in einer anschaulichen Grafik.

Haben Sie den Link erfolgreich in den Header Bereich eingefügt, dann müssen Sie im nächsten Schritt die Schriftart in die CSS Datei Ihrer Website einbinden. Wollen Sie beispielsweise die Überschrift h1 in einer anderen Schriftart darstellen lassen, dann benutzen Sie den CSS Code:

h1 {
font-family: ‘Great Vibes’, arial, serif;
}

Hinter der gewünschten Webfont können Sie alternative Schriftarten angeben, die immer dann angezeigt werden, wenn die Hauptschriftart aus irgendeinem Grund nicht dargestellt werden kann.

Eigene Schriftarten mit CSS3 einbinden

Wenn Sie eine Schriftwart einbinden wollen, die allerdings nicht in den Google Webfonts enthalten ist, dann müssen Sie die Schriftwart bei sich auf dem Server installieren. Wie das genau geht, möchten wir Ihnen anhand folgendem Beispiel zeigen:

Angenommen, sie möchten den Font ‘Banana Split’ für die Überschriften auf Ihrer Website einbinden. Dann müssen Sie diesen zunächst auf den Server laden, dort wo Ihre ganzen Dateien (Theme, Seiten, Plugins, PHP, CSS etc.) für Ihre Webseite gespeichert sind. Um auf die Schriftart zugreifen zu können, benutzen Sie den CSS Code @font-face. Achten Sie darauf, den richtigen Datei-Pfad anzugeben:

Font-Family der Schriftart festlegen

@font-face {
font-family: Bananasplit; //Wählen Sie hier den Namen Ihrer Schriftart
src: url(‘../schriftarten/bananasplit.otf‘); //Passen Sie den Pfad Ihrer Schriftart an
}
h1 {
font-family: ‘Bananasplit, Arial;
}

Einfach die Zeilen in das eigene Stylesheet (CSS Datei) übernehmen, anpassen, die Schriftarten in einem Ordner ablegen und schon kann der Font verwendet werden.

Achten Sie auf das richtige Dateiformat

Je nach Dateiformat der Schriftarten kann es bei älteren Browsern zu Problemen kommen. Während in den neueren Browser Versionen (Firefox, Opera, Safari und Chrome) Schriften im Format WOFF und TTF angezeigt werden können, führt dies vor allem bei bei älteren Internet Explorer Versionen zu Komplikationen. Hier ist es ratsam die Schriftarten als EOT Datei abzuspeichern, welches von Internet Explorer 4 aufwärts unterstützt wird.

Bevor Sie Schriftarten aus dem Internet verwenden, sollten Sie deren Lizenzbestimmungen überprüfen. Während nämlich die Google Webfonts frei verfügbar sind, verbieten einige Schriftarten die Verwendung bzw. Einbindung Ihrer Schriftarten auf Webseiten.

0

Über den Autor:

Ich bin leidenschaftlicher Suchmaschinenoptimierer und Online Marketer. Mich begeistert vor allem einfach die Möglichkeit, Webseiten nach meinen Wünschen & Vorstellungen zu designen, mit Inhalten und Gedankengut zu befüllen und diese dann mit anderen Internetnutzern zu teilen.