Google Web Fonts in NOF einbinden

[nettesekel]

Google WebFonts in NetObjects Fusion (NOF) einbinden


Warum Schriften einbinden? Was soll das?

Ein wesentliches Gestaltungselement beim Erstellen einer Website ist die verwendete Schriftart. Auf unseren PCs haben wir eine ganze Menge solcher Schriften und können uns gestalterisch so richtig austoben. Häufig kommt dann jedoch das böse Erwachen, wenn man seine liebevoll gestaltete Seite auf dem PC eines Freundes oder auf der Arbeit aufruft und plötzlich alles in Times New Roman angezeigt wird, statt in der tollen Schrift, die da doch eigentlich zu sehen sein müsste.
Der Grund dafür ist Folgender: Wenn wir unsere Schrift formatieren, dann wird in einer Styledatei (CSS) oder direkt im Quelltext die von uns eingestellte Schriftart vermerkt, damit der Browser “weiß”, welchen Absatz er in welcher Schriftart darstellen soll. Steht im Quelltext unserer Seite, dass der Text auf der Startseite in der Schriftart ‘Metrophobic’ angezeigt werden soll, dann greift der Browser auf die auf unserem Computer installierten Schriften zu, damit eine entsprechende Darstellung möglich ist.  Betrachtet nun jedoch ein User unsere Website, der die gewählte Schriftart nicht auf seinem System installiert hat,
dann kann diese Schriftart natürlich nicht dargestellt werden. Damit der vorhandene Text jedoch für jedermann lesbar ist, wählt der Browser eine Alternativschrift (family) aus.  Um solche Probleme zu vermeiden, war es lange Zeit ratsam sich für Standardschriften zu entscheiden, die auf jedem System vorhanden sind. (Bsp.: Arial, Verdana) Um dennoch ein wenig gestalten zu können, behalf man sich hier und da, indem man eine ausgefallene Schriftart per Grafik ausgegeben hat.
Dies ist zwar optisch eine gute Lösung, für Suchmaschinen allerdings völlig uninteressant, die "lesen" nämlich keine Bilder.


Die google WebFonts schaffen hier schnell und unkompliziert Abhilfe. Google WebFonts “ersetzt” quasi die fehlenden Systemschriften unserer Seitenbesucher.

Und so geht man vor, wenn man die google WebFonts in seinem NOF-Projekt nutzen möchte.
Unter http://www.google.com/webfonts findet Ihr die Google Web Fonts. Weil nicht jeder Font jedes Zeichen unterstützt, solltet Ihr, wie im nächsten Screenshot zu sehen ist, zunächst einen eigenen Beispielstext mit Umlauten und “ß” eingeben, um zu testen, ob euer Wunschfont diese darstellen kann.
 



Nun suchen wir uns einen Font aus, der uns für unser Projekt zusagt und die gewünschten Anforderungen erfüllt. Zu jeder Schriftart findet Ihr verschiedene Buttons, so auch den Button Quick-use. Diesen klicken wir nun im nächsten Schritt an.




Und gelangen danach zu der folgenden Ansicht. Hier interessieren uns nun die zwei von mir rot gekennzeichneten Bereiche.
Zunächst kopieren wir uns den Codeschnipsel aus dem rot markierten Bereich 1 in die Zwischenablage. Es ist darauf zu achten, dass der komplette Code in der Zwischenablage liegt und nicht unvollständig kopiert wird. Mit dem Code in der Zwischenablage wechseln wir nun zu NetObjects Fusion und öffnen das gewünschte Projekt.




In der Seitenansicht drücken wir auf der Tastatur die Taste F10, wodurch die Master-Rahmen-Eigenschaften aufgerufen werden.
Auf der Eigenschaftenpalette klicken wir nun den html-Button und fügen den Code aus der Zwischenablage im sich öffnenden Fenster zwischen den head-Tags ein. In den älteren NOF-Versionen aktivieren wir im geöffneten Fenster hierfür den entsprechenden Reiter, in den neueren Versionen klicken wir das entsprechende Icon am oberen Fensterrand um den Cursor an der passenden Stelle zu aktivieren. Das alles könnt Ihr dem folgenden Screenshot nochmal anschaulich entnehmen.




Als nächsten kopieren wir uns auf google WebFonts den Codeschnipsel aus dem rot markierten Bereich 2 in unsere Zwischenablage und wechseln wieder zurück zu NetObjects Fusion.
Hier gibt es nun verschiedene Möglichkeiten den Codeschnipsel unterzubringen. Welche Möglichkeit Ihr nutzen möchtet, ist davon abhängig, in welchem Bereich eurer Website Ihr den Font einsetzen wollt.

Beispiel 1: Ihr möchtet den Font standardmäßig im gesamten Projekt verwenden.
Dazu ruft Ihr in NOF die Designansicht auf und fügt den kopierten Codeschnipsel in die Eigenschaften für den Haupttext ein.
Im folgenden findet Ihr jeweils einen veranschaulichenden Screenshots zur Vorgehensweise in älteren und neueren NOF-Versionen.
 

 








Wollt Ihr den Font nur für Eure H-Tags, also Überschriften nutzen, dann geht Ihr genauso vor wie in den letzten Screenshots zu sehen, nur markiert ihr zu Beginn dann den entsprechenden H-Tag, der formatiert werden soll.




Eine andere Möglichkeit ist, die Google-Fonts in Formatvorlage (CSS-Klassen) zu verwenden. In den folgenden Screens demonstriere ich, wie man eine Formatvorlage erstellt und dieser den Google-Font mitgibt.
 










Das wars eigentlich auch schon. Sobald Eure Formatvorlage zum Einsatz kommt, werden die formatierten Bereiche den Google-Font darstellen. Lasst Euch bitte nicht davon irritieren, wenn Ihr den Font in NOF nicht direkt sehen könnt. Die Informationen zum Font kommen über das Internet, deshalb muss die Seite zunächst einmal publiziert werden (lokal reicht) bei bestehender Internetverbindung ruft Euer Browser die Informationen zur Schriftart ab und Ihr könnt Euer Werk bewundern.

Viel Spaß! :-)