Letter spacing on heading different on mobile

Site URL: https://thatstudio.co/

Hi,

I need some help with mobile letter spacing.

Looking at my screenshots you'll see the desktop letter spacing is nice and tight, then the mobile letter spacing is wide. I believe it is just affecting my headings, which is a custom font (Recoleta).

I believe I will need some custom CSS to fix this, but not sure what that would be

Thanks

Just checked the site & It looks fine. Did you solve it?

Hi @tuanphan

No, I have just checked now and the problem is still there.

I am viewing on an iPhone 11 Pro – Safari and Chrome both show the same wide letter spacing.

Thanks

I have the same problem, and I can't figure out why. Please help!

I am viewing from an iPhone, both Safari and Chrome shows the same. My colleague with an Android phone shows the headings as normal, just like it shows on my computer.

Hi. I can't replicate the problem on my end. You try posting to Squarespace Customization Resource Group on FB

On 2/19/2022 at 12:19 PM, tuanphan said:

Hi. I can't replicate the problem on my end. You try posting to Squarespace Customization Resource Group on FB

Hi again! I tried to ask, but we couldn't solve it. I was wondering – may it help til set the letter spacing in the custom CSS code? It seems to be a problem with h1, h2 and h3 + my site title. Could you help me with code to manually override that? 

If it may help, this is the custom CSS I'm using for my whole page.

@font-face {
    font-family: 'EksellDisplay';
       src: url('https://static1.squarespace.com/static/61d56b82725cde14d95764f9/t/61d56d158491b024edd96292/1641377045670/EksellDisplayLarge.woff2');
  }
h1 {font-family: 'EksellDisplay';}

@font-face {
    font-family: 'Apercu';
       src: url('https://static1.squarespace.com/static/61d56b82725cde14d95764f9/t/61d56cdc4404080eb812179f/1641376988511/apercu-bold-webfont.woff');
  }
h2 {font-family: 'Apercu';}
h3 {font-family: 'Apercu';}
h4 {font-family: 'Apercu';}

@font-face {
    font-family: 'Apercu';
       src: url('https://static1.squarespace.com/static/61d56b82725cde14d95764f9/t/61d56cd748fe7e6fdf2f2008/1641376983880/apercu-regular-webfont.woff');
  }
P {font-family: 'Apercu';}
#site-title {font-family: 'EksellDisplay'!important} 
header#header *, footer.sections * {
    font-family: 'Apercu';
}
h3.portfolio-title {
    font-family: 'Apercu' !important;
}
h2.newsletter-form-header-title {
    font-family: 'EksellDisplay' !important;
}
h2.list-item-content__title {
    font-family: 'Apercu' !important;
}
h1.portfolio-hover-item-title {
    font-family: 'EksellDisplay' !important;
  
}
h2.item-pagination-title {
    font-family: 'EksellDisplay' !important;
}
h1.sqs-slash-page-header {
    font-family: 'EksellDisplay' !important;
}
.newsletter-block .newsletter-form-field-element::placeholder {
    font-family: 'Apercu';
}
/* newsletter button */
span.newsletter-form-button-label {
    font-family: 'Apercu' !important;
}
.sqs-block-button a, [class*='button'], [class*='btn'] {
    font-family: 'Apercu' !important;
}
#collection-621004aa9931c448e4cc9b66 .sqs-block-button-element--small {
 width: 60% !important;
}
#block-yui_3_17_2_1_1645216974942_2218 { 
  width: 30% !important;
  margin: 0 auto;
}
div.list-section-title p {
    font-size: 40px !important;
}

I tried by myself, but my headings still look the same on my iPhone, sadly.

@font-face {
    font-family: 'EksellDisplay';
       src: url('https://static1.squarespace.com/static/61d56b82725cde14d95764f9/t/61d56d158491b024edd96292/1641377045670/EksellDisplayLarge.woff2');
  }
h1 {font-family: 'EksellDisplay';
letter-spacing: .0em !important;}


@font-face {
    font-family: 'Apercu';
       src: url('https://static1.squarespace.com/static/61d56b82725cde14d95764f9/t/61d56cdc4404080eb812179f/1641376988511/apercu-bold-webfont.woff');
  }
h2 {font-family: 'Apercu';
letter-spacing: .0em !important;}
h3 {font-family: 'Apercu';
letter-spacing: .0em !important;}
h4 {font-family: 'Apercu';
letter-spacing: .0em !important;}

To change h1, h2, h3 letter spacing on mobile, add this to Design > Custom CSS

@media screen and (max-width:767px) {
	h1, h2, h3 {
		letter-spacing: 5px !important;
}
}

Sadly this didn't work either. Thank you for your help either way!

I have same problem viewing a clients site on iPhone 13 Pro. Oddly the increased letter spacing doesn’t show up on browser emulators.
 

Did we find workaround?

squarespace 7.0 site

Uploaded my own custom font. Could this have something to do with it?

On 5/6/2022 at 11:37 AM, jmalcolmson said:

I have same problem viewing a clients site on iPhone 13 Pro. Oddly the increased letter spacing doesn’t show up on browser emulators.
 

Did we find workaround?

squarespace 7.0 site

Uploaded my own custom font. Could this have something to do with it?

Can you add & keep the code? We can check easier