Jump to content

font of h4 h5 & h6 don't show on mobile

Recommended Posts

  • 1 year later...
  • Replies 1
  • Views 204
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Super late but I've had this issue with TWO client websites now where the Custom Font won't adhere to the code on Mobile (Safari) even though it shows up perfectly on the Squarespace Mobile preview.

My fix was to create an <a class> which shows up perfectly on Safari.

Quote

CODE BLOCK

<a href="" class="classname">Text Goes Here</a>

Quote

CSS

.classname {
  background-color: none;
  color: #XXXXXX;
  padding: 0px;
  font-family: 'FONT' !important;
  font-size: 40px;
  letter-spacing: 0px;
  line-height: 42px;
  text-decoration: none;
  pointer-events: none;
}
@media screen and (max-width:767px) {
.classname {
  background-color: none;
  color: #XXXXXX;
  padding: 0px;
  font-family: 'FONT' !important;
  font-size: 30px;
  letter-spacing: 0px;
  line-height: 30px;
  text-decoration: none;
  pointer-events: none;
}}

I hope that helps!

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.