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 {
font-family: 'AirstreamRegular';
src: url('Airstream-webfont.eot');
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 Spass beim Probieren!

Didi

UPDATE!

Web Acappella V4.x unterstützt Google Webfonts. Am Anfang sind nur wenige Fonts in der Schriftenauswahl enthalten. Nach einigem Herumforschen in den tiefsten Tiefen vom Programm ist mir im Programm-Paket eine Liste aufgefallen, in der hunderte Google Webfonts aufgelistet sind, im Programm sind diese jedoch nicht zu finden. Da auf der Internetseite der Entwickler ebenfalls eine grosse Anzahl von Webfonts angepriesen werden, hab ich nochmals in der Online-Anleitung des Programms nachgelesen und die Vorgehensweise gefunden, wie man mehr Webfonts installieren und nutzen kann.

Dieses ist recht einfach:
Schritt 1
Geht auf die Google Seite mit den Webfonts.... und sucht euch eine geeignete Schrift aus. Nun klickt ihr auf den Button "Add to Collection", wollt ihr mehrere Schriften nutzen, dann wählt ihr so im Vorfeld die gewünschten Schriften.

Schritt 2
Nach der Auswahl scrollt ihr die Webseite nach oben und findet oben rechts die Option zum Download "Download your Collection".

Schritt 3
Nach dem Download der Schriftdateien, installiert ihr diese auf eurem System.

Schritt 4
Nach dem Start von Web Acappella könnt ihr nun die Schrift im Schriftmenü auswählen und nutzen. Die Webschriften stehen in der Auswahl an der obersten Position und sind durch das gelbe Symbol gekennzeichnet.

Hinweis:
Bitte immer die Lizenzbestimmungen des jeweiligen Schrifttyps beachten

Viel Spass beim ausprobieren!

Hier... findet ihr eine aktualisierte Anleitung zu Google Webfonts und WebAcappella

Also bei mir wird im Firefox alles richtig angezeigt. Ist das vielleicht bei Win-Usern?

Sicherlich kannst du auch die font-face Geschichte nutzen, du musst dir nur das passende Fontface-Kit erstellen lassen, bzw. downloaden.

Ach übrigens, schicke Seite.

Lese dir die Anleitung bitte genau durch und gehe sie Schritt für Schritt durch, damit es am Ende auch funktioniert.
Es gibt zwar auch noch einen anderen Weg, den muss ich aber erst einmal für mich selber umsetzen.

Ich habe mir die Geschichte nochmals angeschaut und herausgefunden, dass die Webschrift von Google nur den Dateityp "WOFF" zur Verfügung stellt. Dieser wird wohl von neueren Browsern unterstützt (auch iOS Geräte), doch ältere Browser verwenden andere Formate, siehe hier.... . Das ist auch mein Wissensstand, also nicht wirklich etwas neues, jedoch sollte man berücksichtigen, dass es immer noch User gibt, welche mit uralten Browsern unterwegs sind.
Also denke ich, ist die @font-face Variante zur Zeit noch die sicherste Lösung .

Wenn dir die Suchmaschinen-Leserlichkeit völlig egal ist, dann kannst du diese Option wählen.

Sonst musst du dich schon ein bisschen mit der Materie beschäftigen.

Gruss

Didi

Ja ich weiss, das ist etwas kompliziert, geht aber!

Die Font-Stärke kannst du nur absatzweise einstellen. Das heisst, im Textfeld einen kompletten Textabsatz markieren, dann erscheint auch ein Auswahlfeld für die Stärke. Hast du keinen Absatz, dann erzeug provisorisch einen. Das ist unter anderem ein Punkt, wo Intuisphere nachbessern muss.

Ja, lies hier nochmal nach http://blog.schoenwandt.info/?page_id=679
Dann denke ich wirst du es verstehen!