How To Add Adobe And Google Fonts To Your Dubsado Forms

If you’re a service-based business owner looking to spruce up your Dubsado forms, you’ve come to the right place.

In this blog post, I’ll walk you through the seamless integration of Adobe and Google fonts into your Dubsado forms, ensuring that every proposal, questionnaire, and lead capture form reflects your unique brand identity. If you are a css novice, then not to worry, this guide is designed with simplicity in mind for those who appreciate aesthetics but adore efficiency.

Get ready to give your forms a facelift with a font flair that resonates with your brand’s voice!

Watch The Full CSS Tutorial On Adding Your Google Fonts To Dubsado Forms

Step 1: Where To Add The CSS

All you need to do is open up your Dubsado form, whether it be a lead capture, proposal or questionnaire, then head over to Form Styling > Edit CSS:

Step 3: Adding The CSS

Make sure to copy the below code and paste it into the “Edit CSS” button under the form styling.

/*==== Uploading Google/Adobe Fonts ====*/

/*==== Customising Fonts ====*/

/* Paragraph Font */
.dubsado-form p  {
font-family: ; /* your font */
color: #000!important;  /* font colour */
}


/* Heading 1 Font - Desktop */

.dubsado-form h1 {
font-size: 65px; /* font size on desktop*/
line-height:1.1;
     font-family: ;
  color:#000!important;
  letter-spacing:0px; /* space between letters */
}


/* Heading 1 Font - Tablet & Mobile */

@media only screen and (max-width: 767px) {.dubsado-form h1 {
font-size: 40px; /* font on mobile size */
} }


/* Heading 2 Font - Desktop */
.dubsado-form h2 {
 font-family: ;
  color:#000!important;
font-size:55px; /* font size on desktop*/
line-height:1.1;
}

/* Heading 2 Font - Tablet & Mobile */
@media only screen and (max-width: 767px) {
.dubsado-form h2  {
font-size: 35px; /* font on mobile size */
} }

/* Heading 3 Font */
.dubsado-form h3 {
 font-family: ; /* your font */
  color:#000!important;
text-transform: uppercase; /* uppercase / capitalize */
}

/* Heading 4 Font - Desktop */
.dubsado-form h4 {
font-family: ; /* your font */
font-size: 18px!important;  /* font size */
color: #000!important;  /* font colour */
}


b, strong {font-weight: 600;
} 

h1, h2, h3, h4, h5 {
margin:15px 0px;
}

Step 3: Adding Google Fonts / Adobe Fonts

Now that you’ve added the css to target the correct CSS Classes we need to embed the code from Google to use the fonts.

Go to https://fonts.google.com/ and choose your brand fonts or decide which fonts are closest to your brand fonts. There are over 1,500 open-source and free fonts to choose from.

1. Select your font
2. Click on ‘Get Font’
3. Click ‘<> Get Embed Code’
4. Under the ‘Web’ tab copy the <link> code
   • the code will look like this <link rel=”preconnect” href=”https://fonts.googleapis.com”> <link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin> <link href=”https://fonts.googleapis.com/css2?family=Junge&family=Rosarivo:ital@0;1&display=swap” rel=”stylesheet”>
5. Go back into the Dubsado form and add a HTML code block into the main section of the form
6. Paste in the <link> javascript – don’t worry this won’t be shown on the Dubsado form to the client it will be hidden
7. Next copy the @import code, don’t not copy the <style> tags only copy the code that starts with @import and ends with )
8. Paste the @import code into the ‘Edit CSS’ button in the Form Styling Section within the Dubsado form builder. This needs to be added underneath the heading /==== Uploading Google/Adobe Fonts ====/
   • Important: Make sure to add a ; after the ) – so it’s looks a bit like this @import url(‘https://fonts.googleapis.com/css2?family=Junge&family=Rosarivo:ital@0;1&display=swap’);
9. Now it’s time to customise the CSS below with your font-family.

Step 4: Adding Your Font-Family To The CSS

You need to add your font-family to every CSS Class – so this would be your p, h1, h2, h3, h4.

Your font family CSS will look something like this in Google:

Copy the font-family, font-weight and font-style into the appropriate classes in the edit css tab.

Final Thoughts

And there you have it—a straightforward guide on how to integrate both Adobe and Google Fonts into your Dubsado forms, taking personalization to the next level. Remember, the key is in the details: coding the CSS provided and embedding your preferred fonts with the Javascript and `@import` code from Google. By enhancing your forms with a touch of typographic flair, you not only elevate the user experience but also underscore your brand’s unique identity.

Don’t shy away from experimenting to discover the combinations that best align with your brand’s vibe. And always, aim for consistency across all your materials, be it forms, your website, or marketing collaterals, to solidify your visual message.

Now that you’re armed with this knowledge, why wait? Start creating your beautifully customized forms today and watch how a simple change in font can make a world of difference in how clients engage with your brand.

If you have tips, tricks, or questions, feel free to drop them in the comments – we’re here to help each other grow. Happy designing!