Jump to content

Fonts are appearing differently on desktop and mobile

Recommended Posts

Site URL: https://crate.media/shows/launch-guide/1-apps

I've updated the site design with a custom font via CSS. Seems to be working on the majority of areas of the site. However, the normal body/p font in bold is not generating properly on mobile views.

Desktop (correct):

788961388_ScreenShot2020-04-16at3_30_06PM.thumb.png.92b8441658a2059546f1a87611e02c27.png

 

Mobile (incorrect):

IMG_5410.thumb.PNG.20d4c293cb6d8aa3defdd8e9329dc66c.PNG

 

As you can see it's defaulting to some generic serif font on the mobile version.

I've tried assigning a specific bold font in the code below. Removing that, it looks like the desktop view automatically formats my font in its own version of bold, which is what I would like. But it isn't automatically working for mobile, which is why I tried to assign a specific "p strong" font. I also had to specify the custom font for the image caption blocks, as that was not updating automatically.

 

Here's the code I inputted to use the new font:

// HELVETICA NEUE THIN //
@font-face {    
font-family: 'Helvetica Neue Thin';       
src: url('https://static1.squarespace.com/static/5d4b0cab3d651f0001b888d0/t/5e95d4d628d1592862d98574/1586877654407/HelveticaNeue+Thin.ttf');  }


// ASSIGN H.N. THIN //

p {font-family: 'Helvetica Neue Thin';
  letter-spacing: 0.013em;
}


// HELVETICA NEUE BOLD //
@font-face {    
font-family: 'Helvetica Neue Bold';       
src: url('https://static1.squarespace.com/static/5d4b0cab3d651f0001b888d0/t/5e95d4e7d41df27156da9138/1586877671732/HelveticaNeueMed.ttf');  }


// ASSIGN H.N. BOLD //
p strong {font-family: 'Helvetica Neue Bold';
letter-spacing: -0.05em;
}


@media screen and (max-width: 765px) {
  p strong {font-family: 'Helvetica Neue Bold';
    letter-spacing: -0.05em;
  }
}




// IMAGE CAPTION FONT //
.sqs-block-image .image-caption p {font-family: 'Helvetica Neue Thin';
  letter-spacing: 0.013em;
}

.image-title-wrapper {font-family: 'Helvetica Neue Thin' !important;
  letter-spacing: 0.013em;
}

.image-subtitle-wrapper p {font-family: 'Helvetica Neue Thin' !important;
  letter-spacing: 0.013em;
}

.image-subtitle-wrapper a {font-family: 'Helvetica Neue Thin' !important;
  letter-spacing: 0.013em;
}


// IMAGE CAPTION FONT BOLD //
.sqs-block-image .image-caption p strong {font-family: 'Helvetica Neue Bold';
  letter-spacing: 0.013em;
}

.image-title-wrapper strong {font-family: 'Helvetica Neue Bold' !important;
  letter-spacing: 0.013em;
}

.image-subtitle-wrapper p strong {font-family: 'Helvetica Neue Bold' !important;
  letter-spacing: 0.013em;
}

.image-subtitle-wrapper a strong {font-family: 'Helvetica Neue Bold' !important;
  letter-spacing: 0.013em;
}

 

 

 

Edited by codydboyce
Link to comment
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.