3 Lösungswege um Webfonts in die eigene Website einzubinden

Lange sah die Typography im Web identisch aus. Man war auf die Nutzung von Standardschriften wie Arial, Helvetica, Verdana, usw. gebunden. Seit der Einführung der @font-face Regel ist das Einbinden von originellen, alternativen und vor allem passenden Schriften möglich. In diesem Artikel möchte ich euch drei Möglichkeiten aufzeigen wie ihr ein Webfont zu eurer Website hinzufügt.

The @font-face rule allows for linking to fonts that are automatically activated when needed. This allows authors to select a font that closely matches the design goals for a given page rather than limiting the font choice to a set of fonts available on all platforms.
– W3C http://www.w3.org/TR/css3-fonts/#font-face-rule

1. Typekit

Typekit wurde im Jahr 2008 ins Leben gerufen und seit 2011 von Adobe übernommen. Es ist also kein wirklich neues Produkt. Typekit ist eine Sammlung von über 700 professionellen Schriftfamilien. Typekit besteht aus alten Klassikern sowie neuen und modernen Schriften. Sie sind für die Nutzung auf Webseiten optimiert.

Um eine oder mehrere passende Schriften zu finden dienen Filter mit diversen Schriftklassifierungen. Nach der Auswahl der Schriftart(en) wird ein so genanntes Kit angelegt. In den Kit Einstellungen können bereits die CSS Selektoren definiert werden. Ausserdem kann ein Fallback Schriftart bei deaktiviertem JavaScript bestimmt werden.

Das Kit wird mithilfe von zwei Zeilen JavaScript in den Head der Website eingesetzt.

2. Google Fonts

Der wahrscheinlich beliebteste Dienst stammt von Google und nennt sich Google Fonts. Die Hauptgründe der Popularität sind mit Sicherheit das kostenlose Angebot sowie die mittlerweile beachtliche Auswahl an Schriften.

Google Fonts

Google Fonts benötigt keinen Google- oder sonstigen Account. Die Schriftdatenbank kann mithilfe gewisser Charakteren-Filter durchsucht und die passende Schrift gefunden werden. Ausserdem besteht die Möglichkeit diverse Schriften in eine sogenannte Collection hinzuzufügen. So können Schriften miteinander verglichen werden um die geeignetste herauszufinden. Man beachte, dass die hinzugefügten Schriften nur vorübergehend, nämlich bis zum nächsten Reload der Seite, in der Collection gespeichert sind.

Um eine der auf Google Fonts angebotenen Schriften zur Webseite hinzuzufügen, stehen verschiedene Möglichkeiten zur Verfügung. Die einfachste ist den generierten Link-Tag in den Header der gewünschten Seite einzufügen. Somit verlinkt eure Website mit einem Stylesheet und den Webfonts welche auf den Google Servern bereit liegen. Nun müsst ihr noch in eurem persönliches Stylesheet die font-family Deklaration(en) anpassen und schon wird die neue Schrift angezeigt.

3. @font-face Kit Generator von FontSquirrel.com

Leider reicht die Einbindung eines einzelnen Dateiformats einer Schrift nicht aus um sämtliche Browser damit zu bedienen. Die Schriften müssen in den Formaten WOFF, EOT, TTF und SVG verfügbar sein, um sie auf sämtlichen Endgeräten und in allen modernen Browsern korrekt darzustellen.

Da hilft der @font-face Kit-Generator von FontSquirrel.com weiter. Der Generator erzeugt aus einer hochgeladenen Schrift die fehlenden Dateiformate. Ausserdem wird automatisch ein Stylesheet mit benötigter @font-face Regel generiert.

Screenshot @font-face Kit Generator

[warningbox]Bei dieser Methode müsst ihr zwingend die Lizenz der ausgewählten Schrift beachten. Nicht jede Schrift darf auch auf Webseiten eingesetzt werden.[/warningbox]

Auf fontsquirrel.com/fontface könnt ihr übrigens auch bereits fertige Kits herunterladen.

Bildquelle Artikelbild: aboutpixel.de / lettersalat © maçka

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.