So verwenden Sie Google Fonts und benutzerdefinierte Schriftarten in Jotform

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

Watch on youtube

How to Use Google Fonts in Jotform

So erhalten Sie Ihren Google Fonts Import-Code

Um Ihren Google Fonts CSS-Importcode zu erstellen

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 Ihre gewünschten Schriftarten aus.

4. Wählen Sie das Raster-Symbol in der oberen rechten ecke, um das Ausgewählte Familie-Fenster zu öffnen.
5. Wählen Sie im rechten Bereich @import unter Im Web verwenden aus.
6. Kopieren Sie den Code innerhalb des style-Tags.

Beachten Sie auch die font-family-Deklaration unter CSS-Regeln zur Angabe von Schriftfamilien. Lesen Sie weiter, um zu erfahren, wie Sie die Schriftart in Ihr Formular importieren können.

Google Fonts in Ihr Formular importieren

So verwenden Sie Google Fonts in Ihrem Formular

1. Wählen Sie im Formular-Generator das Farbroller-Symbol in der oberen rechten Ecke aus.

2. Im rechten Bereich gehen Sie oben zu Stile.

3. Scrollen Sie nach unten zu Benutzerdefiniertes CSS einfügen und fügen Sie Ihnen Google Fonts Import-Code 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 mit der von Google Fonts unter CSS-Regeln zur Angabe von Schriftfamilien.

Der vollständige Code sollte in etwa wie folgt aussehen:

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

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

Verwendung von benutzerdefinierten Schriftarten, die auf Ihrem Server gehostet werden

Die CSS-Regel @font-face ermöglicht es Ihnen, Schriftarten von Ihrem Server zu laden und sie auf Ihre Formulare anzuwenden.

So verwenden Sie Schriftarten von Ihrem Server

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

@font-face {
    font-family: 'MyAwesomeWebFont';
    src: url('https://example.com/webfont.woff') format('woff'),
         url('https://example.com/webfont.ttf') format('truetype');
}
* {
    font-family: 'MyAwesomeWebFont', sans-serif;
}

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 online verfügbare Font-Face-Generator-Tool verwenden, um die Browserkompatibilität sicherzustellen.