Früher gab es oft Probleme mit der Browserkompatibilität beim Einbinden externer Schriftarten. Oft funktionierte dies nur mit erheblichem Aufwand und wenigen Browsern.

Mittlerweile sind die Lösungen jedoch sehr ausgereift, so dass nun jeder Webmaster ohne Probleme beliebige nicht-System-Schriftarten verwenden kann.

Update: Dieser überarbeitete Bericht enthält nun auch Informationen über die korrekte Anzeige auf iPad oder iPhone.

Im Folgenden möchte ich kurz die einfachste Vorgehensweise beschreiben.

Ausgangspunkt ist die Schriftart in einem der folgenden Formate:

• TrueType (.ttf) – Schriftart für Windows-PCs
• EOT (.eot) – Schriftart für Internet Explorer
• SVG (.svg) – Schriftart für iPhone / iPad
• WOFF (.woff) – Spezielle Web-only Schriftart (unterstützt u.a. von Firefox)

Um die Kompatibilität für die gängigsten Browser (IE, Firefox, Chrome, Safari) sicherzustellen, werden alle diese Schriftformate benötigt. Liegt die Schrift nur in einem dieser Formate (oder im OTF-Format) vor, so muss sie zuerst in konvertiert werden. Dies geht sehr einfach mit http://www.fontsquirrel.com/fontface/generator.

Der Generator liefert auch gleich eine passend konfigurierte CSS-Datei mit.

Nun müssen lediglich noch alle Schrift-Dateien in den CSS-Ordner auf dem Server hochgeladen werden und per CSS in die Seite eingebunden. Dies geschieht folgendermaßen:

@font-face {
	font-family: 'BEEZO_FONT';
	src: url('css/[Dateiname].eot');
	src: local('☺'), url('css/[Dateiname].woff') format('woff'), url('css/[Dateiname].ttf') format('truetype'), url('css/[Dateiname].svg#webfont1eYVxKc8') format('svg');
}

Die Schrift kann nun in jeder CSS-Klasse beliebig eingesetzt werden.

div {
	font-family: BEEZO_FONT;
}

Diese Anleitung funktioniert für die Anzeige von eigenen Schriftarten auf den gängigen Browsern, auch auf iPhone und iPad. Ich hoffe, diese Lösungen hilft vielen, die anfangs skeptisch waren, weiter.

Wenn dieser Artikel für Sie hilfreich war, würde ich mich über eine Verlinkung oder einen Kommentar sehr freuen.

Quelle: http://www.fontsquirrel.com/fontface/generator

Als Ihr Partner für individuelle Internetlösungen bieten wir Ihnen selbstverständlich dieses Feature zur Anpassung Ihrer Website an die Corporate Identity an. Sprechen Sie uns einfach an – wir helfen Ihnen gerne!

BEEZO_FONT