How To Add Custom Fonts To Dubsado

We all know the importance of staying on brand and Dubsado only has a small selection of fonts to use in their form builder but this tutorial will show you how to easily add custom fonts to Dubsado.

It’s great if your font is within this small selection of fonts within Dubsado but the chances are that it’s probably not and you more than likely have a paid custom font.

If this is the case then there is a way around adding your own custom fonts into Dubsado, although you will need a website or similar to be able to upload the font file to access your URL.

It’s actually a really simple process that sometimes is over complicated so let’s dive in…

How to add custom fonts into Dubsado forms

First off watch the video below as it will walk you through all the steps you need and below I have written out the css code for you to copy & paste into your Dubsado Code Block.

@font-face {
    font-family: 'your font';
    src: url('YOUR FONT URL') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Paragraph Font */
.fr-wrapper p, .jb-form p, .text-editor p, .text-editor ol, .text-editor ul, .dubsado-form, .dubsado-form p {

}

/* 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;
}

Replace the source URL from your media files and update the font-family in the css code.

Are you looking to start using Dubsado and want a discount of 30% off. CLICK HERE to get your discount.

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

How To Setup Group Schedulers In Dubsado

How To Setup Group Schedulers In Dubsado

Are you constantly scheduling multiple types of meetings manually? Do you have different types of calls you want leads to be able to book in for or do you have a package where you offer weekly or monthly calls and you're fed up of the back and forth of finding times...

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!