Webfont ohne Web

Wir haben uns gefragt, ob man einen Prototypen generieren kann, ohne dass die benutzte Webfont auf einem Server liegt oder auf dem anderen Computer installiert werden muss. Es geht! Wie, erfährst du in diesem Tutorial.
  • Axure Version: 8.0
  • Level: Hack
  • Dauer: 45 min
  • Themen: Axure Hacks, Base64, Font, Typografie, Webfont
  • Weitere Programme: OS X 10.9, FontPrep ab Version 3.1, Terminal, Editor (bspw. Sublime Text)
Preview:

Hintergrund

Hintergrund unserer Frage war ein Projekt mit genau diesen Anforderungen. Bei größeren Unternehmen ist es nahezu unmöglich, geschützte und stets weiter entwickelte Icon-Fonts auf jedem einzelnen Firmenrechner zu installieren und aktuell zu halten. Öffnet man den Prototypen auf einem Smartphone oder Tablet, kann der integrierte Browser nur auf die Standardschriften des Systems zugreifen. Aber ein Webserver, auf dem die Schriften hinterlegt werden könnten, kommt aufgrund der Geheimhaltung des Projektes und den wertvollen Schriften ebenso nicht in Frage.

Das Konzept

Um Webfonts ohne Webserver und ohne notwendige Installation auf anderen Rechnern direkt in Axure einzubinden, benutzen wir eine Technik, die ursprünglich dafür gedacht war, lizensierte Schriftarten auch auf Webseiten vor unerlaubtem Herunterladen zu schützen. Die Idee dahinter ist, dass die Schriftart in den Dummy eingebettet (enkodiert) wird, damit sie vom Browser erkannt und richtig angezeigt (dekodiert) wird. Dafür enkodieren wir die Schriftdatei mithilfe dem Base64-Verfahren und binden diesen Code samt zugehörigen CSS-Code in Axure ein. Damit ist es möglich, den generierten HTML Prototypen zu versenden oder auf AxShare hoch zu laden, ohne die Schriftart separat auf einem Webserver speichern oder die Schriftart mitschicken zu müssen.

Wichtiger Hinweis

Dieses Tutorial richtet sich an Mac OS X Nutzer, da es systemspezifische Funktionen benötigt.

1 Vorbereitung

Bevor die Webfont eingebunden werden kann, musst du einiges installieren. Für unser Tutorial haben wir die freie Schriftart FontAwesome in die Schriftsammlung installiert. Eine Anleitung, wie du eine Font-Datei in die Schriftsammlung von Mac OS X installierst, findest du im Supportbereich von Apple. Die Schrift FontAwesome erhältst du unter http://fontawesome.io.
Wenn du eine Schrift in Axure einbinden möchtest, die nicht frei benutzbar ist, solltest du ebenfalls das kostenlose Programm FontPrep (http://fontprep.com) herunterladen.

2 Die richtige Datei finden

Für die Kodierung in Base64 benötigst du eine Datei, die mit der Endung .woff aufhört.

Variante A: Du möchtest erst einmal das Tutorial absolvieren und die Schriftart FontAwesome verwenden.
Dann Suche in dem gedownloadeten Order die Datei fontawesome-webfont.woff heraus.

Variante B: Du möchtest deine eigene Schriftart einbinden.
Hierfür verwendest du am besten das Programm FontPrep. Lege dazu die Font-Datei per Drag & Drop in das FontPrep Fenster und exportiere die Schriftart als WOFF-Datei.
Tipp: Es kann vorkommen, dass die Meldung „Unable to Prosses 1“ kommt, nachdem du eine Schriftart in das Fenster gezogen hast. In diesem Fall musst du meistens einfach FrontPrep einmal neu starten, dann wird der Schriftsatz angezeigt.

Schriftart mit Fontprep als WOFF exportieren.

Schriftart mit Fontprep als WOFF exportieren.

3 Den richtigen Ordnerpfad finden

Um die Datei über das Terminal leichter anzusprechen, kopierst du die WOFF-Datei in den Benutzerordner deines Benutzeraccounts. Den Benutzerordner erreichst du, indem du im Finder den Menüpunkt Gehe zu > Benutzerordner wählst. Den erkennst du auch an einen Haus-Symbol in der Seitenleiste des Finders. Sind mehrere Accounts auf deinem Computer angelegt und du bist nicht der Hauptbenutzer wird dir der Benutzerordner nur als Ordnersymbol angezeigt.

Haus-Symbol des Benutzerordners

Haus-Symbol des Benutzerordners

4 Die Kodierung mit Base64

Um die eigentliche Kodierung vorzunehmen öffne das Terminal deines Macs. Hier befindest du dich standardmäßig unter dem Pfad deines Benutzerverzeichnisses.

Füge folgenden Befehl in das Terminalfenster ein und drücke auf Enter:

base64 -i fontawesome-webfont.woff -o Base64Font.txt

Anmerkung: Falls du deine eigene Schriftart verwendest, musst du den Dateinamen deiner WOFF-Datei benutzen.

Der Terminal-Befehl erstellt einen Base64 Code auf Basis der WOFF-Datei. Das Ergebnis wird in der Textdatei Base64Font.txt gespeichert.

Nachdem du auf Enter gedrückt hast, findest du nun in deinem Benutzerordner die Datei Base64Font.txt.

WOFF-Datei über das Terminal in Base64 umwandeln

WOFF-Datei über das Terminal in Base64 umwandeln

5 Base64 Code für die Einbindung in Axure vorbereiten

Öffne als erstes die eben erstellte Datei Base64Font.txt mit einem Texteditor deiner Wahl. Sei nicht überrascht, wenn der Code sehr kryptisch aussieht. In dem Fall des FontAwesome Fonts sollte der entsprechende Base64 Code 111680 Zeichen lang sein. Er beginnt in Etwa mit: d09GRgABAAAAAUcwABEAAAACKPwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlR… usw.

Für die Einbindung in Axure musst du diesem Code noch ein CSS-Gerüst geben. Verwende hierfür folgenden Quellcode und füge die 111680 Zeichen Base64 Code an die dafür vorgesehene Stelle:

font-family: 'FontAwesome';
src: url(data:application/x-font-woff;charset=utf-8;base64, Hier kommt der Base64 Code hin) format('woff');
font-weight: normal;
font-style: normal;

Anmerkung: Wenn du eine eigene Schriftart benutzt, dann musst du bei font-family den in Axure benutzten Namen dort einsetzen. 

Kleine Erklärung des Codes

font-family: 'FontAwesome';

beinhaltet den benutzten Namen der Schriftart. Das Codefragmet vor dem Base64-Code

src: url(data:application/x-font-woff;charset=utf-8;base64,

teilt dem Browser mit, wie er den Code zu lesen hat.

) format('woff');

teilt dem Browser mit, welches Format die dekodierte Information besitzt.

font-weight: normal;
font-style: normal;

ist optional. Hier können bereits schon weitere Formatierungen gesetzt werden, die bei der Benutzung der Schriftart im generierten Prototypen angezeigt werden.

6 Base64 Code in Axure einbinden

Um diesen einzubinden musst du unter Publish > Generate HTML Files… gehen.

Publish - Generate HTML Files...

Publish – Generate HTML Files…

Danach setzt du unter dem Punkt Web Fonts den Haken bei Include Web Fonts. Mit einen Klick auf das Plus Symbol fügst du nun einen neuen Web Font hinzu.

Einen Web Font hinzufügen

Einen Web Font hinzufügen

Gib der neuen Schriftart einen treffenden Namen und wähle das Textfeld @font-face aus. Hier kannst du nun den gesamten Quellcode einfügen.

Quellcode unter @font-face einbinden

Quellcode unter @font-face einbinden

7 Mehrere Schriftarten einer Schrift

Falls nur eine Schriftart eingebunden werden soll, kannst du diesen Punkt überspringen. Oft gibt es aber zu einer Schrift unterschiedliche Schriftarten.
Wir haben uns als Beispiel die freie Schrift Source Code Pro herausgesucht. Hier gibt es unter anderen die Schriftarten Bold und Black. Sie werden jeweils wie die bereits behandelten Schritte 1-6 eingebunden. Allerdings käme es zu einer Überlagerung der Schriften, da beides Arten der Schrift Source Code Pro sind. Die Folge wäre ein formatierter Text, der nur in einer Schriftart angezeigt wird.
Eine Lösung findest du unter dem Punkt Font Mapping im Fenster Publish > Generate HTML Files…. Hier wählst du die ensprechende Schrift (in unserem Fall Source Code Pro) aus und selektiert das entprechende Typeface.
Fülle das Textfeld Font-Family mit dem zugehörigen Font-Family Namen aus dem Web Font Quellcode. Achte darauf, dass die verschiedenen Schriftarten unter Web Font auch verschiedenen Font-Family Namen besitzen. Da du die Web Font durch das Font Mappings zuordnest, kannst du die Font-Family nennen, wie du möchtest – die Benennung muss nur eindeutig sein.

Font Mapping hinzufügen

Font Mapping hinzufügen

8 Was man noch wissen sollte

Bei der Einbindung von Web Fonts kann es leicht zu Fehlern kommen. In diesem letzten Punkt wollen wir dir noch einmal einige Tipps nahelegen.

1. Vorsicht beim Verschicken der Axure-Datei!
Falls du die Axure-Datei an jemand anderes verschickst, füge die verwendete Schrift bei und informiere den Empfangenden, dass er/sie diesen Font vor dem öffnen der Datei installiert haben muss. Tut er/sie dies nicht werden alle Schriftformatierungen in der Datei durch eine andere ersetzt.

2. Überprüfe den Quellcode ganz genau.
Es kann passieren, dass beim Einfügen des Base64 Codes in das oben beschriebene Gerüst ein Zeilenumbruch oder sonstige kleine Fehler unterlaufen sind. Regel hier: alles, was in einer runden Klammer steht (bspw. src: url() ), darf keinen Zeilenumbruch haben.

3. Hast du vielleicht einen für Axure nicht-kompatiblen Schriftsatz?
Es gibt Schriften, die in Axure nicht ausgewählt werden können. Dies kommt häufig bei Fonts vor, die komplett aus Icons bestehen. Bei Diesen fehlen einige Informationen im Quellcode, sodass man die Icon-Schrift in Axure nicht auswählen oder anzeigen kann. Das tritt beispielsweise bei der Schriftart IcoMoon auf.
In diesem Fall musst du jedem Element, welches diese Schrift besitzen soll, manuell bearbeiten (oder ein konfiguriertes Element immer wieder kopieren). Hierzu wählst du das Element aus und wählst unter Widget Properties and Style den Punkt Style. Unter Font gibst du den Namen der zu benutzenden Schrift ein.

Font manuell eingeben

Font manuell eingeben

In diesem Fall wird in Axure die Schrift hinterlegt, die erst beim Laden des Prototyps in einem Browser richtig angezeigt wird.

Benutztes IcoMoon Icon in Axure

Benutztes IcoMoon Icon in Axure

 

Ein Kommentar

Iconfonts für Websites und Axure - Usabilityblog.de

[…] habe ich vor Kurzem einen genialen Trick gefunden: Die Kollegen von eparo beschreiben, wie eine Schriftart (etwa FontAwesome) per Base64-Kodierung direkt in den Prototypen […]

Kommentar schreiben

    Name
    E-Mail Adresse
    Website URL (optional)
    Kommentar