Can you add a "barcode" font family to designer and/or permit multiple fonts in forms and downloadable PDFs?

Hi,

I'm trying to build a barcode generator for a tracking system for our company's warehouse. Basically, I'm trying to build a Jotform app that we can use to create tags people can print out when they create a new container so it can be labeled with all the correct information. My idea was that when folks fill out the form, the "thank you" page after submitting would allow them to download a PDF that regurgitates the information from the form while also including the unique ID widget's number printed in Barcode font as the result. I've just been unable to customize the fonts in this way to allow for this (having both English font and this UPC-type font... one is available on Google Fonts if you can find a way to embed this).

Thanks for your help!

Sincerely,

Hannah

Hi Hannah,

Thanks for reaching out to us for help. You can use Google Fonts and we have a video guide on how to do it on this page.

It's easy to let people download their answers as a PDF after submitting your form. We’ll just add a Download PDF Button to the Thank You Page. Let me show you how:

1. In Form Builder, click on Settings in the orange navigation bar at the top of the screen.
2. In the menu on the left side of the page, click on Thank You Page.
3. Click on Action Buttons, and then select Download PDF.
4. Select your PDF Document, and then click on Create on the bottom-right side of the window.

Now, anyone filling out your form will be able to download their answers after submission:

Give it a try and let us know if you need any other help.

Hi again,

I tried the recommendations but I could not achieve the barcode font at the bottom of this PDF downloadable that happens at the Thank You screen after filling out the form. This is a screenshot of what I got when I tried to edit "Source Code" in the bottom text box - ideally this will look like a barcode in the barcode font. Can you please advice how to fix this so TicketID in this bottom (highlighted) textbox can show up as barcode font?

Thank you for your help.

Hannah

I also noticed that if I import the barcode font with the @import in Form Designer as indicated in the tutorial, ALL text will become barcodes, which is not what I want. I need to be able to use two separate fonts - a readable English font and a barcode font for different parts of this app design. Thank you for your assistance!

Sincerely,

Hannah

Hi Hannah,

Unfortunately, you cannot use custom fonts on the PDF editor. However, let us know which part of the form you want to apply the Barcode font and the form URL to check it further. You can easily find your form's URL in Form Builder. Let me show you how:

1. In Form Builder, in the orange navigation bar at the top of the page, click on Publish.
2. In the Quick Share tab, click on Copy Link in the Share With Link section.

Once you share the form URL with us, we’ll be able to help you better with this.

Here's the link you requested for the form: https://form.jotform.com/hannahstringfellow/create-ticket

The ticketID at the bottom of the form (highlighted in yellow below) is what I wish to have show up as a barcode font. Thanks for your help.

Hi Hannah,

If you want to change the Font Family of the Ticket ID. I created a guide on how to add it to your form:

1. In Form Builder, click the Form Designer icon.
   
   
2. Go to the Styles tab.
3. Paste the CSS code inside the Inject Custom CSS box. You can change the font size to your preference.
   
4. Here's the custom CSS code:

/* Paragraph field Google custom font - 26322131 */

@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39&display=swap');



span.replaceTag.\33 3_ticketId {

    font-family: "Libre Barcode 39", system-ui;

    font-size: 50px !important;

}

/* Code ends here */

You may refer to this user guide for more details on how to inject custom CSS. Here's the result of the cloned test form:

Give it a try and let us know how it goes.