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:

adding Google fonts to your Dubsado forms, Edit CSS in form styling Dubsado

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 */
.fr-wrapper p, .jb-form p, .text-editor p, .text-editor ol, .text-editor ul, .dubsado-form, .dubsado-form p {
font-family: ; /* your font */
color: #000!important;  /* font colour */
}

/* Paragraph Font Size */
.text-editor p {
  font-size:18px; /* font size */
  Line-height:1.6; /* paragraph spacing */
}

/* Heading 1 Font - Desktop */

.form-viewer h1 .fr-dropdown-menu h1, .dubsado-form h1, .fr-wrapper h1, .jb-form h1, .text-editor h1, .form-viewer 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) {.form-viewer h1 .fr-dropdown-menu h1, .dubsado-form h1, .fr-wrapper h1, .jb-form h1, .text-editor h1, .form-viewer h1 {
font-size: 40px; /* font on mobile size */
} }


/* Heading 2 Font - Desktop */
.form-viewer h2 .fr-dropdown-menu h2, .dubsado-form h2, .fr-wrapper h2, .jb-form h2, .text-editor h2, .form-viewer 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) {
.form-viewer h2 .fr-dropdown-menu h2, .dubsado-form h2, .fr-wrapper h2, .jb-form h2, .text-editor h2, .form-viewer h2 {
font-size: 35px; /* font on mobile size */
} }

/* Heading 3 Font */
.form-viewer h3 .fr-dropdown-menu h3, .dubsado-form h3, .fr-wrapper h3, .jb-form h3, .text-editor h3, .form-viewer h3 {
 font-family: ; /* your font */
  color:#000!important;
text-transform: uppercase; /* uppercase / capitalize */
}

/* Add Font Size & Letter Spacing Heading 3 */
.text-editor h3{
  font-size:15px!important;
    letter-spacing:2px;
}

/* Heading 4 Font - Desktop */
.fr-dropdown-menu h4, .fr-wrapper h4, .dubsado-form h4, .jb-form h4, .text-editor h4, .form-viewer h4 {
font-family: ; /* your font */
font-size: 18px!important;  /* font size */
color: #000!important;  /* font colour */
}

/* Font Size / Color / Line Height H4 Font - Desktop */
.text-editor h4{
  font-size: 18px; 
line-height: 1.4;
  color:#000!important;
}

b, strong {font-weight: 600;
} 

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

20 Free Dubsado Portal Templates for Desktop & Mobile

20 free templates to stay on brand & WOW your clients – it really does add to that 5* client experience.

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:

Adding Google Fonts To Your Dubsado Forms

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!

Customise Your Dubsado Proposals With Google Fonts
How To Add Adobe And Google Fonts To Your Dubsado Forms

Could this post help someone you know? Please share ↓

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Sarah Worboyes, Website Designer and Dubsado Strategist

Hi, I’m Sarah your WordPress Website Designer & Dubsado Specialist based in Ealing, London.

Dubsado Proposal Template Lola

shop the dubsado proposal templates

Categories

Related Posts

Grab Your 20 Free Dubsado Portal Banner Templates

EASY TO USE CANVA TEMPLATES FOR DESKTOP & MOBILE

Download now

Enter your details below to receive your link in bio template

Coming Soon

By joining the waitlist you'll be notified when this template is live & you'll receive 20% off!