Change Print Summary image to use css and google font

  • photoguy123
    Asked on January 5, 2016 at 11:33 PM
    i would very much appreciate if you could show me how to change that image saying "Print Summary" to just use css and a google font. currently it's a larger jpg file. it seems to scale alright currently. the problem is i can't change all my headers easily if they're all individual images. thank you so much.
  • Chriistian Jotform Support
    Replied on January 6, 2016 at 1:35 AM

    Hi,

     

    To change the Header Image you have used in your form to a regular Text so you can easily edit the design of the header, just follow the instructions below.

    1. Add a Text field in your form. This will serve as your Header. 

    2. Modify the Text as desired.

    Change Print Summary image to use css and google font Image 1 Screenshot 30

    3. Import the Google Font you need. For more information, you can check this article: How to Use Google Fonts in your Form.

    4. Add custom CSS code in your form to implement the font and add background.

     

    Example:

    Import Google Font CSS code

    @import url(https://fonts.googleapis.com/css?family=Indie+Flower);

     

    Custom CSS code to design and implement the Font to the Text Field

    #text_354 {

        background: orange;

    }

    #text_354 p {

     font-family: 'Indie Flower', sans-serif;

    }

    Indie Flower is the Google Font that I have imported in the form and I have set the background to orange. Here is the sample form that I have used for testing: https://form.jotform.com/60050810623947.

    Change Print Summary image to use css and google font Image 2 Screenshot 41

    Note: In the CSS code that I have provided, I have only implemented the changes on the specific Text field. If you want to have the same design in all of your Text Field, you can replace #text_354 to .form-html in your custom CSS code.

     

    Do let us know if you need further assistance.
    Regards.