Custom font not showing on mobile

Site URL: https://www.michalgrzymski.com

Hi everyone!

I have a problem - my custom font Inter is showing only on desktop (all browsers) and not on mobile. I have read many threads on this forum and nothing helped.

My website address is michalgrzymski.com The Inter font is used for everything except the body text.

Any idea what to do? 😇

Custom CSS code:

@font-face {   
    font-family: 'Inter';   
    src: url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bfcd7e554019945eb90/1642626044252/Inter.woff2') format('woff2'), /* Super Modern Browsers */
           url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bf767faf14f2c0711d3/1642626039316/Inter.woff') format('woff'), /* Pretty Modern Browsers */
      url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e8932f1e9b475edc6664af/1642631984266/Inter.eot'),
       url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e832a0060c2d3f4ea7fc5e/1642607266623/Inter.ttf')  format('truetype'), /* Safari, Android, iOS */;
}

.sqs-block-image .design-layout-collage .image-title p {
   font-family: 'Inter';}
.sqs-block-image .design-layout-collage .image-subtitle p{
font-family: 'Yantramanav';}

h1 {
  font-family: 'Inter';

  font-weight: 700;

  font-style: bold;

  font-size: 72px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  line-height: 1em
}

h2 {
  font-family: 'Inter';

  font-weight: 450;

  font-style: Regular;

  font-size: 33px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  line-height: 1em
}

h3 {
  font-family: 'Inter';

  font-weight: 400;

  font-style: Regular;

  font-size: 18px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  line-height: 1em
}

body {
  font-family: 'Yantramanav';

  font-weight: 400;

  font-style: Normal;

  font-size: 16px;

  letter-spacing: 0em;

  text-transform: None;

  line-height: 2em
}

.sqs-block-button .sqs-block-button-element {
    font-family: 'Inter';
}
.sqs-block-image .image-block-outer-wrapper.design-layout-collage .image-button-wrapper .image-button a {
  font-family: 'Inter';
}

.Header-nav {
  font-family: 'Inter';
}
.has-site-title .Header-branding{
    font-family: 'Inter';
}

13 minutes ago, MichalGrzymski said:

Site URL: https://www.michalgrzymski.com

Hi everyone!

I have a problem - my custom font Inter is showing only on desktop (all browsers) and not on mobile. I have read many threads on this forum and nothing helped.

My website address is michalgrzymski.com The Inter font is used for everything except the body text.

Any idea what to do? 😇

Custom CSS code:

@font-face {   
    font-family: 'Inter';   
    src: url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bfcd7e554019945eb90/1642626044252/Inter.woff2') format('woff2'), /* Super Modern Browsers */
           url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bf767faf14f2c0711d3/1642626039316/Inter.woff') format('woff'), /* Pretty Modern Browsers */
      url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e8932f1e9b475edc6664af/1642631984266/Inter.eot'),
       url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e832a0060c2d3f4ea7fc5e/1642607266623/Inter.ttf')  format('truetype'), /* Safari, Android, iOS */;
}

.sqs-block-image .design-layout-collage .image-title p {
   font-family: 'Inter';}
.sqs-block-image .design-layout-collage .image-subtitle p{
font-family: 'Yantramanav';}

h1 {
  font-family: 'Inter';

  font-weight: 700;

  font-style: bold;

  font-size: 72px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  line-height: 1em
}

h2 {
  font-family: 'Inter';

  font-weight: 450;

  font-style: Regular;

  font-size: 33px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  line-height: 1em
}

h3 {
  font-family: 'Inter';

  font-weight: 400;

  font-style: Regular;

  font-size: 18px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  line-height: 1em
}

body {
  font-family: 'Yantramanav';

  font-weight: 400;

  font-style: Normal;

  font-size: 16px;

  letter-spacing: 0em;

  text-transform: None;

  line-height: 2em
}

.sqs-block-button .sqs-block-button-element {
    font-family: 'Inter';
}
.sqs-block-image .image-block-outer-wrapper.design-layout-collage .image-button-wrapper .image-button a {
  font-family: 'Inter';
}

.Header-nav {
  font-family: 'Inter';
}
.has-site-title .Header-branding{
    font-family: 'Inter';
}

I found the font-family is already Inter on mobile display, Can you take some screenshots?

1 hour ago, MichalGrzymski said:

Site URL: https://www.michalgrzymski.com

Hi everyone!

I have a problem - my custom font Inter is showing only on desktop (all browsers) and not on mobile. I have read many threads on this forum and nothing helped.

My website address is michalgrzymski.com The Inter font is used for everything except the body text.

Any idea what to do? 😇

Custom CSS code:

@font-face {   
    font-family: 'Inter';   
    src: url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bfcd7e554019945eb90/1642626044252/Inter.woff2') format('woff2'), /* Super Modern Browsers */
           url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bf767faf14f2c0711d3/1642626039316/Inter.woff') format('woff'), /* Pretty Modern Browsers */
      url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e8932f1e9b475edc6664af/1642631984266/Inter.eot'),
       url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e832a0060c2d3f4ea7fc5e/1642607266623/Inter.ttf')  format('truetype'), /* Safari, Android, iOS */;
}

.sqs-block-image .design-layout-collage .image-title p {
   font-family: 'Inter';}
.sqs-block-image .design-layout-collage .image-subtitle p{
font-family: 'Yantramanav';}

h1 {
  font-family: 'Inter';

  font-weight: 700;

  font-style: bold;

  font-size: 72px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  line-height: 1em
}

h2 {
  font-family: 'Inter';

  font-weight: 450;

  font-style: Regular;

  font-size: 33px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  line-height: 1em
}

h3 {
  font-family: 'Inter';

  font-weight: 400;

  font-style: Regular;

  font-size: 18px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  line-height: 1em
}

body {
  font-family: 'Yantramanav';

  font-weight: 400;

  font-style: Normal;

  font-size: 16px;

  letter-spacing: 0em;

  text-transform: None;

  line-height: 2em
}

.sqs-block-button .sqs-block-button-element {
    font-family: 'Inter';
}
.sqs-block-image .image-block-outer-wrapper.design-layout-collage .image-button-wrapper .image-button a {
  font-family: 'Inter';
}

.Header-nav {
  font-family: 'Inter';
}
.has-site-title .Header-branding{
    font-family: 'Inter';
}

Use this new font-face code

@font-face {
    font-family: 'Inter';
    src: url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bfcd7e554019945eb90/1642626044252/Inter.woff2') format('woff2');/* Super Modern Browsers */ 
    src: url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bf767faf14f2c0711d3/1642626039316/Inter.woff') format('woff'),/* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e8932f1e9b475edc6664af/1642631984266/Inter.eot') format('embedded-opentype'),url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e832a0060c2d3f4ea7fc5e/1642607266623/Inter.ttf') format('truetype');/* Safari, Android, iOS */
}

@tuanphan thank you so much, the custom font now shows up on mobile 🙂 Can you tell me what was changed in the code? Because I can't see 😅

@bangank36 do you mean it shows Inter font on your mobile device?

Anyways, tuznphan's code seems to have fixed the issue, thanks anyways! 🙂

20 hours ago, MichalGrzymski said:

@tuanphan thank you so much, the custom font now shows up on mobile 🙂 Can you tell me what was changed in the code? Because I can't see 😅

You can compared 2 codes, you will see the difference.

I used 2 src, instead of 1 src

@tuanphan how do you generate that second src code? I am having the same issue but with a different font (Gotham-light)

@MichalGrzymski I'm having the same issue -- my custom font isn't working on mobile devices. For your code to work, did you have to convert your font type to the different formats/ extensions (.woff2, .eot, etc) and upload each separately into your css custom files, or did you simply change the file extension as it was written in your css? 

I have an .otf font file, but I'm not sure if I need to convert it two multiple different file types (.tff, .woff2, etc) or if I can just change it to mimic your css, and swap the url with my own.  

@tuanphan you may be able to weigh in here too? My site is www.alliswellstudios.com 

Original code was: 

@font-face {
font-family: 'GTAmericaBold';
   src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/6423560b2409b21c0435b6a4/1680037387766/GT-America-Standard-Bold.otf');}

h1, h2, h3, h4 {
 font-family: 'GTAmericaBold' !important;}

I tried using the font converter at transfonter.org and uploaded each file separately, but it still doesn't seem to be working at all, now on any browser. My font "GT America Bold" was originally an .otf file, but I converted it to other formats as recommended. My updated (but still broken!) code: 

@font-face {
font-family: 'GTAmericaBold';
   src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca443e0a9253d2e5ade2a/1680647235731/GTAmerica-Bold.eot')format('embedded-opentype');/* IE9 Compat Modes */
 src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca4814b72d81ef77f491f/1680647297139/GTAmerica-Bold.woff2')format('woff2'),/* Super Modern Browsers */
   url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca4b6f479ec0d40f87bc6/1680647350772/GTAmerica-Bold.woff')format('woff'), /* Pretty Modern Browsers */
   url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca4d8bc7bf42192b580dd/1680647384441/GTAmerica-Bold.ttf') format('truetype'),/* Safari, Android, iOS */
}

h1, h2, h3, h4 {
 font-family: 'GTAmericaBold' !important;}

On 4/5/2023 at 5:22 AM, AIW said:

@MichalGrzymski I'm having the same issue -- my custom font isn't working on mobile devices. For your code to work, did you have to convert your font type to the different formats/ extensions (.woff2, .eot, etc) and upload each separately into your css custom files, or did you simply change the file extension as it was written in your css? 

I have an .otf font file, but I'm not sure if I need to convert it two multiple different file types (.tff, .woff2, etc) or if I can just change it to mimic your css, and swap the url with my own.  

@tuanphan you may be able to weigh in here too? My site is www.alliswellstudios.com 

Original code was: 

@font-face {
font-family: 'GTAmericaBold';
   src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/6423560b2409b21c0435b6a4/1680037387766/GT-America-Standard-Bold.otf');}

h1, h2, h3, h4 {
 font-family: 'GTAmericaBold' !important;}

I tried using the font converter at transfonter.org and uploaded each file separately, but it still doesn't seem to be working at all, now on any browser. My font "GT America Bold" was originally an .otf file, but I converted it to other formats as recommended. My updated (but still broken!) code: 

@font-face {
font-family: 'GTAmericaBold';
   src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca443e0a9253d2e5ade2a/1680647235731/GTAmerica-Bold.eot')format('embedded-opentype');/* IE9 Compat Modes */
 src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca4814b72d81ef77f491f/1680647297139/GTAmerica-Bold.woff2')format('woff2'),/* Super Modern Browsers */
   url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca4b6f479ec0d40f87bc6/1680647350772/GTAmerica-Bold.woff')format('woff'), /* Pretty Modern Browsers */
   url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/642ca4d8bc7bf42192b580dd/1680647384441/GTAmerica-Bold.ttf') format('truetype'),/* Safari, Android, iOS */
}

h1, h2, h3, h4 {
 font-family: 'GTAmericaBold' !important;}

It looks like you removed these code. Do you still need help?

I also cannot get my custom font to appear on mobile devices, but it looks correct on the mobile view when i am previewing my site from desktop. here is the code i have so far:

ghdesignstudio.com 

pw is: ghdesigns1

@font-face {
font-family: INTEGRAL CF BOLD;
src: url(https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c09e5f63fc294fd51d83/1681309854163/IntegralCF-Bold.eot);
}
@font-face {
font-family: GLAUKON REGULAR;
src: url(https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c08223b5623ded9dc7c8/1681309826676/Glaukon-Regular.eot);
}
@font-face {
font-family: GLAUKON ITALIC;
src: url(https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c089b69160779740109a/1681309833731/Glaukon-Italic.eot);
}h1 {
font-family: 'INTEGRAL CF';
}

h2 {
font-family: 'INTEGRAL CF';
}

h3 {ont-family: GLAUKON REGULAR;
src: url(https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c08223b5623ded9dc7c8/1681309826676/Glaukon-Regular.eot)
}

h4 {
font-family: 'GLAUKON';
}

.sqsrte-large {
font-family: 'GLAUKON REGULAR';
}

p {
font-family: 'GLAUKON';
}

.sqsrte-small {
font-family: 'GLAUKON';
}.sqs-block-button a, [class*='button'], [class*='btn'] {
    font-family: 'INTEGRAL CF' !important;
}@font-face {
    font-family: ‘INTEGRAL CF;
    src: url(https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c09e5f63fc294fd51d83/1681309854163/IntegralCF-Bold.eot') format('woff2');/* Super Modern Browsers */
    src: url('https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c09e5f63fc294fd51d83/1681309854163/IntegralCF-Bold.eot') format('woff'),/* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e8932f1e9b475edc6664af/1642631984266/Inter.eot') format('embedded-opentype'),url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e832a0060c2d3f4ea7fc5e/1642607266623/Inter.ttf') format('truetype');/* Safari, Android, iOS */}

On 4/12/2023 at 10:38 PM, ghdesigns said:

I also cannot get my custom font to appear on mobile devices, but it looks correct on the mobile view when i am previewing my site from desktop. here is the code i have so far:

 

ghdesignstudio.com 

pw is: ghdesigns1

 

@font-face {
font-family: INTEGRAL CF BOLD;
src: url(https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c09e5f63fc294fd51d83/1681309854163/IntegralCF-Bold.eot);
}
@font-face {
font-family: GLAUKON REGULAR;
src: url(https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c08223b5623ded9dc7c8/1681309826676/Glaukon-Regular.eot);
}
@font-face {
font-family: GLAUKON ITALIC;
src: url(https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c089b69160779740109a/1681309833731/Glaukon-Italic.eot);
}h1 {
font-family: 'INTEGRAL CF';
}

h2 {
font-family: 'INTEGRAL CF';
}

h3 {ont-family: GLAUKON REGULAR;
src: url(https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c08223b5623ded9dc7c8/1681309826676/Glaukon-Regular.eot)
}

h4 {
font-family: 'GLAUKON';
}

.sqsrte-large {
font-family: 'GLAUKON REGULAR';
}

p {
font-family: 'GLAUKON';
}

.sqsrte-small {
font-family: 'GLAUKON';
}.sqs-block-button a, [class*='button'], [class*='btn'] {
    font-family: 'INTEGRAL CF' !important;
}@font-face {
    font-family: ‘INTEGRAL CF;
    src: url(https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c09e5f63fc294fd51d83/1681309854163/IntegralCF-Bold.eot') format('woff2');/* Super Modern Browsers */
    src: url('https://static1.squarespace.com/static/6419cc23b21ce56331cae1f5/t/6436c09e5f63fc294fd51d83/1681309854163/IntegralCF-Bold.eot') format('woff'),/* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e8932f1e9b475edc6664af/1642631984266/Inter.eot') format('embedded-opentype'),url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e832a0060c2d3f4ea7fc5e/1642607266623/Inter.ttf') format('truetype');/* Safari, Android, iOS */}

All three fonts don't work or which font?

Hello, I'm also having the same issue!

One of my custom fonts isn't working on mobile for some reason. Everything appears to be working in the Squarespace editor just fine but when I check my phone they're not the same.

All of the Termina Demi sections don't work on mobile except for the mobile menu which I added css for.

// Fonts //

@font-face {
font-family: Termina Demi;
src: url('https://static1.squarespace.com/static/63f8fd55ee545172d652c8a7/t/63fe359b332fe92ef76507e6/1677604251588/Termina-Demi.woff'); 
}

@font-face {
font-family: Mundial Regular;
src: url(https://static1.squarespace.com/static/63f8fd55ee545172d652c8a7/t/63fe35cc0e256a7c9b9e5165/1677604300568/Mundial-Regular.woff);
}

@font-face {
font-family: Mundial Bold;
src: url(https://static1.squarespace.com/static/63f8fd55ee545172d652c8a7/t/63fe35c45a90c93cc40d48f7/1677604292850/Mundial-Bold.woff);
}

h1 {

font-family: 'Termina Demi';
text-transform: uppercase;
font-size: 40px;
}

h2 {

font-family: 'Termina Demi';
text-transform: uppercase;
font-size: 27px;
}

h3 {

font-family: 'Mundial Bold';
font-size: 20px;
  text-transform: uppercase;
}

.sqsrte-large {

font-family: 'Mundial Regular';
font-size: 22px;
line-height: 2rem;
}

p {

font-family: 'Mundial Regular';
font-size: 17px;
}

.sqsrte-small {

font-family: 'Mundial Bold';
font-size: 17px;
}

On 4/18/2023 at 10:05 PM, tegancann said:

Hello, I'm also having the same issue!

One of my custom fonts isn't working on mobile for some reason. Everything appears to be working in the Squarespace editor just fine but when I check my phone they're not the same.

All of the Termina Demi sections don't work on mobile except for the mobile menu which I added css for.

 

// Fonts //

@font-face {
font-family: Termina Demi;
src: url('https://static1.squarespace.com/static/63f8fd55ee545172d652c8a7/t/63fe359b332fe92ef76507e6/1677604251588/Termina-Demi.woff'); 
}

@font-face {
font-family: Mundial Regular;
src: url(https://static1.squarespace.com/static/63f8fd55ee545172d652c8a7/t/63fe35cc0e256a7c9b9e5165/1677604300568/Mundial-Regular.woff);
}

@font-face {
font-family: Mundial Bold;
src: url(https://static1.squarespace.com/static/63f8fd55ee545172d652c8a7/t/63fe35c45a90c93cc40d48f7/1677604292850/Mundial-Bold.woff);
}

h1 {

font-family: 'Termina Demi';
text-transform: uppercase;
font-size: 40px;
}

h2 {

font-family: 'Termina Demi';
text-transform: uppercase;
font-size: 27px;
}

h3 {

font-family: 'Mundial Bold';
font-size: 20px;
  text-transform: uppercase;
}

.sqsrte-large {

font-family: 'Mundial Regular';
font-size: 22px;
line-height: 2rem;
}

p {

font-family: 'Mundial Regular';
font-size: 17px;
}

.sqsrte-small {

font-family: 'Mundial Bold';
font-size: 17px;
}

What is your site url?