GRUNDLAGEN:

Lange Zeit galt der Grundsatz – “Websicher Schriften nutzen, dann werden die Seiten auf allen Systemen FAST gleich angezeigt!” Mit CSS3 und HTML5 können viele Dinge gestaltet werden, doch nur Wenigen ist der “@font-face” Befehl ein Begriff, der bereits seit CSS2.1 existiert.

Also, was verbirgt sich hinter dem “@font-face” Befehl?
Ganz einfach, über den Befehl wird in einer CSS Datei oder im HTML-Code ein Schrifttyp definiert und über Font-Dateien aus dem Netz geladen. Abhängig von der Plattform, benötigt man einen bestimmten Typ von Datei, wobei iOS Geräte zum Beispiel SVG-Dateien benötigen um die Schrift richtig darzustellen. Es gibt im Netz viele schöne und viele freie Schriften, mit denen man seine Seite optisch aufwerten kann.

Wichtig wie bei allem was man verwendet, Lizenzbestimmungen beachten.

Doch wie bekomme ich nun die benötigten Dateien?
Bisher sind mir zwei Seiten bekannt, auf denen man die Dateien laden kann. Die für mich beste Lösung ist diese Seite: http://www.fontsquirrel.com. Hier findet man sogenannte Font-Kits, welche alle benötigten Dateien beinhalten, um die Schrift Plattform unabhängig zu nutzen (ist mit fast alle Browsern kompatibel). Auf dieser Seite können sogar durch Hochladen einer eigenen Schrift Font-Kits generiert und heruntergeladen werden. Die zweite Variante findet man unter http://www.google.com/webfonts/ . Auf der Google-Seite kann man sich online die Schrift(en) auswählen und diese dann ganz einfach mit Hilfe des generierten Codes in der Seite integrieren.

Beispiel:
<link href=’http://fonts.googleapis.com/css?family=Megrim‘ rel=’stylesheet‘ type=’text/css‘>

Die oben gezeigte Codezeile fügt man im Head-Bereich der Seite ein. Über diese Codezeile werden die Schriftdateien geladen. Die Schriftzuweisung definiert man entweder in einer CSS Datei oder in den Stylevorgaben eines einzelnen Elements.

font-family: ‚Megrim‘, cursive;

Genau diese Technik verwendet Web Acappella um eine Seite mit Webschriften auszustatten. Nur bietet das Programm entgegen dem Angebot leider nur eine geringe Auswahl an Schriften zur Verwendung in diesem.

Bei der Google-Version habe ich nur die Möglichkeit, die Schriften von Google-Seiten zu laden. Bei der Fontsquirrel-Version erhalte ich hingegen die benötigten Dateien im Font-Kit inklusive der CSS-Datei, die ich dann nur noch im HTML- Code integrieren muss. Dass heisst, CSS Datei im Head-Bereich der HTML- Seite einbinden.

Code-Beispiel:
<link rel=“stylesheet“ href=“style.css“ type=“text/css“ media=“screen“ charset=“utf-8″>

Der Code in der CSS Datei zum Laden der Schriftdatei(en) sieht wie folgt aus:

@font-face {&#8232;font-family: ‚AirstreamRegular‘;&#8232;src: url(‚Airstream-webfont.eot‘);&#8232;src: url(‚Airstream-webfont.eot?#iefix‘) format(‚embedded-opentype‘),url(‚Airstream-webfont.woff‘) format(‚woff‘), url(‚Airstream-webfont.ttf‘) format(‚truetype‘), url(‚Airstream-webfont.svg#AirstreamRegular‘) format(’svg‘); font-weight: normal; font-style: normal; }

Das waren die Grundlagen des @font-face-Befehls. Im Nächsten Schritt erkläre ich die Einbindung der Schrift mit Web Acappella.

Einbinden der Schriftart:

Schritt 1 – Vorbereitungen

Damit ich die Schrift nutzen kann, gehe ich auf die Seite

http://www.fontsquirrel.com

und lade mir das benötigte Paket herunter. In dem Paket befinden sich neben den Font-Dateien die Lizenzbestimmung, eine Demo HTML-Datei, sowie eine CSS-Datei mit dem Code zum Einbinden in die Seite. Damit ich mein Paket zur weiteren Verwendung anpassen kann, installiere ich mir als erstes die Schrift-Datei mit der Endung „.ttf“ in meinem System. Diese ist notwendig, damit ich die Schriftart auch in Web Acappella verwenden kann und ich beim Erstellen der Seite im Programm die Ansicht habe, welche meine Besucher später genießen können.

Schritt 2 – Benötigte Software

Zum Erstellen der Seite natürlich Web Acappella und zum Anpassen der CSS-Datei, einen HTML-Editor wie Fraise, Text-Wrangler oder auch TextEdit unter Mac OS X.

Schritt 3 – Anpassen des Pakets

Damit die Schrift später nach dem Veröffentlichen auch richtig angezeigt wird, muss die Bezeichnung der Font-Family ermittelt und in der mitgelieferten CSS-Datei angepasst werden. Hierzu bedienen wir uns einem einfachen Trick. Wir erstellen eine einfache, leere Seite und fügen einen einfachen Text hinzu.

Beispiel-Text: „Schriftermittlung“

Diesen Text erstellen wir mit der vorher installierten Schrift. Nun muss diese Seite veröffentlicht werden, dieses geschieht am besten lokal auf der Festplatte. Nach der Veröffentlichung schaue ich in der HTML-Code der Seite und suche nach dem Beispiel-Text, um mir die genaue Bezeichnung der Font-Family, welche von Web Acappella bzw. vom System definiert wurde, anzuschauen und in der CSS-Datei anzupassen. Bei meinem Beispiel, erstellte Web

Acappella folgenden HTML-Code:

<div align=“center“><span style=“font-family:Kingthings Italique,KingthingsItalique;font-size:28px;font-weight:normal;color:#000000;“ >Schriftermittlung</span></div>

Wichtig für die Anpassung ist dieser Teil:
style=“font-family:Kingthings Italique,

Die Bezeichnung hinter „style=“font-family:“ ist meine Definierung des Schrifttyps in der CSS-Datei, also „Kingthings Italique“. Dieser Schritt ist notwendig, da die im System installierte Schrift letztendlich eine andere Definition erhält als in der CSS-Datei angegeben ist. Betrachten wir uns nun den Code der mitgelieferten CSS-Datei und passen diese auf unsere Gegebenheiten an. Der mitgelieferte Code der CSS-Datei bei meinem Beispiel lautet:

@font-face {font-family: ‚KingthingsItaliqueRegular‘; src: url(‚Kingthings_Italique-webfont.eot‘); src: url(‚Kingthings_Italique-webfont.eot?#iefix‘) format(‚embedded-opentype‘), url(‚Kingthings_Italique-webfont.woff‘) format(‚woff‘), url(‚Kingthings_Italique-webfont.ttf‘) format(‚truetype‘), url(‚Kingthings_Italique-webfont.svg#KingthingsItaliqueRegular‘) format(’svg‘); font-weight: normal; font-style: normal;}

Also lautet die Definierung aus der CSS-Datei font-family: ‚KingthingsItaliqueRegular‘; Hier sehen wir direkt den Unterschied. Wir ändern einfach die Definition ‚KingthingsItaliqueRegular‘ in die System- / Programmvorgaben ‚Kingthings Italique‘ und speichern die geänderte CSS-Datei als „font.css“ in unseren Schriftordner ab. Die Dateien, welche für meine Einbindung in die Seite wichtig sind, sind die Schrift-Dateien, und unsere angepasste CSS-Datei „font.css“.

Diese Dateien packe ich nun in ein Verzeichnis auf meinem Server.

Beispiel: „http://www.meinserver.de/Fontordner/„,

um diese später in die Seite einzubinden.

Schritt 4 – Einbindung in meine Seite

Damit der Browser die verwendeten Schrifttypen auch verarbeiten kann, müssen wir im Head-Bereich der Seite nun die CSS-Datei und damit auch den Schrifttypen definieren. Diese geschieht über die Codezeile
Beispiel:

<link rel=“stylesheet“ href=“http://www.meinserver.de/Fontordner/font.css“ type=“text/css“ media=“screen“ charset=“utf-8″>

Wobei hier der Link zur CSS-Datei angepasst werden muss. Für Nutzer der Kaufversion, sollte die Code-Zeile unter „Menü – Seiten/Vorlage“ dann „Eigenschaften dieser Seite“ und dann „Fortgeschritten“ (Zahnrad mit Pluszeichen) einzutragen sein, damit die Schrift funktioniert. Da ich nur die Frei Version nutze, kann ich dieses nicht bestätigen, ich denke aber es sollte klappen.
Für alle anderen User, ist die Zeile über den HTML-Editor einzufügen!
Nach dem Veröffentlichen (egal welcher Art), sollte die Schrift im Browser richtig angezeigt werden. Wenn nicht, dann liegt irgendwo ein Fehler in der Verlinkung vor. Also genau kontrollieren und erst dann Fragen. Wichtig bei Problemen, immer einen Link zur Seite mitteilen, damit wir schauen können!

Und nun, viel Spaß beim Probieren!

Didi

Be the first to comment.

Leave a Reply