Vorheriger Artikel Nächster Artikel

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.

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

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 , PHP und Co.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
21 Antworten
  1. von Philipp Schilling am 22.02.2011 (09:02Uhr)

    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 Teilen
  2. von Stefan am 22.02.2011 (09:10Uhr)

    Können das alle Browser?

    Antworten Teilen
  3. von Felix Peters am 22.02.2011 (09:14Uhr)

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

    Antworten Teilen
  4. von Caspar am 22.02.2011 (09:24Uhr)

    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 Teilen
  5. von ulrich am 22.02.2011 (09:46Uhr)

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

    Antworten Teilen
  6. von Michael Schwenck am 22.02.2011 (09:52Uhr)

    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 Teilen
  7. von Bertram Simon am 22.02.2011 (10:19Uhr)

    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 Teilen
  8. von Gnoffo am 22.02.2011 (11:05Uhr)

    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 Teilen
  9. von Michael Schwenck am 22.02.2011 (11:21Uhr)

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

    Antworten Teilen
  10. von Philipp Schilling am 22.02.2011 (11:28Uhr)

    @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 Teilen
  11. von Jens Scherbl am 22.02.2011 (12:52Uhr)

    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 Teilen
  12. von Michael Schwenck am 22.02.2011 (13:08Uhr)

    @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 Teilen
  13. von Jens Scherbl am 22.02.2011 (13:20Uhr)

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

    Antworten Teilen
  14. von Jens Scherbl am 22.02.2011 (13:24Uhr)

    @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 Teilen
  15. von Michael am 22.02.2011 (14:33Uhr)

    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 Teilen
  16. von Norman am 23.02.2011 (10:42Uhr)

    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 Teilen
  17. von advitum am 23.02.2011 (10:48Uhr)

    @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 Teilen
  18. von BastianBBux am 28.02.2011 (12:09Uhr)

    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 Teilen
  19. von Mathuseo am 13.04.2011 (15:08Uhr)

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

    Antworten Teilen
  20. von Heike am 03.10.2011 (14:46Uhr)

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

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Webdesign
Grid – Eine einfache Einführung in Responsive Webdesign
Grid – Eine einfache Einführung in Responsive Webdesign

Willst du schnell den Einstieg in Responsive Webdesign finden oder die Basics auffrischen? Mit diesem Tutorial ist beides kein Problem. » weiterlesen

t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“
t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“

Möchte man für unterschiedliche Geräte anpassungsfähige Websites erstellen, ist „Responsive Webdesign“ das Stichwort. Um sich damit vertraut zu machen, ist Designern und Entwicklern das Buch … » weiterlesen

Responsive Webdesign verkaufen: So sieht der optimale Workflow aus
Responsive Webdesign verkaufen: So sieht der optimale Workflow aus

Mit „Responsive Webdesign“ werden oft nur die technischen Komponenten in Verbindung gebracht – wie Breakpoints, Responsive Images und progressive Enhancement. Kein Wunder, dass RWD-Projekte zum … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 36 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen