Oftmals hören wir von Kunden, dass die Einbettung einer eigenen Schriftart (Font) per CSS nicht richtig funktioniert. Meist ist die neue Schriftart (Font) im Internet Explorer sichtbar. Auf dem iPad, iPhone, Safari eher nicht. Je nach Browserversion, variiert die Funktion von @font-face. Wir möchten hier eine Methode aufzeigen, wie es mit allen Browsern funktioniert.
Die Anleitung richtet sich an "CSS-Anfänger" und ist deshalb so einfach wie möglich beschrieben.
Schritt: 1 Besuchen Sie http://www.fontsquirrel.com/tools/webfont-generator und laden dort Ihre gewünschte Schriftart (Font) hoch. Der Webfont-Generator macht Ihre Schrift für das Web startklar und generiert daraus mehrere Schriftformate, die für die Darstellung im Web benötigt werden. Bitte achten Sie auf die Lizenz der Schrift, ob Sie die Schrift für das Vorhaben nutzen dürfen.
Schritt: 2 Nach erfolgreichem Upload Ihrer Schirftart erscheint ein blauer Download-Button "DOWNLOAD YOUR KIT." Klicken Sie drauf und entpacken Sie nach dem Download das "KIT."
Schritt 3: Öffnen Sie den Ordner. Sie werden darin einige Dateien vorfinden, u.a. die Datei stylesheet.css. Öffnen Sie diese Datei und kopieren Sie den foglenden Inhalt in Ihre eigene CSS-Datei. Am besten an den Anfang Ihrer CSS-Datei:
@font-face { font-family: 'NamederSchriftart'; src:url('usermod/css/font/NamederSchriftart.eot'); src: url('usermod/css/font/NamederSchriftart.eot?#iefix') format('embedded-opentype'), url('usermod/css/font/NamederSchriftart.woff') format('woff'), url('usermod/css/font/NamederSchriftart.ttf') format('truetype'), url('usermod/css/font/NamederSchriftart.svg#NamederSchriftart') format('svg'); font-weight:bold; font-style: normal; }
Jetzt steht die Schriftart zu Verfügung und kann für alle Elemente wie Überschriften (H1 - H6), Absätze (p) etc. genutzt werden.
Schritt 4: Die verschiedenen Formate der Schriftart (Font), eot, woff, ttf, svg kopieren Sie in ein entsprechendes Verzeichnis in Ihrem Template. Wir haben es hier im Gambio-GX2-Template implementiert und deshalb folgendes Verzeichnis dafür verwendet: usermod/css/font/.
Schritt 5: Sie können z.B. nun die Überschrift "H2" oder Absätze "p" in Ihrer CSS-Datei mit der neuen Schriftart (Font) formatieren. Dies sieht dann so aus:
h2 { font-family: 'NamederSchriftart', Verdana, Geneva, sans-serif; font-size: 16px; text-transform: uppercase; }
...
p { font-family: 'NamederSchriftart', Verdana, Geneva, sans-serif; font-size: 16px; }
Die Schriftart hinter 'NamederSchriftart' wird dann ausgewählt, wenn 'NamederSchriftart' nicht zur Verfügung steht. Somit ist sichergestellt, dass Ihre Überschrift auch angezeigt wird, wenn 'NamederSchriftart' nicht zur Verfügung steht.
Schritt 6: Jetzt auf den gewünschten Browsern und Tablets und Smartphones wie iPad, iPhone, Safari, etc. testen.
Bugfixing: Sollten Sie die neue Schrift nicht sehen, prüfen Sie nochmals das Verzeichnis und die Schreibweise der Schriftart.
Alternative: Vor ca. 2 Jahren haben wir bereits über die Google Fonts API berichtet. www.tempteria.de/blog/fonts-mit-google-api/ Mittlerweile stehen sehr viel mehr Schriften zur Auswahl, die zudem einfach zu installieren sind. developers.google.com/fonts/?hl=de-DE&csw=1
Viel Spaß mit der neuen Schriftart!
