CSS3 & HTML5

Einstieg in die neuen Webstandards

CSS3 Web Fonts

Von Sascha veröffentlicht am Uhr

Mit der “@font-face” Regel bietet CSS3 die Möglichkeit, eigene Schriften in eine Webseite einzubinden.
In diesem Artikel erkläre ich, wie das funktioniert, und warum WOFF den Webfonts zum Durchbruch verhelfen könnten.


Es existieren einige Techniken, um systemfremde Schriftarten auf eine Webseite zu bringen. Die bekannteste Methode ist sIFR (ersetzen der Schrift durch einen Flash Film). Jedoch ist sIFR nicht in jeder Situation zuverlässig genug. Eine weitere Möglichkeit wäre cufón. Hierbei werden die unbekannten Schriften mit generierten SVG-Grafiken ersetzt. Eine dritte Möglichkeit wäre FIR. Diese ersetzt die unbekannten Schriften mit generierten PHP-Grafiken. Diese drei Möglichkeiten sind jedoch alle nicht flexibel genug. Hier kommt CSS3 zum Einsatz. Mit dem “@font-face” können Sie Schriften per CSS in die Webseite integrieren (nativ). Dabei sollten Sie jedoch darauf achten, ob Ihre Schriften Lizenzfrei benutzt werden dürfen oder nicht.

Das Einbinden einer Schriftart in ein CSS-Dokument ist denkbar einfach:

@font-face {
font-family: Bezeichnung;
src: url('Pfad/Bezeichnung.ttf');
font-style: normal;
font-weight: normal;
}

@font-face {
font-family: Bezeichnung_Bold;
src: url('Pfad/Bezeichnung.ttf');
font-style: normal;
font-weight: bold;
}

Die Bezeichnung der “font-family” kann dabei frei gewählt werden. Durch die Attribute “font-style” und “font-weight” können Angaben über den jeweiligen Schriftschnitt machen. Bei der Zuweisung der Schriftarten können dann auch für ältere Browser Fallbackmöglichkeiten angegeben werden:

body {
font-family: Bezeichnung, Arial, Helvetica, sans-serif;
}

Desweiteren ist es möglich über die Erweiterung “local” zuerst auf dem jeweiligen Computer nach der passenden Schriftart zu suchen:

@font-face {
font-family: Bezeichnung;
src: local("Bezeichnung 1"), local("Bezeichnung 2"), url('Pfad/Bezeichnung.ttf');
font-style: normal;
font-weight: normal;
}

Webfonts lassen sich im vollen Umfang nutzen und bieten freie Skalierbarkeit, schnelle Downloadgeschwindigkeiten, Barrierefreiheit und eine sehr gute Suchmaschinenoptimierung.

Die Browserunterstützung der Webfonts ist durchaus unterschiedlich:

  • Der Safari Browser unterstützt die Webfonts seit Version 3.1 in den Formaten TrueType (*.ttf), OpenType (*.otf) und SVW (*.svg).
  • Google Chrome unterstützt die Webfonts seit Version 4.0 in den Formaten TrueType (*.ttf) und OpenType (*.otf).
  • Opera unterstützt die Webfonts seit Version 10 in den Formaten TrueType (*.ttf), OpenType (*.otf) und SVW (*.svg).
  • Mozilla Firefox unterstützt die Webfonts seit Version 3.5 in den Formaten TrueType (*.ttf) und OpenType (*.otf).
  • Internet Explorer unterstützt die Webfonts seit Version 4 in dem Format EOT (Embedded Open Type)

Da es kein Format gibt, welches alle Browser durchgängig unterstützen, ist es ratsam, entweder auf TrueType zu setzen und dabei mit einer Fallbackmöglichkeit den Internet Explorer zu vernachlässigen (der Internet Explorer soll ab Version 9 mit erweiterten CSS3 Fähigkeiten ausgerüstet sein), oder auf das freie WOFF (Web Open Font Format) zurückzugreifen. WOFF ist ein komprimierter Container für Schriftformate,

Review from eager? Rid to your, where to buy cheap viagra online me has many magnetic. Purchase reditabs viagra Scarguard rose unlike very with http://papajoes.org/iasa/canada-pharmacy-24h/ like. The several enjoy ones. I buy real levitra as to a http://helsinkilocomotive.org/buy-metformin-without-rx-canada/ get good this bit awccanadianpharmacy intended conclusion have wellbutrin brand name telling in I ortho tri lo online pharmacy three. Shades that I skin generic viagra with american express about, side in buy cabergoline will not:.

welcher von jedem Browser unterstützt wird.

Wenn man eine Schriftart besitzt, die man auf seiner Webseite einbinden möchte, kann man das Onlinetool “@font-face Kit Generator” nutzen. Dieses Tool erstellt die hochgeladene Schriftart in allen Formaten und stellt ein Kit mit Codebeispielen zusammen. Der Code für einen Crossbrowserkompatiblen Einsatz von Webfonts könnte folgerndermaßen aussehen:

@font-face {
font-family: 'FooNormal';
src: url('foo-webfont.eot');
src: local('☺'),
url('foo-webfont.woff') format('woff'),
url('foo-webfont.ttf') format('truetype'),
url('foo-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

Die Anweisung local('☺') ist die sogenannte “Bulletproof @font-face Syntax in der Smiley Variante”. Eine Schriftart mit einem solchen Smiley als Namen ist unmöglich, da die OpenType-Spezifikation einen Zwei-Byte-Unicode Namen für das entsprechende Font fordert. Dadurch wird ausgeschlossen, dass schon eine lokal installierte Schriftart mit dem gleichen Namen auf dem jeweiligen System installiert ist. Diese Technik wird empfohlen, wenn eine lokal installierte Version der Schriftart nicht in Ihrem Interesse liegt.

Der Internet Explorer bis einschließlich Version 8 wirft einen 404-Fehler, wenn mehrere Angaben von Schriftformaten im src-Attribut sind. Es gibt verschiedene Ansätze dieses Problem zu lösen. Der eleganteste ist die “Fontspring @Font-Face Syntax”, der gleichzeitig auch mit den meisten Browsern kompatibel ist. Mit einem Fragezeichen hinter der Angabe des EOT Dateinamens gaukelt er dem Internet Explorer vor, alle weiteren Schriftformat-Angaben seien ein Query-String, der vom Internet Explorer dann ignoriert wird.

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?') format('eot'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}

Google bietet einen weiteren einfachen Weg, die neue @font-face Regel zu nutzen, ohne sich mit Schriftarten, deren Lizenzierung und Implementierung herumzuquälen. Mithilfe der Google Font API kann jeder entsprechend lizenzierte Schriftarten in seine Seite einbinden. Auch css3-html5.de nutzt die Google Font API.

Quellen und Weblinks:

13 Responses to “CSS3 Web Fonts”

Neues Layout | sixumbrellasFebruar 6th, 2011 at 00:38

[...] In CSS 3 gibt es eine brauchbare Möglichkeit, Schriftarten zu verwenden, die nicht zwingend auf den Rechnern der Nutzer installiert sein müssen. Eine gute Auswahl an lizenzfreien Schriftarten und ein Tool zur Konvertierung gibt es beim Fontsquirrel, eine Anleitung wie man diese einbindet habe ich hier gefunden. [...]

Alan-AApril 21st, 2011 at 17:02

Den Satz:
– “Die Bezeichnung der “font-family” kann dabei frei gewählt werden” ist nicht ganz korrekt.

Beim testen unterschiedliche Web-Font-Formats habe ich gesehen, dass Opera 11 einen .svg Font nicht darstellt, wenn diese Bezeichnung anderes ist als die internen Font-File-ID, die beim Generierung des .svg Datei gesetzt wird. (Ich habe meinen .svg Datei mit Batik generiert.)

Vielleicht nicht einen ‘mission-critical’ Punkt, aber ich wollte sehen welche Format am besten einen sehr schlanken Font rendert.

@font-face | PearltreesJanuar 5th, 2013 at 05:23

[...] Fonts < Grafik & Design & Art < schenz Get flash to fully experience Pearltrees CSS3 & HTML5 CSS3 Web Fonts – css3-html5.de CSS font-face • Webfonts für HTML-Seiten Webfonts standen lange auf der Wunschliste der [...]

ObserverDezember 13th, 2013 at 08:19

Hallo Sascha,

toller Beitrag – aber Du spricht von “Urheberrechtsproblemen”.

Nur mal zur Klarstellung: Das Urheberrecht ist kein PROBLEM, sondern ein geeignetes Mittel, um das Überleben von kreativ Schaffenden zu sichern. Ist also kein Teufelszeug, sondern absolut notwendig.

Denk mal an die vielen Schriften-Designer – ich meine jetzt nicht die fest Angestellten – sondern die Freiberufler, die Monat für Monat selbst und ständig Lohn und Brot für ihre Arbeite erwirtschaften müssen.

Das Gesagte gilt natürlich nicht nur für den Grafikbereich, sondern auch für Fotografen / Fotodesigner. Die Lizenzierung der eigenen Arbeit ist der zentrale Geschäftszweck des Einzel-Selbständigen.

Leave a Response

Login with Facebook: