Schriften von typekit in Contao verwenden

Es gibt immer mehr Anbieter von Schriftdiensten, mit denen man relativ einfach systemübergreifende Schriften einsetzen kann. Ein weiteres Beispiel wird in diesem Tutorial gezeigt: Der Service von typekit.

Benötigt man bei Schriftersetzungstechnologien wie Cufón eine gültige Lizenz zur Verwendung und Einbettung einer Schrift oder Schriftenfamile und muss diese Schrift zunächst umwandeln, lassen sich die Schrift via typekit einfacher in die eigene Website integrieren.

Zudem (ver)sorgt typekit auch für die Darstellung der Schriften in den verschiedensten Browsern; auch mobile Endgeräte werden hier bedient. Rufen Sie für eine erste Übersicht die Website von typekit auf.

Typekit öffnen

Das richtige Paket wählen - zum Testen den Free Account

typekit bietet 4 Pakete an, um die Schriften auf den Websites einzubinden und zu verwenden.

Für dieses Tutorial ist der kostenfreie, eingeschränkte (u.a. auf maximal 2 Schriften) Zugang gewählt. Das erkennen Sie am kleinen Symbol, das auf dieser Seite im Browserfenster unten rechts angezeigt wird. Bei den anderen Paketen wird kein Symbol mehr angezeigt. typekit unterscheidet im Wesentlichen nach der Höhe der Page Views. Für z.B. knapp 50 Dollar (Paket Portfolio) pro Jahr erhalten Sie Zugriff auf alle Schriften, die typekit lizenziert hat.

typekit Schriften ansehen

Schriftbibliotheken durchsuchen

Auf der Website von typekit können Sie durch die Schriftbibliotheken nach passenden Schriften zu Ihrem Webdesign suchen; dabei wird in 3 Bibliotheken unterteilt (Trial, Personal und Full Library).

typekit Schriften ansehen

Erstellen eines Kit

Im Folgenden zeigt das Tutorial das Einbinden einer Schrift, die innerhalb eines Trial-Accounts genutzt werden kann (mal sehen was nach den 30 Tagen hier im Tutorial noch zu sehen ist ;-) ). Die ausgewählte Schrift nennt sich Learning Curve. In der nachfolgenden Abbildung sehen sie auch, das diese Schrift im Trail Account zur Verfügung steht (oben rechts).

typekit Schriften ansehen

Wenn Sie den grünen Reiter Type Tester anklicken, können Sie dort Ihren eigenen Text zum Testen eingeben und sehen gleich, ob sich die Schrift für Ihr Vorhaben eignet. Dabei können Sie auch durch einen Schieberegler die Schrift in unterschiedlichen Größen ansehen. Oft eignen sich eingebundene Schriften nicht in zu kleinen Schriftgrößen und wirken, auch vom Betriebssystem und Webbrowser abhängig, dann unscharf und schlecht(er) lesbar. Das liegt u.a. in den oft (noch) nicht angepassten Schriften für die Darstellung im Internet (Stichwort Hinting). Da das Thema Webfonts weiterhin im Umbruch und in der Weiterentwicklung ist (Standardformate wie WOFF für alle modernen Browser…), wird es diesbezüglich sicher in Zukunft weitere und verbesserte Möglichkeiten geben.

Wie sieht es denn im Browser aus?

Eine interessante und feine Option gibt es unter dem Reiter Browser Samples. Hier werden die Schriften in unterschiedlichen Betriebssystemen und Browsern gezeigt, so dass man ganz gut abschätzen kann, wie unterschiedlich die Darstellung der Schriften vom Besucher der Website gesehen werden.

typekit Schriften ansehen

Den Kit Editor starten

Nachdem man sich für den Free Account registriert hat, kann man gleich loslegen und das erste Kit zusammenstellen. Klicken Sie dazu auf der Seite auf Lauch Kit Editor (oben rechts). Der Kit Editor öffnet sich in einem eigenen Browserfenster. Um die Voreinstellungen (Settings) des Kits einzustellen, klicken Sie oben auf den Link Kit Settings.

typekit Schriften ansehen

Reiter Kit Settings

Im Reiter Kit Settings sehen Sie nun die Einstellungen für:

  • den Namen des Kits
  • die Domain(s), für die Sie die Schriften verwenden möchten
  • sowie die Option Google Analytics einzubinden

Wichtig:
Wenn Sie diese Option aktivieren, dass Sie einen entsprechenden Hinweis in das Impressum der Site aufnehmen, um den gesetzlichen Datenschutzrichtlinien zu entsprechen. Auch wenn Sie sonst auf Google Analytics verzichten und ein anderes Auswertungsskript wie Piwik oder keines einsetzen.

typekit Schriften ansehen

Reiter Colophon Settings

Bei Verwendung des Free Accounts wird ein Badge (kleine Grafik rechts unten) eingebunden. Hier können Sie den Namen sowie den Link einfügen. Klickt ein Besucher darauf, erhält er Informationen, welche 2 Schriften Sie verwenden.

typekit Schriften ansehen

Reiter Mobile Settings

Im dritten Reiter können Sie die Optionen für die Unterstützung von mobilen Endgeräten aktivieren / deaktivieren. Es stehen Ihnen diese 3 Optionen zur Verfügung:

  • Enable iPad support (4.2 and higher)
  • Enable iPhone/iPod Touch support (4.2 and higher)
  • Enable Android support (2.2 "Froyo" and higher)
typekit Schriften ansehen

Feintuning im Kit Editor

Eine detaillierteren Blick auf den typekit Editor:

In der linken Spalte werden nun in der Rubrik Selectors die Selektoren eingegeben; dies kann ein HTML-Tag, eine CSS-ID oder CSS-Klasse sein. Hier für das Beispiel ist das HTML-Tag h4 für die Schrift Learning Curve eingegeben worden.

In der Rubrik Language Support lassen sich unterschiedliche Sätze an Satzzeichen einbinden; hierzu bietet die Schriftenauswahl auch Optionen, nur Schriften anzuzeigen, die z.B. die deutschen Umlaute beinhalten. Unter dem Reiter Specimens lassen sich alle in der jeweiligen Schrift vorhandenen Schriftzeichen anzeigen.

Unter der Rubrik Weight & Styles lassen sich mehrere Schriftschnitte einer Schriftfamilien – sofern vorhanden und angeboten – auswählen und einbinden.

Und unter der letzten Rubrik CSS Stack lassen sich die „Fallback-Schriften” angeben, sollten die Schriften nicht angezeigt werden können oder der ein oder andere Browser die typekit-Schrift nicht anzeigen.

typekit Schriften ansehen

Klickt man in der linken Spalte in der Rubrik Selectors auf den Link Advanced, so erhält man Hinweise, wie die Schrift in die eigenen CSS-Definitionen eingebunden wird. Die zum Beispiel passenden CSS-Definitionen finden Sie weiter unten.

typekit Schriften ansehen

typekit-Code in Contao einbinden

Alle benötigten Angaben für das Kit sind nun vorgenommen und die Einbindung der typekit-Schriften in die Contao-Website erfolgt nun im folgenden Schritt. Klicken Sie im Fenster des typekit Editor oben auf den Link Embed Code. Sie erhalten dann die nachfolgende Darstellung.

Markieren Sie die beiden Codezeilen und kopieren sich diese in den Zwischenspeicher. Wechseln Sie dann ins Backend von Contao und öffnen das Seitenlayout (Layout -> Themes -> Seitenlayouts). Wechseln Sie in die Rubrik Zusätzliche Head-Tags und fügen die beiden Codezeilen aus dem typekit Editor ein und speichern das Seitenlayout ab.

typekit Schriften ansehen

Beispiel Überschrift mit typekit Schrift

Erlesener Espressogenuss… Bohne für Bohne.

espressogenuss
Foto urheberrechtlich geschützt, © 2010 weitzelmedia

CSS-Definitionen erstellen

h4
{
	font-family:"learning-curve-1",times,serif;
	font-weight:normal;
	font-size:6em;
	color:#9F988B;
}

Weiterführende Links

twitter
rss-news-feed
weitzeldesign
planepix