How to Add Custom Fonts to the New Dubsado Form Builder
Adding your brand fonts to your Dubsado forms is a great way to create consistency between your website, social media, marketing collaterals, and your Dubsado forms.
In this post, I’ll walk you through how to add your custom fonts step by step to your forms in Dubsado - whether you’re using hosted font files, Google Fonts, or Adobe Fonts.
This tutorial is for you if you’re comfortable adding CSS code to your forms and want your headline and paragraph text in Dubsado to match your brand.
🌟 Getting Started with Dubsado? Get 30% off your first month or year of Dubsado with my code EMAKATIRAEE
🎨 DIY-ing your setup? Save time with my beautiful, code-free Dubsado templates
📅 Need a pro to handle it for you? Book a free Discovery Call and get your Dubsado set up the right way!
How to add your custom fonts to Dubsado
1. Host your custom fonts
You’ll need a URL for each of your font files so you can link to them in your CSS code. Here are two ways to do this:
Option 1: Host fonts on your website
If you already have a website on Squarespace, Wordpress, Showit, or another platform, you can host your font files there. The goal is to generate a URL for each file.
Note: If you’re using Google fonts, you can skip this step.
Tip: If your custom font is already being used on your site, you might be able to find the URL in your page source. This works for Showit and some other platforms, but not all of them.
Go to your website, right click on your page and click View page source.
In the page source, click Ctrl+F and search for ttf or woff (types of font files).
Find the URL of your font file and copy that to use in Dubsado.
Option 2: Host fonts directly in Dubsado
If you don’t have a website or are having trouble finding the file URLs, you can upload your fonts right into Dubsado. Here’s how:
Create a test project in your Dubsado account
Inside the project, go to the Forms tab and select Create One-Time Questionnaire
Add a File Upload element to the new form.
Open the form and drag your font file into the upload field.
Once it uploads, right-click the file and select Copy Link Address.
Paste that URL into your Dubsado form’s CSS code using the instructions below.
That’s it! Now you have a hosted font URL you can use in your CSS code.
2. Add your custom fonts to your Dubsado form
Inside your Dubsado form, go to Form Styling → Edit CSS and paste this code:
@font-face {
font-family: 'FONT NAME’;
src: url('https://yoururl.woff') format('woff');
url('https://yoururl.woff2') format('woff2');
url('https://yoururl.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Replace the highlighted placeholders with your font name and the file URLs you hosted. Repeat for each font you want to use.
NOTE: Don’t worry if you don’t have all filetypes (woff, woff2, ttf, etc.) - use what you’ve got.
Add Google Fonts to your Dubsado form
If you are using Google fonts in Dubsado:
Go to https://fonts.google.com/ and search for the font you are using.
Click on the font and scroll down to ‘Styles’ and find the style of the font you want to use in Dubsado (regular, italic, etc.)
Click ‘Select’ on the style you want (it’s a plus sign on the right hand side)
At the very top right of your screen, click ‘View Selected Families’
Click @import and copy the embed code without the <style> tags:
@import url('https://fonts.googleapis.com/css2?family=xxxx:wght@xxxx&display=swap');
Paste it into the CSS code of your Dubsado form.
📌 Tip: If you’re using both custom fonts AND Google fonts, I’ve learned through experience that the Google font import code needs to be placed FIRST inside the CSS code area for the fonts to work.
Copy the code for your Google font to use in Dubsado
Add Adobe Fonts to your Dubsado form
If you are using Adobe fonts in Dubsado:
Go to https://fonts.adobe.com/fonts/ and search for the font you are using. Keep in mind that you need an Adobe Creative Cloud subscription for this.
Follow the instructions from Adobe to create a web project with your fonts.
Generate the embed code for your Adobe fonts and copy the embed code without the <style> tags:
@import url("https://use.typekit.net/xxxxxxx.css");
Paste it into the CSS code of your Dubsado form.
Note: If you click the Adobe font typekit link you’ll see the details of your fonts (font family, src url, font format, etc), and instead of using the import code you can also use the url of the Adobe font instead and add it into Dubsado like the fonts in Step 2.
3. Assign your custom fonts
Now you’ll tell Dubsado where to use your fonts and add styling details for each one (weight, color, size, etc.).
Add CSS like this under your @font-face or @import code:
.dubsado-form h1 {
font-family: 'FONT NAME', serif;
font-weight: 400;
color: #000000;
font-size: 48px;
}
.dubsado-form h2 {
font-family: 'FONT NAME', sans-serif;
font-weight: 300;
color: #000000;
font-size: 36px;
}
.dubsado-form h3 {
font-family: 'FONT NAME', serif;
font-weight: 400;
color: #000000;
font-size: 24px;
text-transform: uppercase;
}
.dubsado-form h4 {
font-family: 'FONT NAME', sans-serif;
font-weight: 300;
color: #000000;
font-size: 18px;
}
.dubsado-form p {
font-family: 'FONT NAME', sans-serif;
font-weight: 300;
color: #000000;
font-size: 14px;
line-height: 1.4;
}
Replace the font names with the fonts you’ve already added, and assign weight, color, size, line height, and transform text as needed.
You don’t need to use all of h1, h2, h3, h4 and p fonts. You can remove the ones you won’t be needing from your code.
4. Use your custom fonts in Dubsado forms
Once your CSS code is in place, your fonts will appear in the text box format dropdown inside your form editor. You can apply them to text boxes or clear existing formatting and reapply.
Keep in mind that you can still use other font styles in your text box by selecting them in the text box menu. You’re not limited to the fonts and styles that you added in the code.
If you’ve already added and styled text in your form that you want to apply your custom fonts to, simply select the text in the text box and clear the formatting using the eraser icon in the menu. Then you can select the text and use the paragraph format options to assign your custom fonts and styles.
Optional: Custom fonts in other areas
Want to go further and style buttons, tabs, or navigation bars? Use the Dubsado CSS cheat sheet to find selectors.
For example, if you want to change the font of the proposal navigation tabs, in the cheat sheet you’ll find this piece of code:
.client-view-tabs {}
What do you do with this?
Using the code they’ve provided you can assign a font for the proposal navigation tab.
In this case, I want the proposal navigation tab to match my paragraph font. I use the same code I used above for .dubsado-form p inside the brackets of .client-view-tabs. Like this:
.client-view-tabs {
font-family: 'FONT NAME', sans-serif;
font-weight: 300;
color: #000000;
font-size: 14px;
line-height: 1.4;
}
My honest thoughts about custom fonts in Dubsado
Allow me two seconds to rant a bit about custom fonts.
I’ve noticed a lot of people getting caught up in wanting their custom fonts everywhere — on submit buttons, contract signatures, navigation bars, even date pickers.
The truth? It’s usually not worth the time and energy, especially if you are new to code and feel overwhelmed by how to customize your fonts.
Clients don’t care nearly as much as you think. They won’t notice (or mind) if your submit button doesn’t use your exact brand font. They hire you because of the problem you solve, not the CSS code on your form.
If your custom fonts are set up everywhere in Dubsado and it works — amazing! But if you’re stuck, here’s my advice:
If adding CSS code to your forms feels too difficult, just use the fonts available in Dubsado. Choose a couple that look good together, use them consistently, and you’ll still have a professional, polished form that will help you book clients.
If you’ve added your custom fonts but you’re spiraling because you can’t get every tiny detail styled — like the submit button or navigation bar — give yourself permission to let Dubsado’s default fonts do their job. It won’t hurt your client experience or your ability to book clients.
At the end of the day, clients want you to solve their problem. That’s why they book, pay, and refer you. It has nothing to do with whether your date picker is in your brand font. That pressure? Total 💩
Don’t forget: clients are choosing you.
Rant over.
Streamline Your Business with Dubsado
🌟 Get 30% off your first month or year of Dubsado with my code EMAKATIRAEE
🎨 Save time with my stunning & ready-to-use Dubsado templates
📅 Book a Free Discovery Call and get your Dubsado set up the right way from the start!
Tutorial: Using custom fonts in the new Dubsado form builder
This tutorial will take you through everything in this blog post: adding your font files into Dubsado and setting up fonts in your form.
Do you need help setting up Dubsado?
If you need help and want to work with an expert, let’s talk.
In a Dubsado setup, I build all the workflows and assets needed to deliver your client process in Dubsado. From inquiry to offboarding, I can set it up to automate tasks to help you save time so you can focus on what you do best.
Book a free consult and let’s chat and see if a Dubsado setup is right for your business 👉 Schedule your call