How can I use a custom font in the form and a different custom font for the submit button?

I am using this code to customize the fonts in the form using the fonts from my Squarespace website.

The Rubik400 font is showing up when I embed the form but the button font is not.

@font-face {

font-family: PERULIN;

src: url(https://static1.squarespace.com/static/6467bae70f9f3a766621ad3b/t/65493335f4e85b6dc617ca5f/1699296053972/pirulen_rg-webfont.woff);}



@font-face {

font-family: Rubik400;

src: url(https://static1.squarespace.com/static/6467bae70f9f3a766621ad3b/t/66315faf1637f5409142bc99/1714511791548/rubik-regular-webfont.woff);}



.form-label.form-label-top {

  font-family : Rubik400;

}



.form-submit-button {

background: #0f213d;

color: white;

border-style: outset;

border-color: #0066A2;

height: 50px;

width: 100px;

font-family: PERULIN

text-shadow: none;

}

Update: Fixed the font issue. But the colour of the button still isn't changing. There was an error with this line:

text-shadow: none;

Hi Ontario,

Thanks for reaching out to Jotform Support. Please replace the last custom CSS code with the code below to correct the submit button color:

.form-submit-button {

    background : #0f213d !important;

    color : white;

    border-radius : 0;

    border-color : #0066A2 !important;

    height : 50px;

    width : 100px;

    font-family : PERULIN;

    text-shadow: none !important;

}

Here's a sample result:

Let us know if there's anything else we can help you with.