kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

CSS: @font-face im Praxistest

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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!

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

6 Kommentare

  1. Daniel

    Verfasst am 11. Februar 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 :)

  2. konishkichen

    Verfasst am 15. Februar 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

  3. Dieter M.

    Verfasst am 15. Februar 2011 um 17:29 Uhr.

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

  4. konishkichen

    Verfasst am 16. Februar 2011 um 7: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

  5. Matthias

    Verfasst am 16. Februar 2011 um 8: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?

  6. Daniel

    Verfasst am 16. Februar 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… :)

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.