How To Host And Upload 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 and the best part is you don’t even need a website to do it.

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

How to add your font into Dubsado

Firstly, if you don’t have a website or if you are struggling with getting the font onto your website then no to worry. We are going to use Dubsado to host the custom paid font.

If you are using Google or Adobe fonts then these are self hosted so please read this blog post instead.

Step One: Create a questionnaire with a file uploader button.

Step Two: Create a new test project > go to Projects tab > New Project

Step Three: Add the questionnaire you just created into the forms tab, open the questionnaire and upload your font files – make sure these are WOFF + WOFF2 files – if not then use https://transfonter.org to convert the files.

Step Four: Right click on the fonts you have uploaded and get the link address which will look a bit like this: https://res.cloudinary.com/dubsado/raw/upload/v1724935465/66d06d2998b942003a37113b_HopelessRomanticSociety.woff2

to get the link address you need to make sure you aren’t right clicking on the text but next to the text – it will look like this – select copy link address

Converting your font files & getting your font-face code

If you haven’t got the right font files then not to worry – use the website below to convert the files and you will also get a folder with all the docs you need.

https://transfonter.org

Here is the code you’ll need to implement into your Edit CSS button in Dubsado

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

/* Paragraph Font */
.dubsado-form p {

}

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

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 30% off your first month or year and don’t forget to check out my Dubsado proposal templates – easy to use & even easier to customise with your brand.