Custom Font not Displaying on Mobile

Site URL: https://lykopis.com/

Hi there

I am hoping someone can help us to get our custom font that shows correctly on desktop to also display on mobile.

We have custom font implemented using CSS for 2 sections:

1. Header 1

2. Cover Page Header

DESIGN >CSS

//ADD BOLTON FONT//
@font-face {    
font-family: 'BOLTON';       
src: url(  }https://static1.squarespace.com/static/5cb57d98d74562986f6b14cf/t/601d08fa707518709464c14c/1612515578387/Bolton.ttf)format('BOLTON');
}

//APPLY BOLTON FONT TO HEADER 1//
h1 {font-family: 'BOLTON' !important;
}

COVER PAGE > ADVANCED > CSS

<style>
h1#sqs-slash-page-header {
    font-family: 'BOLTON' !important;
}
</style>

DESKTOP:

MOBILE:

I suggest you use the Squarespce Font Alice, very close to Bolton,  for your site, it will show up on mobile in place of what is there now I think, it certainly will if you use it instead of a custom Font. 

Thanks for the suggestion.

Unfortunately we are not able to go that route, as the font is specific to our branding across all marketing, merch, etc.

Alice doesn'quite match and neither does SS Times New Roman.
Hopefully this code wil do it. 

/* Mobile */
.mobile-site-title a {
    font-family: Bolton;

11 minutes ago, derricksrandomviews said:

Alice doesn'quite match and neither does SS Times New Roman.
Hopefully this code wil do it. 

/* Mobile */
.mobile-site-title a {
    font-family: Bolton;

Thank you. Unforutnately no such luck. I tried applying this to both the custom CSS and cover page CSS.

Is this meant to update both Header 1 and the Cover Page title?

When it  is a s 7.0 cover page, Custom CSS, applied in the custom css window,  does not appy to it, but code still woks when applied to the page.  I had snow falling on mine for the holidays and like you just tried, I put it on the page itself, but I had a fit getting it to work. This Custom font upgrade will take a bit of help from other coders who are better than me I think. 

This may help you, With cover pages, my research finds no special instructions just for mobile. 

https://hyggedesign.co/custom-font-squarespace-cover-page/

You need  to insert all code to Cover Page Header.'

Code  in Custom CSS won't run on Cover Page

<style>
  @font-face {
  	font-family: BOLTON;
    src: url(paste font file url here);
  }
  h1#sqs-slash-page-header {
    font-family: BOLTON !important;
}
</style>