So verwenden Sie Google Fonts und benutzerdefinierte Schriftarten in Jotform

Neben integrierten Schriftarten unterstützt Jotform auch CSS-At-Regeln wie @import und @font-face. Sie können damit benutzerdefinierte Schriftarten von Google Fonts oder Ihrem Server auf Ihre Formulare anwenden.

Watch on youtube

Google Fonts-Importcode abrufen

So generieren Sie Ihren Google-Fonts-CSS-Importcode

1. Öffnen Sie Google Fonts und suchen Sie nach einer Schriftart.
2. Wählen Sie eine Schriftart aus den Ergebnissen aus.

3. Scrollen Sie nach unten zu Stile und wählen Sie die gewünschten Schriftstile aus.

4. Wählen Sie das Rastersymbol oben rechts aus, um den Bereich Ausgewählte Familie zu öffnen.
5. Wählen Sie im rechten Bereich unter Im Web verwenden die Option @import aus.
6. Kopieren Sie den Code innerhalb des style Tag.

Beachten Sie außerdem die font-family‑Deklaration unter CSS-Regeln zur Angabe von Familien. Lesen Sie weiter, um zu erfahren, wie Sie die Schriftart in Ihr Formular importieren.

Google Fonts in Ihr Formular importieren

So verwenden Sie Google Fonts in Ihrem Formular

1. Wählen Sie im Formular-Builder das Farbroller-Symbol oben rechts aus.

2. Gehen Sie im rechten Bereich oben zu Stile.

3. Scrollen Sie nach unten zu Benutzerdefiniertes CSS einfügen und fügen Sie Ihren Google-Fonts-Importcode in Zeile 1 ein.

4. Fügen Sie den folgenden Code direkt nach der Importregel ein:

* {
font-family: 'MyWebFont', sans-serif;
}

5. Ersetzen Sie die font-family‑Deklaration durch die von Google Fonts unter den CSS-Regeln zur Angabe von Familien.

Der vollständige Code sollte ungefähr wie folgt aussehen:

@import url('https://fonts.googleapis.com/css2?family=Charm&display=swap');
* {
font-family: 'Charm', cursive;
}

6. Betrachten Sie Ihr Formular im Vorschau– oder Live-Modus, um die Änderungen zu sehen.

Benutzerdefinierte Schriftarten vom Server verwenden

Mit der CSS-Regel @font-face können Sie Ihre Schriftarten vom Server laden und auf Ihr Formular anwenden. Formulare.

So verwenden Sie Schriftarten von Ihrem Server

1. Laden Sie Ihre Schriftartdateien per FTP oder cPanel auf Ihren Server hoch.
2. Kopieren Sie den folgenden CSS-Code:

@font-face {
Schriftfamilie: 'MeineTolleWebSchriftart';
src: url('https://example.com/webfont.woff') format('woff'),
url('https://example.com/webfont.ttf') format('truetype');
}
* {
Schriftfamilie: 'MeineTolleWebSchriftart', serifenlos;
}

3. Fügen Sie den Code in Ihr Formular ein.
4. Ersetzen Sie die src-Werte im Code durch die URL und das Format Ihrer Schriftart.

Für den CSS-Code können Sie jedes verfügbare Online-Tool zur Schriftartengenerierung verwenden, um die Browserkompatibilität sicherzustellen.