Wie kann ich eine Schriftart für meine Website auswählen?

Onepage wurde von Designern mitentwickelt und stellt dir eine Reihe von ausgewählten Schriftarten und Schriftpaare zur Verfügung. Diese Schriftarten sind so aufeinander abgestimmt, dass du immer ein schlüssiges und schönes Schriftbild mit unseren Vorlagen erhältst.

Mit Onepage bist in der Gestaltung deiner Landingpages völlig frei und kannst eigene Schriftarten aus der großen Schriftart Datenbank hinzufügen und kombinieren. So kannst du im Handumdrehen deine Landingpage auf die Corporate Identity deines Unternehmens oder deiner Kunden anpassen.

📌 Hinweis: die Schriftarten müssen für jedes Projekt separat bearbeitet werden, so dass andere Projekte nicht beeinträchtigt werden

Schriftpaar in Onepage einrichten

Schritt 1: Editor öffnen

Öffne dein Projekt und beginne mit der Bearbeitung deiner Seite.

Schritt 2: Schrifteinstellungen öffnen

Klicke unten links auf "Design" und dann auf "Schriftarten".

Hier kannst du entweder aus unseren vorgewählten Schriftpaaren wählen oder du kannst ein eigenes Schriftpaar hinzufügen, indem du auf "Schriftpaar hinzufügen" klickst.

📌 Hinweis: Du kannst auch unsere vorgewählten Schriftpaare bearbeiten. Wähle einfach zuerst das Paar aus und klicke dann auf "Schriftpaar hinzufügen".

Schritt 3: Schriftpaar einstellen

Wähle die Überschrift- und die Text-Schriftart aus.

📌 Hinweis: Du kannst bis zu 7 Schriftarten in dem Paar haben. Klicke einfach auf "Zusätzliche Schriftart ergänzen".

Schritt 4: Schrifteigenschaften bestimmen

Du kannst die Schriftart anpassen, indem du diese Parameter änderst.

Schritt 5: Speichern und aktualisieren

Bitte klicke unbedingt auf "Speichern" und "Update".

Die Schriftart im Text anwenden

Nachdem das Schriftartenpaar eingerichtet ist, kannst du die Schriftarten in deinen Texten verwenden.

Einfach den Text auswählen und eine Schriftart wählen 🙂

Externe Schriftart importieren

Die externe Schriftart muss auf einem speziellen Dienst gehostet werden. Du musst einen Link zu der Schriftart erhalten und über den benutzerdefinierten Code in Onepage einbetten.

Diese Methode ist für fortgeschrittene Benutzer, sei darauf vorbereitet, einfache Programmierung zu tun.

⚠️ Wichtig: Die Verwendung von externen Schriftarten unterliegt dem Urheberrecht und den Lizenzgesetzen.

Du bist dafür verantwortlich zu prüfen, ob du durch die Nutzung der Schriftarten gegen Rechte Dritter, wie zum Beispiel das Urheberrecht, verstoßt und dass du die entsprechenden Lizenzen oder Genehmigungen für die Verwendung von Schriftarten hast, die du in deinen Projekten verwendest.

Die Verwendung von benutzerdefiniertem Code kann die Geschwindigkeit deiner Website beeinträchtigen. Bitte auf eigene Verantwortung verwenden.

Schritt 1: Vorbereitung

Bevor du anfängst, gehe zu Onepage und wähle die Schriftart "System", sonst funktioniert der benutzerdefinierte Code nicht.

Falls gewünscht, kann man dem "System"-Schriftartenpaar noch weitere Schriftarten hinzufügen, die man dann verwenden kann. Klicke einfach auf " Schriftpaar hinzufügen".

Schritt 2: Passende Schriftart finden

Suche im Internet nach einer geeigneten Schriftart.

Hier sind einige Beispielservices:

Schritt 3: Import-URL und den Schriftnamen ermitteln

Nun muss man die Import-URL und den Namen der Schriftart von dem Drittanbieter erhalten erhalten.

Eine Import-URL ist eine Webadresse (URL), von einer Stildatei, mit der @import-Regel in dein Projekt geladen wird. Die URL verweist in der Regel auf ein externes Stylesheet, welches die Links zu den Schriftdateien enthält.

So sieht z.B. eine Import URL von Google Fonts aus. Diese Verweist auf die Schriftart "Montserrat":

https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap

Schritt 4: Custom Code vorbereiten

Du kannst bis zu 2 Schriftarten importieren.

Dies ist unser Custom Code, den du anpassen musst (Zum Erweitern klicken)

@import url("IMPORT_URL");
@import url("IMPORT_URL2");


.con-kit-page{
 --font-kit-header-font: 'FONT_NAME_HEADER', sans-serif;
 --font-kit-header-font-weight: '500';
 --font-kit-text-font: 'FONT_NAME_TEXT', sans-serif;
 --font-kit-text-font-weight: '500';
 }

 .con-kit-component-header .con-kit-quark-paragraph{
 font-weight: 500;
 }

Ersetzte den Wert IMPORT_URL durch die Import-URL, die du bereits kopiert hast. Die Anführungszeichen ("") nicht löschen.
Ersetzte den Wert IMPORT_URL2 durch eine zweite Import-URL, falls du zwei Schriftarten haben möchtest. Die Anführungszeichen ("") nicht löschen.

Ersetze FONT_NAME_HEADER durch den Namen einer Schriftart. Diese Schriftart wird für die Kopf- und Titeltexte verwendet.

Ersetze FONT_NAME_TEXT durch den Namen einer Schriftart. Diese Schriftart wird für alle anderen Texte verwendet.

Hier ist ein Beispielcode, der 2 Schriftarten von Google Fonts importiert: Amita und Laila (Zum Erweitern klicken)

@import url("https://fonts.googleapis.com/css2?family=Amita:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Laila:wght@300;400;500;600;700&display=swap");


.con-kit-page{
 --font-kit-header-font: 'Amita', sans-serif;
 --font-kit-header-font-weight: '500';
 --font-kit-text-font: 'Laila', sans-serif;
 --font-kit-text-font-weight: '500';
 }

 .con-kit-component-header .con-kit-quark-paragraph{
 font-weight: 500;
 }

Schritt 5: Code in Onepage hinzufügen

⚠️ Wichtig: Fehler im Custom Code können den Editor zum Absturz bringen. Erstelle bitte zuerst eine Kopie deines Projekts oder speichere es als Vorlage. So wird sichergestellt, dass du eine Sicherheitskopie hast.

Onepage übernimmt keine Verantwortung für Fehler, die durch Custom Code verursacht werden.

Klicke auf "Einstellungen" ➡️ " Seiteneinstellungen" ➡️ "Code" und füge den Code in den Abschnitt <Styles> ein:

Schritt 6: Speichern und Updaten.

Bitte klicke unbedingt auf "Speichern" und "Update".

Häufig gestellte Fragen und Lösungen

Ist es möglich, meine eigene Schriftart direkt auf Onepage hochzuladen?

Nein, das unterstützen wir zurzeit nicht.

Warum lädt meine Seite deutlich länger, nachdem ich die eigene Schriftart hinzugefügt habe?

Die eigene Schriftart wird von einem externen Host geladen. Je nach deiner Internetverbindung zum Host dauert es einige Zeit, bis sie geladen ist. Deshalb empfehlen wir die Verwendung eines zuverlässigen Hosts.