-
photoguy123Asked on January 5, 2016 at 11:33 PMi 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 SupportReplied 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.
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.
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.