Webfonts in der Website verwenden - sgs-visual

zurück
Direkt zum Seiteninhalt

Webfonts in der Website verwenden

Viele Webseiten stellen ihre Texte in Fonts (Schrifttypen) Arial, Verdana oder Tahoma dar. Ist kein Font ausgewählt oft sogar noch in Times New Roman. Doch es gibt bereits seit einigen Jahren sogenannte Web Fonts die über Cascading Stile Sheets (kurz CSS) in einer Website verwendet werden können. Hierbei wird ein Font genauso wie Bilder in einer Website nachgeladen und somit kann man solche Fonts in einer Website anzeigen, auch wenn dieser Font nicht auf dem PC des Seitenbesuchers installiert ist (wie z.B. Arial, Verdana oder Tahoma).
Ab Version WebsiteX5 Evolution 11 kann man solche Fonts durch die Eingabe eines kurzen Codes unter "Einstellungen", "Google Fonts" verwenden. Es gibt z.Zt. mehr als 800 Web Fonts, die Google zur Verfügung stellt. Der entsprechende Code für die Nutzung (z.B. für WebsiteX5 Evolution oder Professional 11,12 oder 13) ist bei Google-Fonts nachzulesen (siehe Beschreibung weiter unten). Achtung, ab WebsiteX5 Version 14 wird es viel Einfacher ! Lesen Sie hierzu am Ende dieses Artikels weiter >>> )
@import url(http://fonts.googleapis.com/css?family=gewünschter Fontname); )
wird hier zum ausgewählten Font angezeigt. Hier findet man alle z. Zt. verfügbaren Google Fonts
Zu den Google Fonts:   https://fonts.google.com/
Und wer mehr wissen möchte besucht:  https://code.google.com/p/googlefontdirectory/
Lizenz-Informationen findet man auch hier: http://de.wikipedia.org/wiki/SIL_Open_Font_License

Hat man sich einen Font ausgesucht, muss man diesen Font aber auch auf dem eigenen PC installieren um den Font auch in WebsiteX5 schon beim Erstellen der Inhalte nutzen zu können, denn nur so kann man die Texte optimal an das Gesamtbild der Website anpassen (Fontgröße/Spaltenaufteilung etc.).
Wo kann ich Web-Fonts herunterladen ?

Unter https://fonts.google.com/  können Sie sich Ihre Fonts auswählen. Um mehr über den gewünschten Font zu erfahren klicken Sie auf den Namen des Fonts (siehe Abbildung "Google Font - Yanone Kaffeesatz"). Hier finden Sie Informationen wie schnell so ein Font geladen werden kann, wer ihn erstellt hat mit Link zur Website des Erstellers, Lizenzbedingungen und eine Möglichkeit den Font auch herunterzuladen.

Wo finde ich den @import-code?

Unter https://fonts.google.com/  finden Sie eine Auswahl von mehr als 800 Fonts, die Sie für Ihre Webseiten nutzen dürfen. Einige davon können Sie sogar frei in Ihren Print-Medien verwenden. Wählen Sie einen Font, der Ihnen zusagt und klicken Sie auf das Icon . Unten im Browserfenster öffnet sich ein schwarzer Button, auf dem Sie "1 Family Selected"  anklicken. Daraufhin öffnet sich ein Fenster mit Informationen (siehe folgende Abbildung) und Sie klicken auf "@import"
Speichern Sie sich diesen Code (blau markiert) und fügen Ihn dann unter "Einstellungen" in Ihrer WebsiteX5 Version 13 wie folgt ein.

Wie kann ich einen Google Font in WebsiteX5 nutzen?

Um einen Google Font in Website X5 (seit Version 11 implementiert) bis Version 14 verwenden zu können, müssen Sie diesen heruntergeladen haben und bereits in Ihrem Font-Ordner (Windows Betriebssystem) unter C:\Windows\Fonts installiert haben. Sie starten anschließend Ihre WebsiteX5 Software und wählen dort zuerst die "Enstellungen" (siehe Abb. links).
Es öffnet sich das "Einstellungen" - Fenster in dem man "Web-Font" auswählt. Folgen Sie den Abbildungen 2 bis 5 um einen Font einzufügen.

Jetzt geben Sie im Feld darunter (s.Abb. 4)  "@import" noch den zuvor gespeicherten Code ein und  klicken anschließend den "OK"-Button und fügen einen weiteren Web Font ein, oder laden Ihr Projekt um den Font zu Nutzen.

Und so sieht der Font Yanone Kaffeesatz als Webfont in der Seite aus... 12px
Und so sieht der Font Yanone Kaffeesatz als Webfont in der Seite aus... 14px
Und so sieht der Font Yanone Kaffeesatz als Webfont in der Seite aus... 14px / fett
Und so sieht der Font Yanone Kaffeesatz als Webfont in der Seite aus... 14px / kursiv
Und so sieht der Font Yanone Kaffeesatz als Webfont in der Seite aus... mit 24px

Ab Website X5 Evolution oder Professional 14 können Sie direkt innerhalb des Objektes "Text" jederzeit direkt einen der über 800 verfügbaren Google Web-Fonts auswählen!
Sehen Sie im Folgenden, wie das gemacht wird. Sie haben ein Objekt "Text" mit einem Doppelklick geöffnet und befinden sich bereits im "Editor". Hier markieren Sie eine Textstelle und klicken auf die Fontauswahl.
Wählen Sie hier am Ende des Listenfeldes die Option "Andere Schriftarten" aus. Im sich öffnenden Kontextmenü wählen Sie die Option "Hinzufügen".


In dem sich öffnenden Fenster "Web-Fonts hinzufügen" werden jetzt alle verfügbaren Google-Fonts gelistet und Sie können den Font direkt auswählen. Sie müssen sich nicht um Codes kümmern und können direkt weiterarbeiten. Alles weitere übernimmt die Software Website X5. Sie müssen jetzt nur noch, nachdem Sie den gewünschten Font angeklickt haben mit "OK" bestätigen und das Fenster "WebFont" mit "OK" schließen, Fertig.
Quellenangabe "Screenshots": https://fonts.google.com/ und "Screenshots" Fontimport WebsiteX5 - Software, Incomedia
website security
Letzte Aktualisierung: 06.09.2018
© Stefan G. Schiffer - sgs-visual.de 2001-2018
x5 V16.2.1 - SGS V33 - 0918
Zurück zum Seiteninhalt