How to apply a custom font on JotForm?

  • Profile Image
    guyhammond
    Asked on March 08, 2017 at 12:32 PM

    I cannot get the text to italicize or bold

  • Profile Image
    AIDAN
    Answered on March 08, 2017 at 01:39 PM

    Hi, thank you for contacting us.

    Could you please provide us with more information, such as the form ID or URL, and the text element that you would like to alter the style for? That would allow us to assist you better.

    Thank you in advance. We are awaiting your reply.

  • Profile Image
    guyhammond
    Answered on March 09, 2017 at 10:36 AM
    The link is this https://form.jotform.com/guyhammond/70665139784972
    ​Can't get bold or italics to work​
    [image: photo]
    Cathy Hammond
    Senior Assistant to Guy Hammond, Executive Director, Strength in Weakness
    Phone: 705-259-3331
    Email: info@strengthinweakness.org
    Website: strengthinweakness.org
    ...
  • Profile Image
    AIDAN
    Answered on March 09, 2017 at 06:34 PM

    Hi again Cathy,

    Please note that the screenshot you tried to upload didn't go through. Could you please try to attach it again, or at least tell us which sections or which text you would like to style in bold or italic, so we can provide you with the custom CSS code required, or the steps to perform? Thank you.

  • Profile Image
    guyhammond
    Answered on March 10, 2017 at 02:46 PM
    the text I want italicized is:
    Please read the following and sign before you begin participating in any
    ...
  • Profile Image
    Kevin_G
    Answered on March 10, 2017 at 07:37 PM

    Since the font is not available in the text editor you will need to use some CSS code to apply the desired font. 

    First, you need to import the font you want to use, for Italic you could use this @font-face to import it: 

    @font-face {font-family: "Italic";

        src: url("//db.onlinewebfonts.com/t/5be1212ab488704127888816a17558b8.eot");

        src: url("//db.onlinewebfonts.com/t/5be1212ab488704127888816a17558b8.eot?#iefix") format("embedded-opentype"),

        url("//db.onlinewebfonts.com/t/5be1212ab488704127888816a17558b8.woff2") format("woff2"),

        url("//db.onlinewebfonts.com/t/5be1212ab488704127888816a17558b8.woff") format("woff"),

        url("//db.onlinewebfonts.com/t/5be1212ab488704127888816a17558b8.ttf") format("truetype"),

        url("//db.onlinewebfonts.com/t/5be1212ab488704127888816a17558b8.svg#Italic") format("svg");

    }

    You will also find more fonts on this link: https://www.onlinewebfonts.com/ 

    The next step is to get the ID of the text you want to apply the font, you will be able to do it by right clicking on the text and copying the ID of the HTML container: 

    Replace the highlighted ID from the code below with the one from your field: 

    div#text_5 p {

        font-family: "Italic";

    }

    This guide will help you to inject the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Here's the result: https://form.jotformpro.com/70687556864978 

    If you have any question, let us know. 

  • Profile Image
    guyhammond
    Answered on March 11, 2017 at 04:46 PM
    Italics and bold are not options for creating regular text within forms?
    We've used it before and it worked fine. It seems like it should be a
    pretty basic option. Is there something I've done on this form that
    disabled that option?
    [image: photo]
    Cathy Hammond
    Senior Assistant to Guy Hammond, Executive Director, Strength in Weakness
    Phone: 705-259-3331
    Email: info@strengthinweakness.org
    Website: strengthinweakness.org
    ...
  • Profile Image
    Welvin
    Answered on March 12, 2017 at 12:13 AM

    For Text field, you should be able to format the texts, bold and italic are still part of the text options. Here's a screenshot:

    For editing the field labels, you have to do it in the Advanced Designer window.

    Let us know if you need further assistance.