Kurzanleitung zu Webschriftarten über @font-face

Paul Irish

Einleitung

Die @font-face-Funktion von CSS3 ermöglicht es uns, benutzerdefinierte Schriftbilder im Web auf zugängliche, manipulierbare und skalierbare Weise zu verwenden. Aber Sie könnten sagen: „Warum sollten wir @font-face verwenden, wenn wir Cufon, sIFR und Text in Bildern verwenden?“ Einige Vorteile der Nutzung von @font-face für benutzerdefinierte Schriftarten:

• Vollständige Suchbarkeit nach Find (ctrl-F)
• Barrierefreiheit von Hilfstechnologien wie Screenreadern
• Text kann entweder über Übersetzungs- oder Übersetzungsdienste im Browser übersetzt werden
• CSS bietet die vollständige Möglichkeit, die typografische Darstellung zu optimieren: line-height, letter-spacing, text-shadow, text-align und Selektoren wie ::first-letter und ::first-line.

@font-face im Kern

Auf die grundlegendste Weise deklarieren wir eine neue benutzerdefinierte Remote-Schriftart, die so verwendet werden kann:

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.ttf');
}

Einsatzmöglichkeiten:

h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

In dieser @font-face-Deklaration verwenden wir die font-family-Eigenschaft, um die Schriftart explizit zu benennen. Dabei kann es sich um eine beliebige Schriftart handeln, unabhängig davon, wie die Schriftart tatsächlich heißt. font-family: 'SuperDuperComicSans'; wäre in Ordnung, auch wenn sie möglicherweise nicht für deinen Ruf geeignet wäre. In der src-Eigenschaft verweisen wir auf die Stelle, an der der Browser das Schriftart-Asset finden kann. Je nach Browser sind einige gültige Schriftarttypen zulässig: EOT, TTF, OTF, SVG oder ein Daten-URI, bei dem die gesamten Schriftartdaten inline eingebettet sind.

Natürlich ist nichts so einfach, wie es sein sollte. Die ursprüngliche Einschränkung des obigen Codes bestand darin, dass er kein EOT an IE 6-8 lieferte. Die Aufzählungspunkte @font-face-Syntax schlugen einen Lösungsvorschlag vor. Eine solide Version folgt.

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.eot'); /* IE 5-8 */ 
  src: local('☺'),             /* sneakily trick IE */
        url('tagesschrift.woff') format('woff'),    /* FF 3.6, Chrome 5, IE9 */
        url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
        url('tagesschrift.svg#font') format('svg'); /* iOS */
}

Du verspürst schon Kopfschmerzen? Wenn du lieber schnell loslegen möchtest, kannst du den Font Squirrel-Generator nutzen. Dieses Tool vereinfacht den gesamten Prozess, erstellt die Schriftart und bereitet die Varianten und den CSS-Code für dich vor. Es ist unverzichtbar, um Webfonts heute in die Praxis umzusetzen.

Support für Mobilgeräte?

Mobile Safari unterstützt SVG-Webfonts ab iOS 3.1 und Android unterstützt ab Version 2.2 otf/ttf. Aber sollten mobile Nutzende auch diese verbesserte typografische Erfahrung erhalten? Nein. Der Hauptgrund ist, dass WebKit Text verarbeitet, der über @font-face auf eine benutzerdefinierte Schriftart wartet: Der Text ist unsichtbar. Bei einer mobilen Verbindung mit niedriger Bandbreite sehen Ihre Nutzer also erst dann keinen Text, wenn die ca. 50.000 Schriftdaten geladen sind. Das WebKit-Team arbeitet an einer Lösung, um nach einigen Sekunden eine Fallback-Schriftart zu aktivieren. Bis diese Version verfügbar ist, würde ich es nicht fair für Ihre Nutzer halten, diese Hindernisse zwischen ihnen und Ihren Inhalten zu überwinden.

Webfont-Dienste

Die @font-face-Funktion wird von einer Reihe von Diensten in einer einfachen API zusammengefasst. Oft können Sie dem HTML-Code und einer bestimmten Konfiguration eine einzelne CSS- oder Skriptzeile hinzufügen und schon sind Sie fertig. Viele, wie WebInk, Typekit und Fontslive, ermöglichen die Nutzung der Schriftarten (manchmal bis zu einer Bandbreitenbeschränkung) gegen eine monatliche Gebühr. Die Nutzung dieser Dienste ist für den gelegentlichen Entwickler sehr praktisch, da einige der Komplikationen der Bereitstellung einer browserübergreifenden Lösung vermieden werden müssen.

Mit der Google Font API können Sie eine kleine, ausgewählte Gruppe kostenlos lizenzierter Schriftarten verwenden. Dazu benötigen Sie lediglich einen Link zu einem Stylesheet. Google kümmert sich dann um browserübergreifende Probleme und um die Leistung. Mit Webfonts ist es der schnellste Weg, sofort durchzustarten.

Professionelle Schriftarten für @font-face finden

Eine häufige Überraschung von Designschaffenden ist, dass nur der Kauf einer Schriftartlizenz (zum Beispiel für Ihr Grafikdesign) nicht bedeutet, dass Sie sie auch in @font-face verwenden können. Lizenzen für @font-face (oder Webeinbettung) sind in der Regel separat erhältlich. Lesen Sie sich die Vereinbarung sorgfältig durch. Bei Fragen können Sie sich gerne an die Font Foundry wenden. Fontspring ist eine Schriftart-Boutique, die Hunderte hochwertige, professionelle Schriftarten verkauft, die alle für die Verwendung mit @font-face freigegeben wurden. FontFont und andere Unternehmen haben damit begonnen, @font-face-Lizenzen direkt zu verkaufen, obwohl sie derzeit nur auf WOFF und EOT ausgerichtet sind, die einen beträchtlichen (aber schrumpfenden) Teil des Browsermarkts entfallen. Viele Unternehmen fügen ihrem Katalog Webfont-Lizenzen hinzu. Wenn Sie jedoch keine finden können, wenden Sie sich an die Anbieter.

Umgang mit FOUT

Das Flash of Unstyled-Text ist ein Phänomen in Firefox und Opera, das nur wenige Webdesigner mag. Wenn Sie ein benutzerdefiniertes Schriftbild über @font-face anwenden, kommt beim Laden der Seite eine kurze Zeit, in der die Schriftart noch nicht heruntergeladen und angewendet wurde, und die nächste Schriftart im font-family-Stapel wird verwendet. Dies führt zu einem Blitz einer anderen (in der Regel weniger gut aussehenden) Schriftart, bevor das Upgrade durchgeführt wird.

Die Google Font API unterstützt WebFont Loader. Diese JavaScript-Bibliothek bietet eine Reihe von Ereignis-Hooks, mit denen Sie den Ladevorgang besser steuern können. Sehen wir uns an, wie Sie andere Browser dazu bringen können, das Verhalten von WebKit nachzuahmen, bei dem der Fallback-Text ausgeblendet wird, während die Schriftart @font-face geladen wird.

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
  custom: {
    families: ['Tagesschrift'],
    urls: ['http://paulirish.com/tagesschrift.css']
  }
});
</script>

/* we want Tagesschrift to apply to all h2's */
.wf-loading h2 {
  visibility: hidden;
}
.wf-active h2, .wf-inactive h2 {
  visibility: visible;
  font-family: 'Tagesschrift', 'Georgia', serif;
}

Wenn JavaScript deaktiviert ist, bleibt der Text die ganze Zeit sichtbar. Sollte die Schriftart fehlerhaft sein, wird auf sichere Weise eine einfache Serife verwendet. Betrachten Sie dies vorerst nur als Zwischenlösung. Die meisten Webfont-Experten möchten den Fallback-Text 2 bis 5 Sekunden lang ausblenden und dann sichtbar machen. Geringe Bandbreite und Mobilgeräte profitieren erheblich von dieser Zeitüberschreitung. Verständlicherweise ist Mozilla bestrebt, dieses Problem so schnell wie möglich zu beheben.

Eine schlankere, aber weniger effektive Lösung ist die font-size-adjust-Eigenschaft, die derzeit nur in Firefox unterstützt wird. Damit haben Sie die Möglichkeit, x-height in einem Schriftstapel zu normalisieren. Dadurch werden die sichtbaren Änderungen im FOUT reduziert. Der Font Squirrel-Generator hat gerade eine Funktion hinzugefügt, mit der du das x-Höhe-Verhältnis der von dir hochgeladenen Schriftarten abrufen kannst, damit du den font-size-adjust-Wert richtig festlegen kannst.

Zusammenfassung

Web-Schriftarten bieten Designern ein gewisses Maß an Freiheit und mit künftigen Funktionen wie jeweiligen Ligaturen und stilistischen Alternativen werden sie auch wesentlich flexibler sein. Derzeit können Sie sicher sein, diesen Teil von CSS3 zu implementieren, da er 98% der bereitgestellten Browser abdeckt. Viel Spaß!