Wie soll man denn nun system-fremde Schriften auf seine eigenen Webseiten bekommen? Ist es wirklich nicht möglich, die tausendfach durchgekauten Standartschriften wie Arial, Verdana und Corier New durch neue, frische Typografien zu ersetzen? Müssen Schriften immer auf dem Rechner des Betrachters liegen oder sogar schon installiert sein?

Nun, bevor ich euch hierzu noch eine oder zwei Dinge erzähle, kommen wir zunächst mal zu den Möglichkeiten, die sich da so anbieten würden:

1. Font-Face
   
2. Bilder
   
3. Webfonts
   
4. Javascript
   
5. Flash

1. Font-Face

Mittels @font-face werden die Webschriften im Head des CSS Dokuments festgelegt und können anschließend im HTML Bereich beliebig oft aufgerufen werden.

Hier ein Code, welcher mit allen gängigen Browsern (Safari, Firefox, Chrome, Opera, Neuer Internet Explorer) funktionieren sollte:

CSS:

Code:

<style type="text/css">

@font-face {
  font-family: SCHRIFTNAME;
  src: url('SCHRIFTNAME.eot') format('eot'),
  url('SCHRIFTNAME.woff') format('woff'),
  url('SCHRIFTNAME.ttf' ODER 'SCHRIFTNAME.odt') format('truetype'),
  url('SCHRIFTNAME.svg#svgfontname') format('svg');
  font-size: 20px;
}

</style>

Schriftname: Der Schriftname kann selbst definiert und anschließend im CSS Dokument benutzt werden.

Wichtiges zum Pfad: Liegt die Datei 'Schriftname.odt' im gleichem Ordner wie eure CSS Datei, so braucht ihr an dieser Stelle lediglich 'Schriftname.odt' angeben.

Ansonsten muss 'Pfad/Schriftname.odt' bei jeder URL angeben werden! [zum Beispiel src: url("PFAD/SCHRIFTNAME.ODT") format("truetype") ;]

Bitte beachtet, dass die Schrift unbedingt auch auf euren Webspace geladen werden muss.

HTML:

Code:

<p style="font-family:SCHRIFTNAME">Gewünschter Text.</p>


Super, das war ganz einfach und hat funktioniert. ABER Achtung, viele Schriften sind rechtlich geschützt. Das bedeutet, ich darf sie nicht verbreiten, was ich hier jedoch tun würde. Also informiert euch lieber doppelt, bevor ihr diese Variante verwendet.

Was zudem hinzukommt ist die Kompatibilität mit den verschiedenen Browsern, denn besonders alte Browser können mit dieser Methode wenig bis nichts anfangen.


2. Bilder

In diesem Fall wird die Schrift nicht verbreitet, sondern lediglich ein Bild der Schrift. Rechtlich ist das in den meisten Fällen tatsächlich erlaubt, doch es entsteht gleichzeitig ein riesengroßer Nachteil: Die Suchmaschinen können eure Texte nicht mehr finden und die Webseite wird vermutlich unglaublich lange zum Laden brauchen.

3. Webfonts

So werden Kollektionen von online einbindbaren Schriften in Internet genannt, welche mittels HTML mit der Webseite verknüpft werden. Auf diese Weise sieht jeder Benutzer die gleiche Typografie.

Google bietet diese Webfonts kostenlos an, und hat bereits eine nette kleine Kollektion an Schriften.

Der Code selbst ist einfach und simpel:

HTML:

Code:

<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>

CSS:

Code:

h1 { font-family: 'Special Elite', arial, serif; }

Mehr dazu hier: http://www.google.com/webfonts


4. Javascript

Bei dieser Methode werden Schriftarten erst gerendert und dann dargestellt.

Mehr dazu hier: http://blog.netthinks.com/cufon-schrifteinbindung-fuer-alle-browser/

5. Flash

Diese Variante ist nicht gerade empfehlenswert, denn hat jemand Flash überhaupt nicht installiert funktioniert es nicht.



So, ich hoffe hiermit konnte ich euch einen einigermaßen übersichtlichen Überblick über die verschiedenen Möglichkeiten gewähren. Viel Spaß damit.

Danke für den tollen Beitrag, habe ihn gelesen und gleich bei meiner Webseite ausprobiert. Nach sowas habe ich schon gesucht, sehr interessant und wirklich gut beschrieben!