How to Add Custom Fonts to the New Dubsado Form Builder
Before I get into the nitty gritty of custom fonts - allow me a moment to rant a bit about it.
I’ve noticed a lot of questions in different forums about adding custom fonts to Dubsado forms, which is why I wrote a blog post about it.
Adding your brand fonts to use in the headline and paragraph text of your forms is a great way to create consistency between your website, social media, marketing collaterals and your Dubsado forms.
I’m seeing a lot of people wanting their custom fonts in every.single.spot of their Dubsado forms. They want their custom fonts on:
Submit buttons
Contract signature
Proposal navigation bar (where it says Proposal, Contract, Invoice)
In the text clients fill out in a form
In the date select, and more
I get consistency in branding, but…
The time, energy and effort it takes to figure out how to do all of this does not match the return on investment, especially when you've never used code before.
I personally believe that adding custom fonts in all these little spots across a form does not translate into a more elevated client experience. And it also does not translate into more conversions or sales.
The reality is that clients don’t care as much as you think about these things.
To be completely honest, they won’t mind if you use the default fonts in Dubsado.
They won’t be disappointed by the fact that every single piece of text on the form they are filling out doesn’t match your brand font.
They won’t even notice or care which font you’re using in Dubsado for the contract signature.
That said. If you are using custom fonts all over your forms and the code is working and you're happy with it. Great! I’m glad you figured it out and that your forms look the way you want them to.
But if you are trying to figure out custom fonts on your own and can’t, or think you NEED custom fonts in your forms - just know that it's not a necessary thing.
Here is my advice on using custom fonts:
If adding CSS code into your Dubsado forms is too difficult or you don’t feel comfortable using code - use the fonts available in Dubsado. Pick a few font options that go well together, use them consistently throughout your form and done! Simple and easy.
If you've added your custom fonts, but it’s taking too long to figure out how to customize your fonts in every single spot on your forms and you’re getting stuck and are spiraling, keep those outliers - like the Submit button, the proposal navigation bar and others - as the default fonts. It’s OK.
Clients will sign up to work with you whether or not you have added your brand fonts to your forms.
Don't feel like you HAVE to use custom code or have bells and whistles to be successful in your business and sign clients. That's a load of 💩
People want YOU to help them solve a problem that they have. That's why they seek you out, book calls with you, sign up to work with you, give you good reviews.
It has nothing to do with some CSS code on your Dubsado form.
It's all you. Don't forget that.
** Rant over **
This blog post is for you if you’re comfortable adding code to your Dubsado forms and want to learn how to add your custom fonts to a Dubsado form for heading and paragraph text.
Let’s Make Dubsado Work for You!
🌟 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
Step 1: Host your fonts on your website
Dubsado cannot host your font files, so you need to host them somewhere else and a lot of website builders allow you to do this.
You can host your font files on Squarespace, Wordpress, Showit, etc. The objective is to host and generate a URL of your font files.
Note: If you’re using Google fonts, you can skip this step.
Tip: if you’re already hosting a custom font in your website builder and using the font in your website, you might be able to find the URL when you view the page source of your site. 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.
Step 2: Add your fonts to your Dubsado form
Now you’re adding those fonts to your Dubsado form through CSS code.
I know that adding CSS code can be a bit intimidating, but don’t worry - you’re not going to break or mess up anything.
Go to your form in Dubsado → Go to ‘Form Styling’ on the left hand menu → Scroll to the bottom and click ‘Edit CSS’
Insert the following piece of 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 text with the name of your font and the URL of your hosted font files.
Repeat the same code for all the custom fonts you will be using in your form.
NOTE: You don’t necessarily always have all the different filetypes like woff, woff2, otf, etc. That’s ok. Use what you have.
Step 2.1: Add Google Fonts to your Dubsado form
If you are using Google fonts that are not available 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');
Add that piece of code to the CSS Editor 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.
Step 2.2: 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");
Add that piece of code to the CSS Editor 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: Set your fonts
In this step you’re letting Dubsado know where to use each font you’ve added. The CSS code will let Dubsado know where to use each of the fonts and how to style each one.
Below the code you’ve already added, now insert the following piece of code with the styling details you want to use (weight, color, size, etc.):
.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 here you can 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 fonts in your form
Now that everything is set up, you can use your custom fonts in your Dubsado form.
Go to a text box and you’ll see your custom fonts in the paragraph format options.
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.
Adding your custom font to other parts of your Dubsado form
If you are determined to add your custom fonts in every little spot of your form, here’s how to do it:
First of all, check out the CSS cheat sheet for Dubsado forms. Here you’ll find the CSS code to change different pieces of font in your form.
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;
}
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