Die Verwendung von Web Fonts über die Schriften-Bibliothek Typekit kurz erklärt

Wenn du ein Typografie-Fan bist, wünscht du dir bestimmt auch oft ein wenig mehr Möglichkeiten bei der Auswahl von Schriften für deine Webdesigns. Die Online Font-Library Typekit bietet eine praktische Lösung für dieses Problem. Über einen Abo-Service kannst du die bei Typekit verwalteten und gehosteten Schriften gegen eine Jahresgebühr nutzen und unkompliziert auf deinen Webseiten einsetzen. Es gibt auch ein kleines, kostenloses Paket von Typekit, so dass du das Angebot erst einmal unverbindlich testen kannst. Ich habe im folgenden Artikel kurz zusammengefasst, wie die Verwendung von Webfonts über Typekit funktioniert.

1. Anmeldung und Auswahl eines Pakets

Im Profi-Einsatz ist Typekit nicht ganz kostenlos und daher wohl ganz besonders eine Option für Typo-Fans. Auch für deine Kundenprojekte kannst du Typekit als Option vorschlagen. Allerdings gibt es dennoch auch eine kostenloses Typekit-Paket. Dieses eignet sich für das Testen des Dienstes oder für eine kleinere persönliche Webseite mit relativ wenigen Seitenaufrufen im Monat.

Die Preise werden bei Typekit nach Anzahl der Webseiten und der verwendeten Schriftarten, sowie den monatlichen Seitenaufrufen der Webseiten berechnet. Das Personal- oder Portfolio-Paket für 25 bzw. 50 US-Dollar im Jahr reicht wohl in den meisten Fällen aus. Ab dem Portfolio-Paket sind dann auch alle Schriften freigeschaltet und die Anzahl der Schriftarten und Webseiten ist unbegrenzt. Eine komplette Übersicht der unterschiedlichen Preise für die Nutzung von Typekit findest du auf der Pricing-Übersichtsseite.

Praktisch ist es, sich erst einmal für die kostenlose Version anzumelden. So kannst du Typekit z.B. zuerst auf deinem lokalen Server ausprobieren. (Hast du noch keinen lokalen Server auf deinem Computer eingerichtet, schaue dir doch einmal das folgende Video-Tutorial an: WordPress lokal installieren.)

2. Die Auswahl von Schriften

Über Typekit hast du wirklich eine riesige Auswahl von Schriften für deine Webdesigns zur Verfügung. Über die Option „Browse Fonts“ kannst du dir alle Schriften übersichtlich anschauen und eine passende Schrift für dein Design finden.

Typekit Schriften nutzen
Alle Schriften von Typekit in der Übersicht.

Typekit Schriften nutzen
Du kannst eine Schrift auch in der Einzelansicht testen.

Über einen „Add to Kit“-Button kannst du dir eine Schrift zu deinem persönlichen Schriften-Kit hinzufügen.

3. Die Einbindung der Schriften auf einer Webseite

Hast du dir eine Schrift ausgesucht, kannst du deine Schriftauswahl über einen sogenannten Kit-Editor bearbeiten. Über den Punkt „Selector“ kannst du zum Beispiel bereits angeben, wo die Typekit-Schrift zum Einsatz kommen soll.

Typekit Schriften nutzen

Auf dieser Weise brauchst du später nicht mehr dein eigenes Stylesheet bearbeiten, um die Typekit-Schrift dort manuell anzugeben. Wenn du also h1 und h2 angibst, wird die ausgewählte Schrift dann später automatisch für alle h1 und h2 Überschriften deiner Webseite verwendet.

Natürlich kannst du zusätzlich auch noch Angaben direkt im Stylesheet machen. Die Infos zur Verwendung deiner Schriftart im CSS findest du unter „Using fonts in CSS“.

Typekit Schriften nutzen

Nachdem du alle Einstellungen in deinem Kit vorgenommen hast, kannst du du deine Angaben über den Publish-Button speichern.

Damit die von dir gewählte Typekit-Schrift jetzt auch automatisch auf deiner Webseite genutzt wird, musst du nur noch zwei Zeilen JavaScript-Code innerhalb deines head-tags einfügen.

Den Code kannst du aufrufen und dann kopieren, indem du ganz oben links im Kit-Editor „Embed Code“ anwählst.

Zum Testen von Typekit habe ich z.B. einmal die Schrift „Neue Bebas“ auf meinem lokalen Server für die h1- und h2-Überschriften im Nilmini-Theme eingesetzt.

Typekit Schriften nutzen
Typekit beim Nilmini-Theme im Einsatz.

4. Schrift-Inspirationen finden

Falls du dir anschauen möchtest, wie Typekit im Einsatz aussieht, kannst du dir zum Beispiel das neue Redesign des New Yorker Webdesigners Jason Santa Maria anschauen. Auch auf dem Typekit-Blog werden immer wieder schöne Webseiten mit Typekit im Einsatz vorgestellt.

Hast du bereits Erfahrungen mit der Verwendung von Typekit gemacht und welche Tipps und Tricks kannst du weitergeben? Über dein Feedback freue ich mich sehr!

  1. Wenn es um Webfonts geht, schaue ich meistens zuerst bei fontsquirrel.com vorbei! Gibt zwar nicht jede Font in jedem Format, dafür sind sie auch für den komerziellen Einsatz kostenlos!

    • Hallo Lukas,

      Fontsquirrel ist auf jeden Fall auch ein super Tipp für Webschriften. Allerdings wir hier die Einbindung über @font-face genutzt und aus meine Erfahrung gibt es dabei leider öfters mal Probleme, wie z.B. eine leichte Aufpixelung der Schrift. Typekit ist zwar nicht kostenlos, bietet aber dafür jede Menge echte Profischriften und eine saubere Einbindung an.

      Viele Grüße,
      Ellen

  2. Sehr guter Artikel Ellen (wieder mal!!)

    Wir setzen selber Typekit für zahlreiche Websites ein. Eine tolle Sache! Bei einer aktuellen WordPress-Installation hatte ich das Problem, dass die Schriften erst „versetzt“ beim Seitenaufruf luden. Als ich schliesslich den Standard JS-Embed-Code (die zwei Codezeilen) durch einen anderen asynchronen Ansatz ersetzt habe, luden die Schriften direkt unversetzt beim Seitenaufruf. Sollte also noch jemand das Problem haben, dass die Typekit-Fonts die „Standardfonts“ zu spät ersetzen (+- 1 Sekunde nach Seitenaufbau), lohnt sich ein Blick auf folgenden Artikel: http://blog.typekit.com/2011/05/25/loading-typekit-fonts-asynchronously/

  3. Hallo Gino,

    vielen Dank für dein Feedback. Es freut mich, dass dir der Artikel gefällt. Den Link finde ich ebenfalls klasse, das werde ich auf jeden Fall bei der nächsten Gelegenheit einmal ausprobieren.

    Viele Grüße,
    Ellen

Hinterlasse eine Antwort

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