GRUNDLAGEN:

Lange Zeit galt der Grundsatz – “Websichere Schriften nutzen, dann werden die Seiten auf allen Systemen FAST gleich angezeigt!” Mit CSS3 und HTML5 können viele Dinge gestaltet werden, doch nur Wenigen ist der Vorteil von Webschriften ein Begriff, der bereits seit CSS2.1 existiert.

Also, was verbirgt sich hinter den Webschriften?
Ganz einfach, über eine CSS Datei oder im HTML-Code wird ein Schrifttyp definiert und über Font-Dateien aus dem Netz geladen. Abhängig von der Plattform, benötigt man einen bestimmten Typ von Datei, um die Schrift richtig darzustellen. Es gibt im Netz viele schöne und viele freie Schriften, mit denen man seine Seite optisch aufwerten kann.

Wichtig wie bei allem was man verwendet, Lizenzbestimmungen beachten.

Doch wie bekomme ich nun die benötigten Dateien?
Die einfachste Variante für WebAcappella User, findet man unter http://www.google.com/fonts/. Auf der Google-Seite kann man sich online die Schrift(en) auswählen und diese dann ganz einfach in der Seite integrieren. Damit man die Schrift in WebAcappella als Webschrift nutzen kann, muss die Schrift als erstes im System installiert werden. Öffnet man danach WebAcappella, zeigt das Programm diese als Webschrift in der Fontauswahl an. Dieses erkannt man am gelben Symbol vor der Schrift!

Bildschirmfoto 2014-03-01 um 16.59.37

Bei Schriften, welche verschiedene Stile und Stärken beinhalten, müssen beim Download der Font auf der Google Seite ausgewählt werden, damit diese im Downloadpaket integriert sind. Das Problem in WebAcappella ist leider, dass das Programm die verschiedenen Schriftstärken nicht in der Auswahl anzeigt und man nur mit dem Standardschrifttyp und Italic, sowie Fettschrift arbeiten kann. Hierzu gibt es jedoch eine Lösung wenn diese auch ein wenig seltsam wirkt.

Um die anderen Schriftstärken ebenfalls zu nutzen, bedarf es eines kleinen Tricks, doch nichts was besonders schwierig wäre:

1. Neben dem Downloadpaket der Schrift, bietet Google auch den Code um die Schrift in der Seite zu integrieren. In unserem Beispiel ist es die Webschrift Roboto, wobei hier der Wert auf besonders schlanke Schriftstärken gelegt wurde.

Beispiel:

<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300italic,400italic,300' rel='stylesheet' type='text/css'>

Da man die Schrift im gesamten Projekt nutzen möchte, bindet man den Code in den Eigenschaften der Webseite im Head-Bereich der Seite ein.

2. Wenn ich nun ein Textfeld in einer Seite integriere, dann zeigt sich im ersten Moment nur die Standard Einstellmöglichkeiten.

Bildschirmfoto 2014-03-01 um 17.29.59

Wenn man nun aber im Textfeld einen kompletten Textabsatz markiert,

Bildschirmfoto 2014-03-01 um 17.32.09

dann erscheint wie von Zauberhand die erweiterte Möglichkeit, auch die Schriftstärke auszuwählen, welche man im Vorfeld über die Codezeile deklariert hat.

 

Bildschirmfoto 2014-03-01 um 17.32.01

Sollte man nur die Standard Einstellungen der Schriften wünschen, dann reicht der Download und die Installation der Schrift im System.

Be the first to comment.

Leave a Reply