Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung

Webdesign-Tipps: @font-face kann mehr, als man denkt

    Webdesign-Tipps: @font-face kann mehr, als man denkt

Mittlerweile sollte jeder Webdesigner das Wunder namens @font-face benutzen oder zumindest davon gehört haben. Aber leider werden die Funktionen von @font-face noch nicht voll ausgenutzt. In diesem Artikel will ich zeigen, wie man Schriften am besten in ein Projekt einbinden kann.

Als erstes brauchen wir natürlich eine Schriftart, mit der wir arbeiten können. Als Beispiel verwende ich hier den Font Cantarell von Abattis. Siehe hierzu auch meinen Artikel @font-face kompatible Schriften gratis im Netz. Es ist möglich, bei FontSquirrel ein fertiges @font-face-Kit herunterzuladen und genau das wollen wir tun.

Schauen wir uns die Datei stylesheet.css an:

@font-face {
    font-family: 'CantarellRegular';
    src: url('Cantarell-Regular-webfont.eot?') format('eot'),
         url('Cantarell-Regular-webfont.woff') format('woff'),
         url('Cantarell-Regular-webfont.ttf') format('truetype'),
         url('Cantarell-Regular-webfont.svg#webfont6LOZSOGi') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CantarellOblique';
    src: url('Cantarell-Oblique-webfont.eot?') format('eot'),
         url('Cantarell-Oblique-webfont.woff') format('woff'),
         url('Cantarell-Oblique-webfont.ttf') format('truetype'),
         url('Cantarell-Oblique-webfont.svg#webfont7jFxfIEr') format('svg');
    font-weight: normal;
    font-style: normal;

}

Jetzt kann man in seinem Stylesheet den Font sehr einfach benutzen:

font-family: CantarellRegular;

Jetzt kommt aber das Problem: Das „fertige“ @font-face-Kit legt für jede Variation der Schrift, also zum Beispiel Fett und Kursiv, eine eigene Schriftfamilie an. Wenn wir also die kursive Form der Schrift benutzen, können wir dies nicht einfach mit font-style: italic, sondern wir müssen als Schriftfamilie 'CantarellOblique' definieren.

Als ich meine ersten Erfahrungen mit @font-face gemacht habe, war mir das nicht bewusst. Ich nahm es einfach so hin, dass dieses professionell scheinende, „fertige“ @font-face-Kit das so machte.

Mittlerweile ist mir klar geworden, wie viel Arbeit es bedeutet, für alle Elemente, die kursiv sein sollen, eine andere Schriftfamilie anzugeben. Und ich habe gelernt, dass @font-face die Lösung des Problems schon mitbringt. Wir müssen unsere stylesheet.css nur etwas anpassen:

@font-face {
    font-family: 'Cantarell';
    src: url('Cantarell-Regular-webfont.eot?') format('eot'),
         url('Cantarell-Regular-webfont.woff') format('woff'),
         url('Cantarell-Regular-webfont.ttf') format('truetype'),
         url('Cantarell-Regular-webfont.svg#webfont6LOZSOGi') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Cantarell';
    src: url('Cantarell-Oblique-webfont.eot?') format('eot'),
         url('Cantarell-Oblique-webfont.woff') format('woff'),
         url('Cantarell-Oblique-webfont.ttf') format('truetype'),
         url('Cantarell-Oblique-webfont.svg#webfont7jFxfIEr') format('svg');
    font-weight: normal;
    font-style: italic;

}

Genau so können wir auch mit den fetten Schriften vorgehen. Jetzt können wir also die per @font-face eingebundene Schrift ganz einfach wie jede andere Schrift benutzen und font-style und font-weight werden unterstützt.

Fazit

Ich verstehe nicht, warum auf FontSquirrel ein angeblich fertiges Kit angeboten wird, das so viel falsch macht. Dabei ist es so einfach, @font-face richtig zu benutzen, wenn man erst einmal weiß, wie. Deshalb habe ich diesen Artikel geschrieben, damit @font-face-Neulinge nicht den gleichen Fehler machen, wie ich und bestimmt auch viele andere.

Außerdem will ich mit diesem Artikel zeigen, dass man jedes Snippet und jedes fertige Kit, das man in seine Projekte einbindet, hinterfragen und verstehen sollte. Oft wird hier viel Potenzial verschenkt.

Was sagt ihr?

Wusstet ihr, dass man @font-face so nutzen kann? Benutzt ihr auch fertige @font-face-Kits? Was habt ihr zum Thema zu sagen? Über Kommentare würde ich mich sehr freuen!

Links zum Thema

Über den Autor

Autor dieses Gastbeitrages ist Lars Ebert. Er ist ein junger Webdesigner & Programmierer aus Iserlohn und bloggt auf Advitum.de über Webdesign, PHP und Co.

Finde einen Job, den du liebst zum Thema JavaScript, Webdesign

21 Reaktionen
Heike
Heike

Also solche Fehlimplementationen kenne ich auch aus anderen Bereichen - und dann muss man sich nicht wundern, wenn es überall Darstellungsfehler gibt.

Antworten

Mathuseo
Mathuseo

Nutze das Web Open Font Format (.woff) schon länger und finde es klasse!

Antworten

BastianBBux
BastianBBux

Jetzt bin ich hin und her gerissen.
Die Möglichkeit wäre natürlich grundsätzlich total toll, ABER:
es war in css2 drin, in css2.1 ist's rausgeflogen, in css3 ist's AFAICS wieder drin.
Der IE kann es seit version 4 (in worten: vier!!!), der opera erst ab 10, der firefox erst ab 3.5.
auf safari scheint es leicht unterschiedliche regelsätze zu geben.
Die performanz gibt mir auch zu denken.

man sollte bei der Verwendung also noch Vorsicht walten lassen.

Antworten

advitum
advitum

@Norman: Auf diese Weise verwendet der Browser aber nicht die kursiven und fetten Schriftschnitt der Webschrift, die du mit @font-face erstellt hast, sondern er erstellt aus der normalen Schriftvariante manuell eine kursive und eine fette Variante. Dass mag manchmal gutgehen, aber meistens führt dies zu einem unschönen Ergebnis.

Es ist immer besser, die im Download vorhandenen Dateien für Kursiv- und Fettschrift anzugeben!

Antworten

Norman
Norman

kA ob das x-Browser performant ist aber ich geb immer nur Font-Family und src an. Weight und Style schreib ich erst dorthin, wo ich es auch brauche, der Browser erledigt den Rest.

Antworten

Michael
Michael

Ich weiss nicht... Irgendwie ist's ständig mäßig performant, also fast alle Einbindungsformen. Ich empfehle immer, es möglichst sein zu lassen mit Custom Fonts.

Antworten

Jens Scherbl
Jens Scherbl

@Fabian Markus

Unter Windows haben bis auf den IE9 so ziemlich alle Browser ein sehr bescheidenes Fontrendering, unter OSX hat sich das Rendering beim Firefox in der aktuellen Beta deutlich verbessert im Vergleich zur letzten 3.x Version.

Antworten

Jens Scherbl
Jens Scherbl

Für ausgefallene, frei verwendbare Schriftarten kann ich übrigens die Seite freetypography.com sehr empfehlen.

Antworten

Michael Schwenck
Michael Schwenck

@Philipp: Die "Alte DIN Mittelschrift" habe ich auch nicht von Fontsquirrel, sondern von Myfont.de. Dort ist sie kostenlos zu haben, das Copyright ist ausgelaufen. Sie weicht aber auch in einigen Details von der Original-DIN-Mittelschrift ab, so hat z.B. das kleine "t" einen geraden Abstrich und nicht den Bogen nach rechts.

Antworten

Jens Scherbl
Jens Scherbl

Erinnere mich daran in dem Zusammenhang bei Fontsquirrel (oder bei Paul Irish) gelesen zu haben, dass aus Kompatibilitätsgründen mit bestimmten Browsern und Versionen (in dem Fall nicht zwangsläufig der IE) absichtlich auf die Nutzung dieser Methode verzichtet wurde.

Soweit ich weiß wird das aber bei der Font-API von Google inzwischen wie in deinem Artikel gemacht, also ist es wohl durchaus angebracht solche Entscheidungen gelegentlich neu zu überdenken.

Antworten

Philipp Schilling
Philipp Schilling

@Gnoffo Naja, so richtig egal ist es nicht, weil du – wie bei einem Layout-Programm auch – die Styles eben tatsächlich aufeinander aufbauen lassen kannst. Wenn du beispielsweise definierst

em {font-style: italic;}

ist es mit der vorgestellten Vorgehensweise endlich wieder egal, ob du dann in einer h2 oder einem p eine Auszeichnung vornehmen willst.

@Michael Ich bin überrascht, dass es die DIN-Mittelschrift irgendwo lizenzfrei gibt.
Gibt es irgendwo Dokumentationen zur Beeinträchtigung des Renderings von Seiten bei übermäßigem @font-face-Einsatz? Das habe ich mich nämlich auch mal gefragt, bin aber nicht wirklich fündig geworden.

Antworten

Michael Schwenck
Michael Schwenck

Nachtrag: habe ich schlau angefangen, ich wollte doch zeigen wo ;-) - "z.B. hier http://www.dhs.de/ die Titelschrift."

Antworten

Gnoffo
Gnoffo

Die Art der Font-Squirrel-Einbindung erinnert mich an DTP-Programme. Dort nimmt man auch immer den echten Kursivschnitt einer Schrift. Die Kursivstellung über die "i"-Taste stellt auch solche Schriften schräg, die keinen Kursivschnitt haben, was nicht gut aussieht.

Vom Aufwand her scheint es mir aber egal zu sein, ob man nun eine font-family oder einen font-style definiert..

Antworten

Bertram Simon
Bertram Simon

Danke für die Klarstellung. Aufgrund des schlechten Rendering von Fonts in Browsern nutzen wir andere Schriftarten nur für Überschriften. In diesen Fällen nutzen wir meistens Image Replacement Techniken. Aber das wird hoffentlich nicht mehr lange der Fall sein und dann kommt deine Lösung zum tragen.

Antworten

Michael Schwenck
Michael Schwenck

Danke für diesen guten Tip.

Ich setze @font-face schon länger ein, aber diesen Trick kannte ich noch nicht. Ich habe bisher nur Schriften von fontsquirrel eingesetzt, die erkennbar lizenzfrei waren, z.B. hier die Titelschrift.

Noch ein Hinweis: mit diesem guten Werkzeug bitte sparsam umgehen. Nicht nur aus typografischen Gründen (höchstens zwei Schriftfamilien auf einer Seite), sondern auch wegen der Performance sollte man mit @font-face definierte Schriften nur an wenigen Stellen zur Auszeichnung einsetzen, auf gar keinen Fall als Bodytype.

Antworten

ulrich
ulrich

Habt ihr eigentlich mal gelesen worum es bei Fontsquirrel geht?
Einfach vorher mal lesen... http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Antworten

Caspar
Caspar

Sehr nützlicher Hinweis, vielen Dank!
Da bei FontSquirrel & Co. nicht nur Freeware-Typen angeboten werden, bin ich mit fertigen Kits immer etwas vorsichtig. Kann man sicher sein, dass derjenige, der sie erstellt hat, sich tatsächlich mit der Lizenz seiner Schrift auseinander gesetzt hat?

@Stefan: Ja, und nur die.

Antworten

Felix Peters
Felix Peters

Schöner Artikel. Hab mich damit zwar schon beschäftigt. Den Trick kannte ich aber noch nicht.

Antworten

Stefan
Stefan

Können das alle Browser?

Antworten

Philipp Schilling
Philipp Schilling

Ich habe zwar schon ein paar Mal automatisch erzeugte Sets von Fontsquirrel verwendet und mich auch das ein oder andere Mal darüber geärgert, dass auch fette und kursive Schnitte als "normal" eingebunden werden, mir fehlte aber immer genau in dem Moment die Zeit, mal ein bisschen intensiver darüber nachzudenken oder zu recherchieren.

Vielen Dank also für diese kleine Anmerkung, die mir zukünftige Irritationen ersparen wird.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen