Jump to content

Custom CSS Header Font Not Working On Mobile

Go to solution Solved by Ziggy,

Recommended Posts

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

885F4BC4-B34C-47B9-A77D-EC2490F48A8B.jpeg

Screenshot 2023-09-27 at 10.12.08 AM.png

Link to comment
  • Solution

Okay, I've tried to correct all of your Custom CSS, there were quite a few things that needed adjusting. Are you manually adding paragraph 4 in a code block?

// 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';
}

You were missing @ in front of font-face, and your paragraphs weren't referenced correctly, you also may have had comments that were not comments.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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

a {
  text-decoration: none !important;
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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;
   }
 }  
}

Link to comment

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;
    }
  }  
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.