Custom CSS to change style of H4 not showing on mobile devices

Hi, 

I have added the following custom CSS to my site to change the H4 to a different font and styling:

h4{
  font-family:'Brandon Grotesque';
  font-weight:600;
  line-height:1.8em;
  font-style:normal;
  letter-spacing:0.2em;
  text-transform:uppercase;
}

It is working perfectly on my desktop for both the web and mobile view but when i view it on my mobile device it is not pulling through with the custom font.  Any ideas on what i can do to fix this?

Thank-you!

Can you share your website URL? What device are you experiencing the issue on?

Hi, 

Sure it's: https://beccacherry.com/

The issue is on an iphone.

Thanks

It worked! Thanks so much for your speedy help.😊

6 minutes ago, acherrylife said:

It worked! Thanks so much for your speedy help.😊

Happy to help, thanks for marking my post as the solution!

I seem to be having the same issue,

On 5/3/2024 at 7:53 AM, ElizaAudreyS said:

I seem to be having the same issue,

My custom font (T-Star) appears to be working on my desktop but when i preview it on my iphone it is not working and appears as a different font. How can i fix this? I have copied and pasted my custom font code below:

 

@font-face

{ font-family: ‘tstar’;

src: url(https://static1.squarespace.com/static/65effac229233b5507fbdd10/t/65f405fe8351ba4a3b854cb8/1710491134228/TSTAR-Regular.ttf); }
h1 {font-family: 'tstar';}
h2 {font-family: 'tstar';}
h3 {font-family: 'tstar';}
h4 {font-family: 'tstar';}
p1 {

font-family: 'tstar';}

.sqsrte-large {

font-family: 'tstar';}
p2 {

font-family: 'tstar';}

.sqsrte-small {

font-family: 'tstar';}
p3 {

font-family: 'tstar';}

.sqsrte-small {

font-family: 'tstar';}
monospace {font-family: 'tstar';}

Please check again