The Ultimate Guide to Adding Custom Fonts to Dubsado Forms
Tell me if this sounds familiar. You’ve rebranded your business and found the perfect typeface to complement your visual identity. Next, you begin building your website only to find out that your host doesn’t offer the font that you need. Bummer. Instead of finding a solution, you find the next best thing. In this case, the closest match to your ideal font.
Or let’s say your host integrates with the type foundry you purchased or license from. Great! No more second fiddle fonts. But now you head over to Dubsado and run into a similar font issue when designing your forms. Oh good, another participation award to the runner-ups of fonts! In this tutorial, you will learn the following:
How to add Google Fonts to your forms.
How to add Adobe Fonts to your forms.
How to add Custom fonts to your forms.
Interested in updating all of your form’s buttons without having to fuss with code? Check out our FREE Fonts, Buttons & General Styles plugin!
While Dubsado offers several free commercial fonts to choose from, it can be limiting at times. Especially when embedding a form on your website and wanting everything to look like it’s housed under one roof. I’m a visual artist with a background in design. Whether it’s branding, hand lettering or calligraphy, I’m working with letterforms every day. My enthusiasm for design—especially when it relates to my branding experience—shows through when there’s consistency and cohesion.
Whatever your situation may be,
Don’t do your brand a disservice.
Don’t pick through a bunch of hackneyed fonts that don’t translate well with your identity system.
Do purchase the necessary license to display your webfont.
Do your brand identity the justice it deserves.
With Dubsado’s HTML block and a little bit of CSS, you should have no problem displaying your fonts beautifully within the dropdown menu of a Text block.
With so many fonts to choose from, selecting the “right” one for your brand can be an overwhelming process. If you’ve already established your fonts, feel free to skip ahead to the code. If you don’t have a system in place, now would be a good time to sort that out.
I won’t get into what makes a good font or how to pair a typeface based on your visual identity. Hopefully, this was decided and communicated by your designer prior to delivering your brand assets. I will, however, advise that you use fonts built for the web and maintain readability. The last thing you want is for your leads to give up on you because they’re having a hard time reading your proposal!
Before you begin, make a note of the fonts you currently use throughout your brand’s identity system. This includes your body font (your primary typeface that will be used for the bulk of the text), and then your h1, h2, h3 and finally h4 fonts. These are your headings where h1 is the most important and h4 the least.
Adding Custom fonts to your Dubsado form
Using custom fonts is a great way to show off the unique typeface you’ve selected to represent your brand. Adding them to Dubsado will make the transition from your website to a form seamless, and that’s what we want!
Setting up your font files
Hopefully, when you purchased your fonts, the folder you downloaded came with a webfont file. This is different than a desktop version, so it’s important to make sure you have the correct file to use when hosting your fonts.
If you only have desktop versions, there are resources to convert your files to webfonts using free generators like Font Squirrel or Transfonter. At the very least, make sure you have a .woff or .woff2 file extension of the font for modern browsers. For older browsers and better compatibility, .otf, .eot and .ttf files will work great.
Hosting your fonts files
In order for your fonts to work, you’ll need to make sure the files are hosted somewhere since Dubsado doesn’t allow for uploading these type of files. A great place to start is your website!
More than likely, your website will allow you to host your files since you’re already paying for their service.
Importing your font files to Dubsado
Once you’ve uploaded your files on your website, you’re ready to add them to Dubsado. Open up the form you want to add your fonts to, then head to the “Form styling” icon on the left panel. Click this and scroll down to the “Edit CSS” button. Once you click this button you should see a black box ready for your CSS code. Copy and paste the following into the box:
/* IMPORT CUSTOM FONTS */
@font-face {
font-family: 'YOUR FONT NAME HERE';
src: url('YOUR .WOFF FONT FILE URL HERE') format('woff'),
url('YOUR .WOFF2 FONT FILE URL HERE') format('woff2'),
url('YOUR .TTF FONT FILE URL HERE') format('truetype');
font-weight: normal;
font-style: normal;
}
Update your font-family name where you see YOUR FONT NAME HERE (e.g., 'Vesterbro').
Paste your font URL you copied from your website where you see YOUR FONT FILE HERE (e.g., 'https://static1.squarespace.com/static/t/1685738544453/Vesterbro.woff')
If you don’t have other font files, delete the lines starting with url('…
If you have more than on custom font to upload, copy and paste the line starting with url('… and make sure the format matches the extension at the end of your URL.
Styling your custom fonts
Now that you have set up, hosted and imported your fonts into Dubsado, it’s time to start styling them! Since Dubsado offers us five different typography styles (Normal, Heading 1, Heading 2, Heading 3, and Heading 4), we want to set up our CSS code to reflect this.
In the same CSS box where you imported your fonts, copy and paste the below CSS, directly beneath the code you added above.
/* STYLE FONTS */
/* Normal */
.dubsado-form p {
font-family: 'YOUR FONT NAME HERE', sans-serif;
color: #333; /* Update font color */
font-size: 16px; /* Update size of font (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
font-weight: 400; /* Update weight of font (e.g., 300, 400, 500, etc.) */
letter-spacing: 0em; /* Update horizontal spacing between text characters (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
line-height: 1em; /* Update distance between lines of text (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
text-transform: none; /* Choose between “uppercase,” “lowercase,” “capitalize,” or “none” */
font-style: normal; /* Choose between “normal” or “italic” */
}
/* Heading 1 */
.dubsado-form h1 {
font-family: 'YOUR FONT NAME HERE', sans-serif;
color: #333;
font-size: 26px;
font-weight: 600;
letter-spacing: 0.03em;
line-height: 1.8em;
text-transform: capitalize;
font-style: normal;
}
/* Heading 2 */
.dubsado-form h2 {
font-family: 'YOUR FONT NAME HERE', sans-serif;
color: #6e6e6e;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1.2em;
text-transform: capitalize;
font-style: normal;
}
/* Heading 3 */
.dubsado-form h3 {
font-family: 'YOUR FONT NAME HERE', serif;
color: #6e6e6e;
font-size: 24px;
font-weight: 400;
letter-spacing: 0.03em;
line-height: 1.2em;
text-transform: uppercase;
font-style: italic;
}
/* Heading 4 */
.dubsado-form h4 {
font-family: 'YOUR FONT NAME HERE', sans-serif;
color: #333;
font-size: 18px;
font-weight: 600;
letter-spacing: 0em;
line-height: 1em;
text-transform: uppercase;
font-style: normal;
}
Update each Heading’s font-family where you see YOUR FONT NAME HERE.
Be sure the name of the font matches the name you gave it in the first code.
Go through each line and update the value as needed (see commented text in the first declaration block of the CSS for reference).
Be sure to have at least one, if not several, fallback fonts for each element in case the browser doesn’t recognize or support the primary font you’ve chosen (e.g., font-family: 'Open Sans', arial, sans-serif; where “arial” and “sans-serif” are your fallback or “web safe” fonts).
Adding Google Fonts to your Dubsado form
If you’d like to utilize Google Fonts, feel free to select from hundreds of options over here. They even suggest popular font pairings to make it easier for you! You can use them wherever and however you’d like without restrictions under the Open Font License (OFL).
Once you’ve gone through and selected your Google fonts, you’ll want to copy either the <link> code or the @import code (linking is usually the standard and recommended, but either option will work).
If you’re using the <link> code
Add an HTML block to the top of your form then delete the example code.
Copy the <link> code from Google Fonts, then head back to your Dubsado form and paste the code into the HTML block.
If you’re using the @import code
Go to “Form styling” > scroll down > click the “Edit CSS” button.
Copy the @import code from Google Fonts, then head back to your Dubsado form and paste the code into the CSS block.
Make sure you’re pasting this code at the very top of your CSS, above all other CSS code.
Remove the style tags that wrap the code (delete <style> at the beginning of the @import code and </style> at the end.
For example this:
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>will look like this instead:
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
Styling your Google Fonts
Now that you’ve added either the linked or imported font code, it’s time to start styling them! Since Dubsado offers us five different typography styles (Normal, Heading 1, Heading 2, Heading 3, and Heading 4), we want to set up our CSS code to reflect this.
In the same CSS box where you imported your fonts, copy and paste the below CSS, directly beneath the code you added above.
If you linked your Google fonts using an HTML block, go to “Form styling” > scroll down > click the “Edit CSS” button. Then copy and paste the following CSS into the CSS box:
/* STYLE FONTS */
/* Normal */
.dubsado-form p {
font-family: 'YOUR FONT NAME HERE', sans-serif;
color: #333; /* Update font color */
font-size: 16px; /* Update size of font (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
font-weight: 400; /* Update weight of font (e.g., 300, 400, 500, etc.) */
letter-spacing: 0em; /* Update horizontal spacing between text characters (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
line-height: 1em; /* Update distance between lines of text (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
text-transform: none; /* Choose between “uppercase,” “lowercase,” “capitalize,” or “none” */
font-style: normal; /* Choose between “normal” or “italic” */
}
/* Heading 1 */
.dubsado-form h1 {
font-family: 'YOUR FONT NAME HERE', sans-serif;
color: #333;
font-size: 26px;
font-weight: 600;
letter-spacing: 0.03em;
line-height: 1.8em;
text-transform: capitalize;
font-style: normal;
}
/* Heading 2 */
.dubsado-form h2 {
font-family: 'YOUR FONT NAME HERE', sans-serif;
color: #6e6e6e;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1.2em;
text-transform: capitalize;
font-style: normal;
}
/* Heading 3 */
.dubsado-form h3 {
font-family: 'YOUR FONT NAME HERE', serif;
color: #6e6e6e;
font-size: 24px;
font-weight: 400;
letter-spacing: 0.03em;
line-height: 1.2em;
text-transform: uppercase;
font-style: italic;
}
/* Heading 4 */
.dubsado-form h4 {
font-family: 'YOUR FONT NAME HERE', sans-serif;
color: #333;
font-size: 18px;
font-weight: 600;
letter-spacing: 0em;
line-height: 1em;
text-transform: uppercase;
font-style: normal;
}
Grab the CSS rules to specify families over on Google.
Replace each Heading’s font-family where you see font-family: 'YOUR FONT NAME HERE', sans-serif; with the rules you copied over on Google.
Go through each line and update the value as needed (see commented text in the first declaration block of the CSS for reference).
Adding Adobe Fonts to your Dubsado form
If you have an Adobe Creative Cloud subscription, you can even add Adobe Fonts to your Dubsado form! It’s likely that you have Web Projects already set up if you’re using Adobe Fonts for your website. If you don’t, creating Web Projects is fairly easy.
Creating a Web Project
When you sign into your Adobe Creative Cloud, you can start off by selecting the font(s) you want to use on your Dubsado form by either searching for a specific font or browsing all fonts. Once you find your font, you’ll click on the code icon (</>) next to the name:
You’ll then see a dialog that gives you the option to create or add the font to an existing project. Click on the drop down and select “+ Create a new project.” Give your project a name (e.g., “Dubsado Forms”) and click “Create.”
The next dialog will show options to either link or import the code. Click “Done” for now. Continue adding more fonts to this same Web Project by going through and applying them as needed using the same method above.
Once you’re finished adding all your fonts to your Web Project, head to the top right corner—just under your profile avatar—and click “Manage Fonts” > “Web Projects.”
This will open up a list of all your Web Projects starting with the latest one you created for your Dubsado forms. You’ll then see “Embed Project” where you’ll have two options to add the font(s) from your Web Project to your Dubsado form.
If you’re using the <link> code
Add an HTML block to the top of your form then delete the example code.
Copy the <link> code from Adobe Fonts, then head back to your Dubsado form and paste the code into the HTML block.
If you’re using the @import code
Go to “Form styling” > scroll down > click the “Edit CSS” button.
Copy the @import code from Adobe Fonts, then head back to your Dubsado form and paste the code into the CSS block.
Make sure you’re pasting this code at the very top of your CSS, above all other CSS code.
Remove the style tags that wrap the code (delete <style> at the beginning of the @import code and </style> at the end.
For example this:
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>would look like this instead:
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
Once you’ve added either the import or link code to your Dubsado form, click “Edit Project” next to the Web Project. A list of your fonts will be revealed. Make sure you go through and tick the box next to the font name that you want to include.
Styling your Adobe Fonts
Since Dubsado offers us five different typography styles (Normal, Heading 1, Heading 2, Heading 3, and Heading 4), we want to set up our CSS code to reflect this.
In the same CSS box where you imported your fonts, copy and paste the below CSS, directly beneath the code you added above.
If you linked your Adobe Fonts using an HTML block, go to “Form styling” > scroll down > click the “Edit CSS” button. Then copy and paste the following CSS into the CSS box:
/* STYLE FONTS */
/* Normal */
.dubsado-form p {
PASTE YOUR CSS HERE
color: #333; /* Update font color */
font-size: 16px; /* Update size of font (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
letter-spacing: 0em; /* Update horizontal spacing between text characters (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
line-height: 1em; /* Update distance between lines of text (you can update the unit to use either “px,” “em,” “rem,” “%,” or “pt”) */
text-transform: none; /* Choose between “uppercase,” “lowercase,” “capitalize,” or “none” */
}
/* Heading 1 */
.dubsado-form h1 {
PASTE YOUR CSS HERE
color: #333;
font-size: 26px;
letter-spacing: 0.03em;
line-height: 1.8em;
text-transform: capitalize;
}
/* Heading 2 */
.dubsado-form h2 {
PASTE YOUR CSS HERE
color: #6e6e6e;
font-size: 20px;
letter-spacing: 0.03em;
line-height: 1.2em;
text-transform: capitalize;
}
/* Heading 3 */
.dubsado-form h3 {
PASTE YOUR CSS HERE
color: #6e6e6e;
font-size: 24px;
letter-spacing: 0.03em;
line-height: 1.2em;
text-transform: uppercase;
}
/* Heading 4 */
.dubsado-form h4 {
PASTE YOUR CSS HERE
color: #333;
font-size: 18px;
letter-spacing: 0em;
line-height: 1em;
text-transform: uppercase;
}
Go back to your Web Project and click the “Copy CSS” button for each font you want to add to your Dubsado form.
Replace each Heading’s font-family where you see PASTE YOUR CSS HERE with the code you copied from your Web Project.
Go through each line and update the value as needed (see commented text in the first declaration block of the CSS for reference).
Things to note
In order for your typography to update, you’ll want to add a Text Box to your Dubsado form. Go through and highlight the text within the Text Box and click on A (Formatting Options) > Paragraph Format > then select the typography you want to use.
At times, you might notice your font isn’t pulling through, even after you apply a typography. This is because Dubsado’s text editor has weird formatting that won’t apply. To fix this you can either add a fresh Text Box or you can select all of your text within the Text Box and click Formatting Options > Clear Formatting (button all the way to the right).
You can update ALL of your Dubsado button fonts utilizing the instructions above along with this tutorial.
