How To Add Custom Fonts in Dubsado (Exact Code)

Making sure your project management is on point, is essential for running a successful graphic design business. Lucikly Dubsado has everything I need to make this easier. Dubsado offers a one-stop solution for automating tasks, managing clients, and organizing projects. In addition, it allows you to personalize your forms by adding custom fonts, enabling you to create a cohesive brand experience. In this blog post I will guide you through the process of adding custom fonts to your Dubsado forms.

Step 1: Prepare and Gather Font Files 

In order to follow these steps you have to have the proper font license! You will need a WebFont license for this and the file name will look like .woff and .woff2. Check out this post for more information: https://css-tricks.com/understanding-web-fonts-getting/

Step 2: Host Your Font Files

If you are using WordPress you can host your files by uploading through this plugin: https://wordpress.org/plugins/custom-fonts/

You are going to need the URLs that are generated after uploading – so keep them handy!

 Step 3: Import the Fonts Into Dubsado 

Now comes some coding… but don’t worry it is easier than it seems. You are going to want to go into your forms and then the “form styling” tab and at the bottom you will see Edit CSS. From there. you need to import the files using this code:

@font-face { 
font-family: 'Overpass'; 
src: url('https://meganweeksdesignco.com/wp-content/uploads/2022/10/Overpass-Regular.woff') format('woff'), 
url('https://meganweeksdesignco.com/wp-content/uploads/2022/07/Overpass-Bold.woff2') format('woff2'), 
url('https://meganweeksdesignco.com/wp-content/uploads/2022/10/Overpass-Regular.ttf') format('truetype');
font-weight: bold; 
font-style: bold; 
}

Step 5: Font Settings and Assign Headings

Now that the fonts are imported it is time to assign the settings and make sure they display on the front end of your forms. To do this, you need to add this code right after the previous code:

/* =========================
   FONTS STYLES
   ========================= */

.dubsado-form, .dubsado-form p {
   font-family: 'Overpass', sans-serif;
   font-weight: 400;
   font-style: normal;
   line-height: 2;
   color: #6e6e6e;
}

.dubsado-form h1  {
   font-family: 'Overpass', script;
   font-weight: 600;
   color: #000000;
   font-size: 4em;
}

.dubsado-form h2  {
   font-family: "Playfair Display", serif;
   font-weight: 600;
   color: #000000;
}

.dubsado-form h3 {
   font-family: "Poppins", serif;
   color: #000000;
}

.dubsado-form h4 {
   font-family: 'Overpass', sans-serif;
   font-style: normal;
   color: #000000;
}

b,
strong {
   font-weight: 600;
}

Step 6: Find Your Fonts in Dubsado! 

Yay! Your fonts should be available on your forms if you followed all the steps above. You will be able to find them by going to this area in your forms:

Just keep in mind that editing your text inside the text box could override your CSS code.

Hope that helps! If are you still having issues it could be any of the following issues: 

• Font names and font files are not matching in your code – make sure the spelling is spot on.
• CORS issue in WordPress. To check if this is the issue, go here on Chrome: View > Developer > JavaScript Console – if that is the issue you will need to add a line of code in your file manager.
• Dubsado requires you to have this CSS code on every form to work, so make sure that you copy it over on each one!