Guide de l'utilisateur JotForm / Comment créer de meilleurs formulaires /

Comment Utiliser les Polices Google et les Polices Personnalisées dans Votre Formulaire

Comment Utiliser les Polices Google et les Polices Personnalisées dans Votre Formulaire

Outre les polices intégrées, JotForm prend également en charge At-rules (par exemple: @importand, @font-face). Vous pouvez les utiliser pour importer vos polices personnalisées à partir de Google Fonts ou de polices hébergées sur votre serveur.

Importer des polices à partir de Google Fonts

  1. Obtenez votre code d'importation Google Fonts sur https://fonts.google.com/
    1. Recherchez et sélectionnez une police.
      Google Fonts - Search and Select
      Google Fonts - Search and Select
    2. Choisissez les styles que vous souhaitez utiliser.
    3. Sélectionnez "@import" dans Use on the web section.
    4. Copiez le code @import fourni.
      Google Fonts - Import Code
  2. Revenez au Générateur de formulaire sous l'onglet Styles et assurez-vous de coller le code d'importation au-dessus au-dessus de tous les codes CSS existants que vous pourriez avoir.
  3. Injecter du CSS personnalisé
    Inject Custom CSS
  4. Pour appliquer les polices importées dans votre formulaire, utilisez simplement la propriété font-family.
  5. Vous pouvez utiliser le code suivant:

    .form-all *{
        font-family: 'Raleway', sans-serif;
    }

    Remplacez Raleway par votre nom de Polices Google. Ou, vous pouvez revenir à Google Fonts où vous avez copié votre code d'importation. Vous verrez la propriété font-family avec le nom de la police dedans.

    Font Family
    Font Family

    Vous pouvez le copier et le coller dans la classe .form-all.

Utilisez des Polices Personnalisées Hébergées À Partir de Votre Serveur

Vous pouvez utiliser l'exemple de code suivant et le coller dans le Générateur de formulaire. Après cela, remplacez les valeurs requises, par ex. le nom de font-family et la source de la police. Ou, pour la compatibilité du navigateur, vous pouvez générer vos codes @font-face à l'aide de cet outil: https://transfonter.org/.

Example:

@font-face {
     font-family: myFirstFont;
     src: url(https://www.yoursite.com/fonts/coolfont_bold.woff);
     font-weight: bold;
}
.form-all *{
     font-family: 'myFirstFont', sans-serif;
}

Font Face

Font Face

Si vous avez des questions, postez-les ci-dessous.

Envoyer un commentaire