Eigene Schriften auf der webSite? - Guru 2.0
Eigene Schriften auf der webSite?

Eigene Schriften auf der webSite?

Bis jetzt haben wir als webDesigner ja immer nur mit den Standardschriften arbeiten können. Das heißt alle Schriften, welche auf dem Anwendercomputer installiert sind können wir verwenden. Aber da wir ja alle Systeme von den verschiedenen Windows und Office Versionen über Mac OS X bis zu Linux alles berücksichtigen müssen, war die Auswahl sehr klein. Eine Times, eine Helvetica und schon ist es eigentlich vorbei mit der Typographie.

Natürlich gab es schon mal in CSS 2 die Möglichkeit Schriften einzubinden, aber diese wurde, laut W3C [EN], wegen mangelnder Unterstützung in CSS 2.1 wieder aufgegeben. Jetzt ist sie in CSS 3 wieder eingebaut worden. Aber wie klappt das ganze eigentlich? Und wie schaut das mit dem Urheberrecht aus?

Technik

Die Technik an sich ist eigentlich ganz einfach. Du stellst einen Font auf einer URL zur Verfügung und verwendest ihn dann. Dafür gibt es verschiedene Tools wie:

Cascading Style Sheets

Dieser Teil ist eigentlich relativ einfach, aber wird noch nicht von allen Browsern unterstützt. Zuerst musst Du eine Schrift auf Deinen webServer hochladen. Du musst ein wenig mit der Art aufpassen, dass die Schrift auch von jedem System erkannt wird. Sehr gut eigenen sich TrueType-Fonts (*.ttf), da sie eigentlich von jedem Betriebssystem angezeigt werden können. Falls Du ganz sicher gehen willst nimmst Du eine Schrift von SIL oder wandelst mit dem WEFT einen TT-Font um.

Der zweite Schritt besteht im anpassen Deiner css-Datei. Am Anfang fügst Du einen @font-face-Parameter ein.

[css]@font-face {
font-family: Andika;
src: local(AndBasR) url(https://example.com/fonts/AndBasR.ttf);
}[/css]

In der 2. Zeile gibst Du deiner Schrift einen Namen. Diesen kannst Du in der Folge im gesamten css mit dem Attribut font-family verwenden. In der 3. Zeile legst Du fest, woher die Schrift bezogen werden soll. Mit local() kannst Du den Browser anweisen, dass er die lokal installierte Schrift verwenden soll; Natürlich nur wenn sie auch lokal vorhanden ist. Falls dies nicht der Fall ist, kommt der Parameter url() zum Zug. Hier kannst Du eine URL (absolut oder relativ) angeben, von der die Schrift geladen werden soll.

Der dritte Schritt ist dann die Verwendung der Schrift in Deinem css.

[css].entrytitle {
color: #8A8D18;
display: block;
font-family: Andika,"Trebuchet MS",Tahoma,"Lucida Grande",Verdana,Helvetica,Arial,sans-serif;
font-size: 1.6em;
}[/css]

Du siehst in der 4. Zeile wie, die im ersten Beispiel definierte Schrift angewendet wird. In diesem Beispiel habe ich auf darauf Rücksicht genommen, dass noch nicht alle Browser CSS 3 und den @font-face-Eintrag sauber unterstützen. Daher wurden weitere Schriften angegeben. Hier mal eine kleine Auswahl an Browsern und wie sie es unterstützen.

BrowserFirefoxInternet ExplorerOperaSafari
Version233.13.567899.533.14
 neinneinjajaunvollständigunvollständigunvollständigneinjaneinjaja

Lizenz & Recht

Hier mußt Du ein wenig aufpassen. Denn auch jede Schrift unterliegt dem Urheberrecht und Du darfst sie nicht einfach weiterkopieren. Daher lies Dir den Lizenzvertrag der Schrift genau durch. Oft ist es untersagt, dass die Schrift auf webSites eingesetzt wird oder öffentlich zur Verfügung gestellt wird. Und genau das machst Du, wenn Du sie auf einem webServer ablegst. Schau einfach mal bei den freien Schriften nach, da findest Du genug, welche verwendbar sind.

Es wurden 10 Kommentare zu diesem Beitrag geschrieben.

  • foetz

    Mal ne Frage Unterschied zwischen Firefox 3.1 und 3.5?

    Wurde der nicht umbenannt in 3.5 weil so viele Neuerungen gibt?^^

  • Hater

    Nunja finde das eigendlich recht gut das es endlich ne hilfe für dieses Problem gibt. Wird aber meiner Meinung nach nicht lange dauern bis diese Funktion die Überhand nimmt und Leute das ganze mit hässlichen Schriften zerstören. Naja solange es gut lesbare Schriftarten sind unterstütze ich das ganze =D

  • Oliver

    Ich wollte kürzlich einen Handwriting-Font verwenden (für Einträge in einem Gästebuch) – habe das allerdings aufgegeben.
    1. unterstützen das (wie du ja bemerkst) viele Browser nicht. FF z.B. erst ab der neuesten Version 3.5
    2. Der IE unterstützt nur das MS-proprietäre EOT-Format, d.h. man muss die Schrift zuerst mal mit dem WEFT-Tool (gibt es gratis) konvertieren. Alleine damit hatte ich so meine Schwierigkeiten: es gingen nicht alle Fonts, stürzte ab etc.
    3. Aber das Schlimmste: die meisten Schriften werden (zumindest unter Windows) absolut besch… gerendert.
    Ab einer entsprechenden Größe geht es halbwegs. Also eignet sich das Ganze wohl hauptsächlich für Überschriften etc. Da stellt sich allerdings die Frage, ob man das nicht besser mit Bitmaps realisiert.

    Hier noch ein interessanter Artikel dazu:
    http://praegnanz.de/weblog/windows-fontrendering-killt-webfont-fliesstext

  • christian

    Toller Artikel, vielen Dank. Leider hängt der IE bei solchen Dingen wieder hinterher, deswegen muss man es sich schon genau überlegen (hinsichtlich usability) ob man eigene Schriften setzt!

  • Oliver

    Der Ordner WebSites ist ein Standardordner von Mac OS X. Du findest ja bei Schritt 4 die genaue Pfadangabe. Außerdem steht er ja in der Schnellzugriffsleiste bei jedem Dateidialog.

    Zu Schritt 6:
    […]

    gehört diese Antwort eventuell zu einem anderen Posting?

    • Guru 2.0 Autor

      Danke!
      Da hat mir wolle die Hektik und WordPress einen Streich gespielt.
      Aber wer ist schon fehlerfrei? Ich bin froh wenn ich es zu fehlerarm schaffe.

  • Martin Teufel

    Hallo

    Danke für den Tip mit den eigenen Schriften

    beste Grüße
    Martin

  • Nicole

    Vielen Dank für diesen informativen Artikel. Ich werde einmal mit meinem Webdesigner sprechen, ob er da nicht etwas von für meine Homepage umsetzen kann. Danke für Deine Arbeit!

  • Miguel

    Leider können ja viele Schriften nicht angezeigt werden, aber danke für den hilfreichen Artikel.

Blogheim.at Logo
Diese Website verwendet Cookies - nähere Informationen dazu finden Sie in unserer „Datenschutzerklärung“. Klicken Sie auf „Ich stimme zu“, um Cookies zu akzeptieren und unsere Webseite zu besuchen, oder klicken Sie auf „Cookie-Einstellungen“, um Ihre Cookies selbst zu verwalten.