Jump to content

Custom Font not Displaying on Mobile

Recommended Posts

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:

image.thumb.png.f98a472ba8a6822fece6faf485d3286e.png

MOBILE:

image.png.ed4d29140e8d9d97c3ee2e6a0405e871.png

Link to comment
  • Replies 6
  • Views 921
  • Created
  • Last Reply
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?

Link to comment

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/

 

 

Link to comment

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.