How to import import the font Libre Barcode 39?

Hi,

I would like to import the font "Libre Barcode 39" into JotForm.

Can you create me the CSS code, so I can simply plug and chug?

Thank you so much!

Best,

Hi FoodBankofEasternOklahoma, 

Thanks for reaching out to Jotform Support. You can easily Import and Use Google Fonts into your form. Let me walk you through it:

1. First, copy this code:

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

* {

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

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

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

Hi, thanks for the quick response!

The code works great. However, I might have left out some key details.

I would like to apply the font to a specific widget, the short text widget, not the whole JotForm.

Is this something that I can do? I think we can apply CSS codes to widgets, but not all of them. I couldn't figure out how to apply the code to the short text widget.

Looking forward to your response!

Best,

Hi FoodBankofEasternOklahoma,

If you'd like to apply the font on the whole field then you'll need to use the field ID in the code as you can see in the example below:

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

#id_5 {

font-family: 'Libre Barcode 39', system-ui !important;

}

Check the screencast below to see how you can find the field ID:

If you prefer to apply the font in the input section of the Short Text field only then you can use the following CSS:

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

#input_6 {

font-family: 'Libre Barcode 39', system-ui !important;

}

Check the screencast below to see how you can find the field input ID:

If you prefer to apply the font to the label of the Short Text field only, then you can use the following CSS:

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

#label_7 {

font-family: 'Libre Barcode 39', system-ui !important;

}

Check the screencast below to see how you can find the field label ID:

You can check the result in this demo form and the screenshot below:

Let us know if you need any other help.

Just one more ask!

We are using this form to create invoices, and we would like the bar code to show up on the invoice, which is the PDF copy of the JotForm. The issue is that there are 22 font families and I am not sure if we can import the Libre 39 font code into the PDF editor.

Can we import the Libre 39 code into the PDF editor within JotForm similar to how we imported it within the JotForm CSS?

Hi FoodBankofEasternOklahoma,

Unfortunately, Jotform PDF Editor does not support importing custom fonts like Libre Barcode 39 in the same way you can import fonts via CSS in the Form Builder. The PDF Editor has a limited set of font families (around 22) available for use, and it does not currently allow adding or importing external fonts such as Google Fonts or custom web fonts.

This means that while you can style your form fields with Libre Barcode 39 using CSS in the Form Builder, the same font cannot be directly applied to the PDF invoice generated by Jotform's PDF Editor.

If you want the barcode to appear on the invoice PDF, you might consider generating the barcode as an image within the form and then including that image in the PDF. This approach ensures the barcode displays correctly on the PDF regardless of font limitations.

I've created a demo form here, that you can check out. As you can see, this workaround does require some extra fields to generate a barcode image from QuickChart, and display it inside of a Paragraph element. Feel free to submit this form, and then on the Thank You page you can download the PDF as well, to see how the Paragraph element looks there.

Check out the screenshot below to see my result:

Let us know if you want more detailed steps for setting this up if this workaround suits your needs.

Thanks for the reply! Could you explain in a little more detail?

Hi FoodBankofEasternOklahoma, 

Sure, here's how the workaround Lars suggested for displaying a barcode on the invoice PDF works. We'll use QuickChart to dynamically generate the barcode image. The barcode will be created using the following URL format:

https://quickchart.io/barcode?type=code39&text={BARCODE_VALUE}

In this URL, replace {BARCODE_VALUE} with the actual data from one of your form fields. This makes the barcode unique for each submission. To set this up, we will use multiple fields such as a Short Text field for the Short Text fields for the part of the link that won't change and the Dynamic value, a Form Calculation field to combine the base link with the dynamic value, a Long Text field to generate the image link and a Paragraph field to display the QR code as image. Let me walk you through it step by step:

To add a Short Text field:

1. In Form Builder, click on the Add Form Element menu and drag-drop two Short Text fields and a Long Text field to your form.

2. Click on the Type a Question text and change it to the question you want to use.

For the Base URL Short Text field, we can add the base link as a default value to automate the process. Let's do it:

1. Copy the link below:

https://quickchart.io/barcode?type=code39&text=

2. Select your Short Text field and click the Gear icon.

3. Go to Advanced tab and paste it on the Default Value section.

Then we can use a Form Calculation field to combine the Barcode Value field and Base URL:

1. While in Form Builder, click on Add Element on the left side of the page.
2. In the Form Elements menu, under the Widgets tab, scroll down the list and choose the Form Calculation widget.
3. Now, just drag and drop it to your form.

4. Set the formula like this:

Now, let's set up the conditions:

1. In Form Builder, in the orange navigation bar at the top of the page, click on Settings.

2. Click on Conditions on the left of the page.

3. Now, click on Add a New Condition and then click on Update/Calculate Field.

4. Set the conditions like you see below:

Lastly, we can display the generated image link on a Paragraph field:

1. In Form Builder, click on Add Element and choose the Paragraph field.
2. Now, just drag and drop it to your form.
3. Select the Pencil icon and add the Image Link field.

Doing so, you will be able to display the generated barcode on your PDF using the Paragraph field. Also, it's important to know that the barcode value can only contain digits, capital letters, spaces and the symbols -.$/+%. Take a look at the screenshot below to see my results:Give it a try and let us know how it goes.

This was so helpful. Thank you!