Ihre Ideen und Visionen professionell und kompetent in ihrer Ganzheit verwirklichen.

Die Problematik der Schrifteinbindung in der Darstellung der Browser ist eine schon sehr alte und somit immer mal wieder Thema bei Designern und Entwicklern. Wie kann ich gewährleisten, dass meine Haus-Schrift, die ich im Unternehmen nutze, auch auf meiner Internetseite für Jeden angezeigt wird?

Dazu gab es bereits sehr viele Lösungsansätze über das Einbinden mit Flash oder mittels JavaScript, bis hin zur simplen Einbindung mittels Grafiken, was jedoch die Aktualisierung von Text auch immer das neu Erstellen von Grafiken bedeutete.

Ich zeige heute einen Ansatz, der über das einfache Einbinden von Style-Sheets funktioniert und zu 99% von allen gängigen Browsern unterstützt wird! Ja, der Internet Explorer macht bei dieser Einbindung tatsächlich auch keine Probleme.

Was wird benötigt?

1. Eine Schrift, die verwendet werden soll und mit großer Wahrscheinlichkeit nicht allgemein verfügbar ist.
2. Ein paar Konverter, die unsere Schrift in verschiedene Formate wandeln.
3. Den Trick, wie ich nun die Schrift in meine Seite einbauen kann.

1. Die Schrift
Ich habe mich hier für die Schrift “Bleeding Cowboys” entschieden, um das Beispiel vorzuführen. Man kann Schriften auch zum Beispiel unter http://www.1001freefonts.com/ finden und selbst eine aussuchen. Wir benötigen hier immer zum Anfang das “.ttf” Format.

2. Die Konverter
Da wir sicherstellen wollen, dass unsere Schrift so viele Browser wie möglich interpretieren können, benötigen wir neben dem ttf Format auch eine svg und eot Datei unserer Schrift. Um diese zu erstellen, habe ich mich kurz der Suche bedient und zwei nützliche und kostenlose Online Konverter gefunden:
ttf -> svg: http://www.freefontconverter.com/
ttf -> eot: http://ttf2eot.sebastiankippe.com/

Wenn wir nun die Dateien ttf, svg und eot haben, pefekt, auf zum nächsten Schritt.

3. Einbindung und Darstellung
Der Übersichtlichkeit halber empfehle ich, alle für die jeweilige Schrift notwendigen Dateien in einen separaten Ordner zu packen. Ich habe dies ebenso gemacht unter dem Ordner “cowboys”. Die Dateien haben nun auch Internet taugliche Namen bekommen. Es empfiehlt sich diesen Ordner in das Style-Verzeichnis der Website zu packen, da diese nur ausschliesslich dort verknüpft werden. In meinem Beispiel habe ich diese Struktur wie folgt aufgebaut:

Wie zu sehen ist, befindet sich im Ordner zu den Dateien auch ein Stylesheet. Dieses enthält die notwendigen CSS Anweisungen, um die Dateien als Schrift später zur Verfügung zu stellen.

@font-face {
	font-family: 'cowboys';
	src: local('☺'),
	url('cowboys.eot'),
	url('cowboys.ttf') format('truetype'),
	url('cowboys.svg') format('svg');
}

Mittels “@font-face” und den zugehörigen Sourcen-Angaben kann nun die unter “font-family:” benannte Schrift dann im normalen Stylesheet verwendet werden. Es ist darauf zu achten, dass die Schriften-CSS unbedingt vor Einbindung der normalen Styles eingebunden wird. Nur, wenn die Schrift vorher Bekannt ist, kann sie auch für Klassen oder Elemente verwendet werden.

Aufruf der Stylesheets in der darstellenden Seite im Head-Bereich:

<!-- include ttf Font (must included BEFORE Style loding)-->
<link rel="stylesheet" media="all" href="cowboys/cowboys.css" />

<!-- Default Stylesheet for your Site -->
<link rel="stylesheet" media="all" href="styles.css" />

Wenn das erledigt ist, kann nun ein Beispiel mit einer Klasse und der neuen Schrift im Stylesheet definiert werden und diese ohne Probleme in der Seite verwendet werden. Mein Beispiel enthält eine Klasse mit Namen “cowboys”.

Eintrag im Stylesheet:

.cowboys{
	font-family: cowboys;
}

Im Beispiel habe ich nun eine Klasse mit der neuen Schrift und eine Überschrift, die diese verwendet.

Eintrag in der darstellenden Seite:

<h1 class="cowboys">Hello World</h1>

Das Ergebnis kann man eindrucksvoll auf der Beispielseite sehen und gern auch mit anderen Browsern prüfen. Der Vorteil liegt auf der Hand. Da wir weder Flash, noch JavaScript benutzt wird, bleibt der Code lesbar, die Darstellung frei von Hacks und die Seite kompatibel.

Das ganze Beispiel kann man downloaden unter diesem Link.