webgo Hilfe-Center

Häufige Fragen, von Experten beantwortet

Import von eigenen Schriftarten vornehmen

Mit dem webgo Homepage-Baukasten, können Sie nicht nur die vorinstallierten Schriftarten (Fonts) verwenden, Sie können auch eigene Schriftarten verwenden.

Bitte beachten Sie, dass dies voraussetzt, dass Sie den Entwicklermodus ("</>" Symbol oben links in der Leiste neben "Vorschau") aufrufen können. Der Entwicklermodus ist ab dem Profi Paket des webgo Homepage Baukastens auswählbar. CSS Kenntnisse erforderlich!

Auf das richtige Format achten!

Um eigene Schriftarten hochladen zu können, müssen diese im .ttf, .eot und .svg Format vorliegen. Sollte dies nicht der Fall sein, müssten Sie Ihre Datei in ein solches Format konvertieren. Dies können Sie mit unterschiedlichen Generator Tools, wie z.B. dem "FontSquirrel" vornehmen.

Im Anschluss können Sie die Schriftart in Ihren webgo Homepage-Baukasten integrieren. Die Schriftarten können Sie wie folgt hinzufügen:

Eigene Schriftarten mit einem Link uploaden - so geht's:

Entweder Sie haben bereits einen Link zur Schriftart (dann gehen Sie zu Schritt 2) oder Sie können auch über Ihren webgo Homepage-Baukasten einen Link für Ihre Schriftart erzeugen.

Schritt 1: Link erzeugen

Zum generieren eines Downloadlinks gehen Sie bitte wie folgt vor:
Links in der Menüleiste, auf "Inhalt", anschließend auf "Seiteninhalt" und nun auf "Dateien verwalten".

 

Nun öffnet sich ein neues Fenster. Klicken Sie links in dem Fenster auf "Neue Datei". Hier können Sie die genannten Dateien hochladen. Hierfür klicken Sie auf "Wählen", während Sie mit der Maus über der gewünschten Schriftart sind. Nun wird ein "Download Button" erstellt.Die Datei ist nun hochgeladen und Sie können "Datei herunterladen".

Machen Sie einen Rechtsklick auf diesen erzeugten Button und klicken auf "Gehe zu Link". Nun haben Sie den Link zur hochgeladenen Datei Ihres Homepage-Baukastens.

Sie haben nun einen Link für Ihre Schriftart erzeugt. Speichern Sie Ihn sich kurz ab oder lassen das Browserfenster geöffnet.

Beachten Sie bitte, dass Sie dies 3x für jedes Dateiformat  .ttf, .eot und .svg durchführen müssen! 

Schritt 2: Schriftart hinzufügen per Entwicklermodus

Klicken Sie nun auf den Entwicklermodus ("</>"-Button oben rechts neben "Vorschau").

Fügt dort folgenden Code ein:

@font-face {

font-family: 'FONT-NAME';

src: url('URL') format('embedded-opentype'),

url('URL') format('svg#FONT-NAME'),

url('URL') format('truetype');

font-weight: normal;

font-style: normal;

}

Gehen Sie auf den Schriftarten Ordner und oder der von FontSquirrel angebenen Stylesheet Datei und tragen in der Zeile "font-family" den Namen/die Bezeichnung Ihrer Schriftart ein. Ersetzen Sie dies durch den im Code angegebenen "FONT-NAME" (2x).

Nun müssen Sie nur noch "URL" (3 Mal! 1x .eot Link, 1x .svg Link, 1x .ttf Link) durch die (zuvor erzeugten und gespeicherten) Links ersetzen.

Das Ergebnis sollte so aussehen:

@font-face {

font-family: 'ihreSchriftart';

src: url('https://irp-cdn.multiscreensite.com/666643dd/files/uploaded/ihreSchriftart.eot') format('embedded-opentype'),

url('https://irp-cdn.multiscreensite.com/666643dd/files/uploaded/ihreSchriftart.svg') format('svg#ihreSchriftart'),

url('https://irp-cdn.multiscreensite.com/666643dd/files/uploaded/ihreSchriftart.ttf') format('truetype');

font-weight: normal;

font-style: normal;

}

Klicken Sie nun auf "Speichern" (oben rechts neben Vorschau).

 

Kehren Sie nun zum Baukasten zurück indem Sie den Entwicklermodus schließen und machen Sie einen Rechtsklick auf das Textelement, welches Sie editieren wollen. Klicken Sie hier auf "HTML/CSS bearbeiten" (siehe Screenshot).

Sie können dann die neue Schriftart auf Widgets in allen Geräten (Allgemeines CSS für alle Geräte) oder in bestimmten Geräteansichten (Gerätespezifisches CSS) mit dem CSS-Snippet in folgender Form anwenden:
font-family: 'FONT-NAME' !important;.
Beispielsweise haben wir für unser Beispiel diese CSS-Codezeile hinzugefügt:

font-family: 'ihreSchriftart' !important;

Auf diese Weise können Sie die Schriftart auf Absätze, Überschriften usw. anwenden. Wenn Sie benutzerdefinierte Schriftarten auf die Textelemente in der Kopfzeile anwenden möchten, tun Sie dies bitte im Entwicklermodus.

 

Wir hoffen Ihnen konnte dieser Artikel weiterhelfen! Sollte dies nicht der Fall sein wenden Sie sich gerne an den Support per Mail, Live-Chat oder Telefon.
Mehr Infos und Kontaktdaten unter: www.webgo.de/support

Für Verbesserungen oder Vorschläge für weitere FAQ Themen schicken Sie uns eine Mail an faq@webgo.de

Tags: Homepage Baukasten

webgo Experten-Support

365 Tage im Jahr für Sie da!

040/605900399 Telefon-Support
Persönlich erreichbar: Montag–Freitag: 9–20 Uhr, Samstag, Sonntag und Feiertags: 11–18 Uhr