h4 doesn't work on mobile

Site URL: https://shelbygatesdesign.com/branding

Hello, I added a 4th header to my site using the following code:

h4 {
font-family: 'Classico URW', sans-serif !important;
font-weight: 400;
font-size: 56px;
text-transform: none;
line-height: 3em;
color: hsl (0, 0%, 100%);
text-align: center;
}

I use h4 for the word "Branding" in the green banner at the top of the page. 

It looks great on desktop, but unfortunately my chosen font does not show up on mobile and a default sans-serif is used. How can I make h4 work on both desktop and mobile? FYI This is not a custom font—it was an option in Squarespace. 

Thank you for helping me!

15 hours ago, ShelbyGates said:

Site URL: https://shelbygatesdesign.com/branding

Hello, I added a 4th header to my site using the following code:

h4 {
font-family: 'Classico URW', sans-serif !important;
font-weight: 400;
font-size: 56px;
text-transform: none;
line-height: 3em;
color: hsl (0, 0%, 100%);
text-align: center;
}

I use h4 for the word "Branding" in the green banner at the top of the page. 

It looks great on desktop, but unfortunately my chosen font does not show up on mobile and a default sans-serif is used. How can I make h4 work on both desktop and mobile? FYI This is not a custom font—it was an option in Squarespace. 

Thank you for helping me!

Hi,

Try this new code

h4 {
    font-family: classico-urw !important;
    font-weight: 400;
    font-size: 56px;
    text-transform: none;
    line-height: 3em;
    color: #fff;
    text-align: center;
}

@tuanphan Thank you sooo much, this solved the problem! 🙂