Custom CSS Header Font Not Working On Mobile

Hello!

My site uses a custom font for headers and paragraph text. The font appears correctly when I'm editing my site on my desktop, and also when viewing my website via the domain on my desktop. However, only the header text is not appearing correctly when viewed on a mobile.

My custom CSS is below — 

Custom Font IvyPresto Display Thin

font-face {
font-family: 'IvyPresto Display Thin';
src: url('https://static1.squarespace.com/static/6501fd49530fb566bc4ecbe3/t/65034db60ffe84528cbc19ee/1694715318831/IvyPrestoDisplay-Thin.otf');
}

h1 {
font-family: 'IvyPresto Display Thin';
}

h2 {
font-family: 'IvyPresto Display Thin';
}

h3 {
font-family: 'IvyPresto Display Thin';
}

h4 {
font-family: 'IvyPresto Display Thin';
}

Could anyone help troubleshoot what the issue might be?

Custom CSS for my paragraph font is here, below, which does work oddly!

Custom Font Nimbus Sans D OT

font-face {
font-family: 'Nimbus Sans D OT';
src: url('https://static1.squarespace.com/static/6501fd49530fb566bc4ecbe3/t/65034dcc8b47326782bfc322/1694715340998/NimbusSansDOT-Ligh.otf');
}

p1 {
font-family: 'Nimbus Sans D OT';
}

p2 {
font-family: 'Nimbus Sans D OT';
}

p3 {
font-family: 'Nimbus Sans D OT';
}

p4 {
font-family: 'Nimbus Sans D OT';
}
 

Photos are attached of desktop version in which the header text appears correctly, and mobile version where it is replaced with default style text.

Thank you all kindly for your help!!

Karlene

Ziggy — you are a dream! Your edits worked beautifully. Thank you so much. Really appreciate your time!

Karlene

1 minute ago, KindKarlene said:

Ziggy — you are a dream! Your edits worked beautifully. Thank you so much. Really appreciate your time!

Happy to help! Can you mark my post as the solution to your question and give it a like? Thanks!

Yes, absolutely — will do!

I did have a code that removed underlines from hyperlinks, which is now not working. Any idea why? Do you know of a code that can do that?

1 minute ago, KindKarlene said:

I did have a code that removed underlines from hyperlinks, which is now not working. Any idea why? Do you know of a code that can do that?

Did you remove any code when pasting in the corrected CSS?

Typically this is all you need to globally remove hyperlink underlines for text:

a {
  text-decoration: none !important;
}

That's what I had but it doesn't seem to be working. I'm not sure it's a huge deal, but I did prefer it without the underlines. Sorry for being complicated 🙃

Can you share your website URL and a page that has hyperlinks with the underlines visible?

It may be that you have other errors in your Custom CSS, could you post that all in here so I can check it for you?

Of course! My website URL is https://www.karlenebaskindid.com/

And my Custom CSS (probably riddled with errors — I'm a designer, not a coder!) is —

// Custom Font IvyPresto Display Thin

@font-face {
  font-family: 'IvyPresto Display Thin';
  src: url('https://static1.squarespace.com/static/6501fd49530fb566bc4ecbe3/t/65034db60ffe84528cbc19ee/1694715318831/IvyPrestoDisplay-Thin.otf');
}

h1, h2, h3, h4 {
  font-family: 'IvyPresto Display Thin';
}

Custom Font Nimbus Sans D OT

@font-face {
font-family: 'Nimbus Sans D OT';
src: url('https://static1.squarespace.com/static/6501fd49530fb566bc4ecbe3/t/65034dcc8b47326782bfc322/1694715340998/NimbusSansDOT-Ligh.otf');
}

p1 {
font-family: 'Nimbus Sans D OT';
}

p2 {
font-family: 'Nimbus Sans D OT';
}

p3 {
font-family: 'Nimbus Sans D OT';
}

p4 {
font-family: 'Nimbus Sans D OT';
}

//Remove Link Underline
a {
  text-decoration: none !important;
}

/* Change Line Color */

.sqs-block-horizontalrule hr {

 background: #EFEEEC;

}

a {
text-decoration: none !important;
}

header a {
background-image: none !important;
}

.html-block blockquote {
  border-left: 4px solid #EFEEEC;
  padding: 1px 10px 1px 20px;
}

/***************************************
Styling changes to Form
***************************************/
.form-wrapper .field-list {
 .title {
   /* Title of field (eg Name, Subject, Message) */
   font-size: 14pt;
 }
 .description {
   /* Description */
   font-size: 20pt;
 }
 .field {
   .caption {
     /* Captions of fields (eg First Name, Last Name) */
     font-size: 16pt;
     .field-element {
       /* Text in the field boxes (First Name, Last Name) */
       font-size: 20pt;
     }
   }
   .field-element {
     /* Text in the field boxes (inc placeholder text) */
     font-size: 14pt;
     /* Shading colour of all boxes */
     background: #F9FFE5;
   }
 }  
}

I've tried to correct it all here:

// Custom Font IvyPresto Display Thin

@font-face {
  font-family: 'IvyPresto Display Thin';
  src: url('https://static1.squarespace.com/static/6501fd49530fb566bc4ecbe3/t/65034db60ffe84528cbc19ee/1694715318831/IvyPrestoDisplay-Thin.otf');
}

h1, h2, h3, h4 {
  font-family: 'IvyPresto Display Thin';
}


//Custom Font Nimbus Sans D OT

@font-face {
  font-family: 'Nimbus Sans D OT';
  src: url('https://static1.squarespace.com/static/6501fd49530fb566bc4ecbe3/t/65034dcc8b47326782bfc322/1694715340998/NimbusSansDOT-Ligh.otf');
}

// Paragraph 1
.sqsrte-large {
  font-family: 'Nimbus Sans D OT';
}
// Paragraph 2
p {
  font-family: 'Nimbus Sans D OT';
}
// Paragraph 3
.sqsrte-small {
  font-family: 'Nimbus Sans D OT';
}

//Remove Link Underline
a {
  text-decoration: none !important;
  background-image: none !important;
}

header a {
  text-decoration: none !important;
  background-image: none !important;
}


// Change Line Color

.sqs-block-horizontalrule hr {
  background: #EFEEEC;
}

.html-block blockquote {
  border-left: 4px solid #EFEEEC;
  padding: 1px 10px 1px 20px;
}


// Styling changes to Form

.form-wrapper .field-list {
  .title {
    /* Title of field (eg Name, Subject, Message) */
    font-size: 14pt;
  }
  .description {
    /* Description */
    font-size: 20pt;
  }
  .field {
    .caption {
      /* Captions of fields (eg First Name, Last Name) */
      font-size: 16pt;
      .field-element {
        /* Text in the field boxes (First Name, Last Name) */
        font-size: 20pt;
      }
    }
    .field-element {
      /* Text in the field boxes (inc placeholder text) */
      font-size: 14pt;
      /* Shading colour of all boxes */
      background: #F9FFE5;
    }
  }  
}

You managed to make sense of my nonsense, and successfully did it! 

You are an angel. I can't thank you enough!

Just now, KindKarlene said:

You managed to make sense of my nonsense, and successfully did it! 

You are an angel. I can't thank you enough!

You're very welcome! Thanks for the solution and like!