Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Zu einem individuellem Layout gehört in den meisten Fällen auch eine individuelle Schriftart. Doch was tun, wenn diese allzu exotisch ist und es keine Hoffnung gibt, das sie jemals flächendeckend als Systemschrift installiert ist? Die CSS-Eigenschaft @font-face hilft hier weiter.

Bereits seit CSS2 gehört @font-face zum Standard. Aufgrund mangelnder Unterstützung seitens der Browser-Entwickler, mit Ausnahme des Microsoftschen Browsers, wurde die Eigenschaft in Version 2.1 jedoch wieder aus dem Standard herausgenommen. Umso mehr erfreut es mich jetzt natürlich, das ein breites Umdenken statt gefunden hat und @font-face in CSS3 ein Comeback feiert.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

So gut wie alle modernen Browser unterstützen die Eigenschaft:

  • Internet Explorer (getestet mit 7 und 8)
  • Chrome (getestet mit 8)
  • Firefox (getestet mit 3.5, 3.6 und 4.0b)
  • Opera (getestet mit 11.0)
  • Safari (getestet mit 5.0)

Demo anzeigen

Und in der Praxis?

Das Einbinden einer Schrift ist denkbar einfach. Über die Deklaration


/* Beispielhafte Einbindung der Schriftart Electronic Highway Sign */
@font-face {
  font-family:"Electronic Highway";
  src:url(../pfad/zur/schriftdatei/electronic.ttf) format("truetype");
  font-weight:normal;
  font-style:normal
}

wird die Schriftart definiert. Mit der Angabe font-family wird der Name festgelegt, mit src:url(...) der Pfad zur Datei angegeben. Beides sind Pflichtangaben und müssen gesetzt werden. Die Angaben zum Schriftgewicht und -stil sind optional. Als Formate können Schriftdateien in Truetype oder Opentype definiert werden.

Schlussendlich weist man die neu definierte Schrift nur noch auf dem gewohnten Weg per Selektor zu, z.B.:


h1, h2, h3, h4, h5, h6 { font-family:"Electronic Highway" }

Browsereigenheiten

Der Internet Explorer nutzt ein eigenes Dateiformat mit der Endung .eot. Diese Eigensinnigkeit ist ja nichts neues. Zum Glück gibt es freie Konvertierungstools. Eines davon ist der web-basierte Dienst von kirsle.net, der ein Umwandeln ohne Software ermöglicht. Microsoft selber stellt mit dem Web Embedding Fonts Tool (WEFT) eine Software zum kostenlosen Konvertieren in .eot bereit.

Durch eine Browserweiche, z.B. mittels Conditional Comments, muss die Schrift für den IE gesondert angegeben werden:


<!--[if IE]><link rel="stylesheet" type="text/css" href="pfad/zu/css/iehacks.css" /><![endif]-->

@font-face {
  font-family:"Electronic Highway";
  src:url(../pfad/zur/schriftdatei/electronic.eot);
  font-weight:normal;
  font-style:normal
}

Ob der IE 9 neben .eot auch .ttf oder .otf unterstützt, kann ich zurzeit nicht sagen.

Was mich ein wenig überraschte, war der Firefox, der sich als ziemlich stur heraus stelle. So gibt es die Beschränkung, dass die Schriftdatei von der gleichen Domain geladen werden muss. Begründet wird dieser Umstand, das TrueType oder OpenType keine fest definierten MIME-Types haben.

Die Gecko-Browser verweigern ebenfalls die Anzeige bei korrupten Schriftdateien mit einer invaliden CMAP-Tabelle. Bei einem Test, in dem ich mehrere Schriftarten von dafont.com ausprobierte, gab es relativ viele davon. Wie man das überprüfen kann, kann ich nicht sagen. Hier hilft anscheinend nur das Prinzip „trial and error“.

Update: Ein komplettes Konvertierungstool für alle Formate stellt Font Squirrel mit dem @font-face Generator kostenfrei zur Verfügung. Dort findet ihr auch eine recht stattliche Anzahl an frei verfügbaren Schriften.
Vielen Dank an Dieter M. für den Tipp!

Geschrieben von Daniel Erlinger (Gastautor)

thumb

Daniel Erlinger ist seit 2006 selbstständiger Webdesigner und Frontend-Entwickler in Dresden und Bautzen. In seinem Blog schreibt er über die Themen Webdesign, Contao, Shopsysteme, Kreatives, Neues und alles, was sonst noch dazu passt.

Feedback & Ergänzungen – 6 Kommentare

  1. Daniel
    schrieb am 16.02.2011 um 23:18 Uhr:

    @ Matthias:
    hmm… Ein Ansatz wäre, die Definition der Schrift aus der CSS-Datei raus zu nehmen und direkt in die Seite in einen style einzubetten. Dort könntest du dann z.B. mit Base64 kodieren. Das ist zwar keine 100%-ige Lösung, aber es erschwert den Zugriff auf die Schrift schon ein wenig.

    Vielleicht hilft dir folgender (schon etwas älterer) Artikel von Dr. Web für den Einstieg:
    http://www.drweb.de/magazin/codieren-und-verschlusseln-mit-javascript/

    @ koni:
    Danke für den Link! Hehe, der Junge ist nicht auf den Mund gefallen… :)

    Antworten
  2. Matthias
    schrieb am 16.02.2011 um 08:19 Uhr:

    Ein schöner Artikel!

    Ich habe aber doch noch eine Frage: Für mich wäre es ein ziemliches Sicherheitsrisiko, wenn ich den Pfad zur Font einfach aus der CSS auslesen kann – für den Fall dass ich eine kostenpflichtige Schriftart nutze.

    Gibt es dafür schon Lösungen?

    Antworten
  3. konishkichen
    schrieb am 16.02.2011 um 07:49 Uhr:

    Hallo,

    hier der Link: http://www.getoutofmyinternet.com/2011/02/webkit-und-die-font-face-krizzle-shizzle-und-eine-losung-die-keine-sein-kann/
    Das hat was mit dem Anti-Aliasing zu tun, selbst ausprobiert habe ich den Hack aber noch nicht.

    Liebe Grüße,
    koni

    Antworten
  4. Dieter M.
    schrieb am 15.02.2011 um 17:29 Uhr:

    Ein Konvertierungstool in alle Formate.
    Erstellt ein komplettes Package inkl. Beispiel-HTML-Seite:
    http://www.fontsquirrel.com/fontface/generator

    Antworten
  5. konishkichen
    schrieb am 15.02.2011 um 13:00 Uhr:

    Hallo,

    ich liebe @font-face und nutze es selbst mit Freuden auf meiner Website. Das einzige Problem ist gerne mal das falsche Rendering der Fonts, aber auch da haben findige Entwickler schon einen Hack gefunden.

    Liebe Grüße,
    koni

    Antworten
  6. Daniel
    schrieb am 11.02.2011 um 18:23 Uhr:

    @ koni:
    Direkt auf falsche Renderings bin ich bis jetzt noch nicht gestossen. Viele Schriften sehen aber „unschön“ aus, weil das Anti-Aliasing fehlt, wobei das auch wieder Browserabhängig ist. Hast du denn Links zu den Hacks?

    @ Dieter:
    Danke für den Tipp! Den Generator kannte ich noch nicht. Und schon ist er in meinen Lesezeichen :)

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →