Anmelden

Zuletzt kommentiert

 
12
Jul '10
Autor: Jens Reichelt
Themen:
Kommentare: 0

Einbindung der Google Font API

Das Problem ist bekannt: Will man nicht auf Bilder oder umständliche Flash-Lösungen zurückgreifen (und wer will das schon), ist man in der typografischen Gestaltung einer Webapplikation auf wenige Systemschriftarten und Ausweichschriften angewiesen. Der Grund ist, dass immer nur Schriftarten dargestellt werden können, die der Nutzer einer Internetseite auch auf seinem System installiert hat.

Das Ergebnis ist ein Schrift-Einerlei mit einer Hand voll Schrifttypen, bei denen eine gleichmäßige, systemunabhängige Darstellung der Webapplikationen keinesfalls gewährleistet ist. Könnte man bei Fließtexten darüber noch wohlwollend hinwegsehen, wünscht man sich als Webdesigner gerade bei der Gestaltung von Überschriften mehr Handlungsspielraum beim Einbinden diverser Fonts.

Abhilfe schafft hier die Google Font API. Deren Bibliothek umafasst zur Zeit 18 verschiedene Schriften (plus diverse Schnitte) und soll im Laufe der Monate weiter anwachsen. Der Clou ist dabei die plattformunabhängige Darstellung der Schriften, welche auch alle rechtlich unbedenklich (weil unter OpenSource-Lizenz) sind und damit zur freien Verfügung stehen. Im Klartext heisst das, dass so gut wie Jeder, sogar Nutzer des Internet Explorer ab Version 6 ;) die gleiche Schrift zu sehen bekommt.

Die Einbidung der Fonts gestaltet sich dabei relativ simpel. Für HTML-/ CSS-Neulinge dennoch an dieser Stelle eine kleine Schritt-für-Schritt-Erklärung:

  1. Zuerst einmal sucht man sich die gewünschte Schrift aus der Liste heraus und klickt auf 'Get the Code'
  2. Danach wählt man den Schriftschnitt. Also z.B. 'regular', 'bold' oder 'italic'. Google stellt daraufhin direkt darunter einen Codeschnipsel zur Verfügung. In diesem Beispiel 'Old Standard TT Regular':
    <link href="http://fonts.googleapis.com/css?family=Old+Standard+TT" rel="stylesheet" type="text/css">
  3. Diesen kann man einfach kopieren und dann im <head> Bereich seiner HTML-Datei als externes CSS einfügen.
  4. Nun kann die Schrift bereits im CSS per 'font-family' genutzt werden. Hier für eine Überschrift ersten Grades:
    h1 { font-family: 'Old Standard TT';}
  5. Alternativ zur Einbindung ins HTML kann die API auch per @import direkt am Anfang einer externen CSS-Datei eingefügt werden:
    @import url('http://fonts.googleapis.com/css?family=Old+Standard+TT');
    Die Verwendung im CSS (siehe Punkt 4) bleibt davon unberührt.

Webfonts im Magento Shop einbinden

Möchte man nun eine solche externe Schriftart in ein Magento Template integrieren geht man wie folgt vor:

  1. Folgende Datei bearbeiten app/design/frontend/default/modern/template/page/html/head.html
    In diesem Beispiel beziehe ich mich auf das "Modern"-Template. Falls ihr ein anderes Template nutzt, müsst ihr den Templatepfad entsprechend anpassen. Sollte diese Datei oder Ordner wie page und html dort noch nicht existieren, dann erstellt diese und kopiert die Datei /app/design/frontend/base/default/template/page/html/head.html in euer Template.
  2. Nun kann man einfach den CSS-Verweis, wie oben beschrieben eintragen:
     ... <link type="image/x-icon" href="%3C?php%20echo%20$this-%3EgetSkinUrl%28%27favicon.ico%27%29%20?%3E" rel="icon"> <link type="image/x-icon" href="%3C?php%20echo%20$this-%3EgetSkinUrl%28%27favicon.ico%27%29%20?%3E" rel="shortcut icon"> <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Old+Standard+TT"> <script type="text/javascript">
    
...
  3. Abschließend noch den Cache leeren und die Schriftart kann mittels CSS verwendet werden.