How to Add Custom Fonts to Dubsado Forms
Last Updated December 2025
If Dubsado's default fonts aren't cutting it for your brand, you're not stuck with them. With a little CSS, you can pull in your own fonts and have your forms looking like a natural extension of your website.
In this post, I'll walk you through how to add custom fonts to your Dubsado forms step by step - whether you're using hosted font files, Google Fonts, or Adobe Fonts.
Heads up: This guide involves adding CSS to your forms, so it's best suited for business owners who are comfortable (or at least curious) working with a bit of code.
How to Add Your Custom Fonts in Dubsado
Step 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
Note: If you’re using Google fonts, you can skip this step.
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.
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.
Step 2: Add Your Custom Fonts to Your Dubsado Form
Inside your form, open 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, the Google Font import code needs to go first in the CSS area - otherwise the fonts won't load.
Copy the @import code from Google Fonts - without the style tags - and paste it into your Dubsado form's CSS
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.
Step 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.
Step 4: Use Your Custom Fonts in Dubsado Forms
Once your CSS is in place, your fonts will show up in the text box format dropdown inside the form editor. To apply them, either select your text and choose the font from the dropdown, or clear any existing formatting first using the eraser icon and then reapply.
Once your CSS is saved, your custom fonts will show up in the format dropdown inside the form editor
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.
Tutorial: Using custom fonts in Dubsado Forms
This tutorial will take you through everything in this blog post: adding your font files into Dubsado and setting up fonts in your form.
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're newer to code and the whole thing already feels overwhelming.
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.
Frequently Asked Questions
Can I use Google Fonts in Dubsado?
Yes! Go to fonts.google.com, select the font and style you want, and grab the @import embed code. Paste it into the CSS area of your Dubsado form - just make sure it goes first if you're also using custom hosted fonts.
Do I need to know how to code to add custom fonts to Dubsado?
You need to be comfortable copying and pasting CSS, but you don't need to write it from scratch. The code snippets in this post are ready to use - you just replace the font name and URL with your own.
Where do I find the CSS editor in Dubsado forms?
Open your form in edit mode, then go to Form Styling → Edit CSS in the left panel.
Can I use Adobe Fonts in Dubsado?
Yes, as long as you have an Adobe Creative Cloud subscription. Create a web project in Adobe Fonts, generate the @import embed code, and paste it into your form's CSS.
What font file types does Dubsado support?
Dubsado works with woff, woff2, and ttf files. You don't need all three - just use whichever file types you have available.
Does adding custom fonts affect how my forms look on mobile?
Your CSS applies across devices, so whatever fonts and sizes you set will show on mobile too. It's worth previewing your form on a smaller screen after adding your CSS to make sure your font sizes still look good.
Need help with your Dubsado setup?
Getting the fonts right is one piece of the puzzle. If you want your whole Dubsado system set up properly - forms, workflows, automations, the works - that's what I do.
Book a free Discovery Call and let's talk about what your setup needs.