I know the frustration of designing a beautiful form, only to find that you can’t fully match your brand as you’re stuck with Dubsado’s built-in fonts. It can feel disjointed when someone visits your beautiful website and then when they click through to your proposal it’s as though it is a completely different business. Whilst Dubsado does add new fonts, waiting for your brand’s font to be installed could take a lifetime. Luckily for you, it’s actually really easy to install custom fonts into your Dubsado forms. So what are you waiting for? Let’s make your Dubsado forms and proposals match your brand!

This tutorial is going to focus on adding Google fonts to your forms, if you’ve got your own custom fonts you’d like to install, check out this tutorial!

Just a note before we start, you may find in the edit mode of Dubsado the fonts aren’t working. However, they should show in the preview mode.

Step 1: Pick out your fonts

If you’ve already chosen your fonts for your brand you can skip this step. If not, head to Google fonts and pick some out!

I’ve chosen Poiret One as my font for this example! Depending on which version of Google fonts you’re viewing, you’ll either want to select your font using the red plus in the righthand corner, or you’ll need to select the font, then click select this style.

Step 2: Embed your fonts

Next you’ll want to copy the embed font code and add it to your Dubsado form! Again, depending on the version of Google Fonts you’re on, the way to find this code varies slightly.

You may see a pop-up with your selected fonts at the bottom of your screen. If not, click the ‘view your selected families’ button at the top of the page. That’s the 3 squares and a + icon. Either way, click the part which says embed, this will display the code you need to copy.

You may notice that there are two options for how to embed your Google Fonts: <link> or @import. In Dubsado, it’s best to use the import code.

Once you’ve got your code, , it will look similar to this:

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,500;1,700&family=Prata&display=swap');

You can now add this code to a code block in your Dubsado form. As this is HTML code rather than CSS, the code should be outside of any <style></style> tags.

Step 3: Assign your fonts

Now that your fonts are installed in your Dubsado account, you’ll need to tell your form where to display your fonts! Copy the CSS code below into a code block and get styling!

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

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

.dubsado-form h1  {
	font-family: 'prata', serif;
	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: 'Homemade Apple', cursive;
	font-style: normal;
	color: #000000;
}

b,
strong {
	font-weight: 600;
}

The code above will style your tags within Dubsado’s formatter, as well as in any HTML code you in custom code blocks.

Step 4: Using fonts within Dubsado’s native text boxes

Now that your fonts are installed and set up, you can use them within Dubsado’s native text boxes.

Once you’ve added in your text box you can apply your styles using the Formatting Options > Paragraph Format.

Any additional formatting you apply within the textboxes will override your CSS styles. So if you’d like to use the paragraph and heading styles, it’s a good idea to clear any default formatting such as font face, size and colour. You can do this with an easy click of a button –Formatting Options > Clear All Formatting.

Step 5: Using fonts within code blocks

Once your font is imported and CSS font code is added, you can also use it within code blocks to define fonts within HTML elements. For example, anything you wrap in <h1> tags, will automatically take your H1 style.

<h1 >This is a heading 1 with custom font - Poiret</h1>

You may also want to assign a font to a class. This code would target any element with the class Poiret.

.poiret { 
font-family: 'Poiret One', cursive; 
}

To display the font using the above class code you can simply add a code block with and assign any HTML the class. 

<h1 class="poiret">This is a custom font - Poiret</h1>

<p class="poiret">This is a custom font - Poiret</p>

Step 6: Fall Back Fonts

It’s good practice to include at least one fall-back font. If for some reason a browser cannot use your font, they will use the fallback fonts specified.

For example, this code below will first try to use Poiret One, if it can’t it will then try to use Open Sans, and then Arial. If it cannot use any of those fonts, it will default to the browser’s default sans-serif font. Sans-serif simply means fonts without the decorative serifs.

.dubsado-form h1 {
font-family: ‘Poiret One’, Open Sans, Arial, sans-serif;
}

Step 7: Font Sizes

There are two kinds of sizing options, absolute (px) and relative. It tends to be better to use relative sizing as your fonts will adapt based on the screen size. For that reason, I tend to use relative sizes as my size measure.

There are a number of relative sizing options, here are a few:

• em – 1 em is equal to 1x the default browser font size
• vw – browser width
• vh – browser height

For more information on sizing, this W3Schools article is a great place to start!

Things to know

• Dubsado requires you to add your custom code to each and every form. I recommend setting up a reference form that you can duplicate or copy and paste code from each time you need to add a new form.
• As a general rule, for SEO reasons, your headings should decrease in size and importance from H1 > H6.
• You may find in the edit mode of Dubsado the fonts aren’t working. However, they should show in the preview mode.