Monotypes fonts.com WebFonts
Vor kurzem habe ich euch das Google Font Directory vorgestellt, mit dem ihr auf eurer Webseite verschiedene Schriftarten nutzen könnt. Leider ist das Verzeichnis mit 19 Schriftarten noch nicht gerade üppig bestückt.
Monotype fonts.com web fonts ändert dies. Das Unternehmen Monotype Imaging, welche die Rechte an den Monotype, Linotype und ITC Bibliotheken hält, stellt ihr neues Webfonts Interface vor und öffnet es gleichzeitig der Öffentlichkeit. Darin sind Fontschwergewichte wie Adrian Frutigers Avenir oder Univers als auch Helvetica enthalten.
Die Seite findet ihr hier: Monotype fonts.com web fonts
Monotype bietet auf der Webseite drei Bezahlmodelle an, von denen eines komplett kostenlos ist. Beim Gratisaccount muss lediglich ein kleines Banner auf der Webseite eingebunden werden, auf welcher eine Schriftart von Monotype eingesetzt wird.
Bezahlmodelle
Der kostenlose Account bietet bei höchstens 25.000 Seitenaufrufen pro Monat über 2.000 Schriftarten an.
Je nach Bedarf können die Optionen angepasst werden. Bei einem professionellen Abonnement dürfen sogar 50 Schriftarten pro Monat heruntergeladen werden. Wenn ich bedenke, dass ein einziger Schrifttyp von Frutiger bei Monotype bereits 37 Euro kostet, ist das ein ausgezeichnetes Angebot.
Die Installation der Fonts gestaltet sich ebenfalls als sehr einfach. Sobald der Wunschaccount angelegt ist, findet ihr euch in der Accountübersicht wieder.
Übersicht
Klickt nun unter dem Punkt “Project” auf “New”, gebt dem Kind einen Namen und eine URL und speichert es ab.
Neues Projekt
Nun geht es an die Auswahl der Fonts. Klickt auf “Choose Fonts” und tobt euch aus. Habt ihr eine Schriftart gefunden die euch gefällt, klickt rechts auf “Add to project”. Der Font wird zu eurem ausgewählten Projekt hinzugefügt. Habt ihr bereits mehrere Projekte angelegt, kann dieses rechts oben gewählt werden.
Auswahl der Schriftart
Nun geht es ans Definieren der “Selectors”. Wir weisen hier jeder Schriftart eine eindeutige Bezeichnung zu, damit diese später im Stylesheet korrekt zugeordnet werden kann. Klickt auf “Work on style sheet”, gebt einen Namen für jeden Selector ein und weist diesem eine Schriftart zu. Anschließend das Ganze mit “Save changes and update style sheet” speichern. Der angelete Selector erscheint nun unter dem Eingabefeld.
Zuordnen der Schriftarten
Klickt abschließend auf “Publish” und holt euch den Code zum Einbinden ins eigene System. Wählt hier die Option 2: Advanced (JavaScript). Diese bietet mehr Kontrolle, welche Texte auf der Webseite anders aussehen sollen.
Zuordnen der Schriftarten
Der obere Codeschnipsel muss auf eure Seite zwischen die beiden head-tags.
<script type="text/javascript" src="http://fast.fonts.com/jsapi/322ab828-9028-49aa-9a90-c035d47d41ce.js"></script>
Für das CSS legt ihr in eurer jeweiligen CSS Datei eine Klasse an und kopiert den Text da hinein und passt diesen nach eigenen Vorstellungen an.
.h1_aachen {
font-family: font-family:"Aachen W01 Bold";
font-size: 36px;
line-height: 36px;
}
Jetzt könnt ihr in eurer Webseite per HTML komfortabel die Klasse den Texten zuweisen, die mit einer anderen Schriftart dargestellt werden sollen.
Viel Spaß beim Ausprobieren! 
