Jump to content

Custom font not showing on mobile

Recommended Posts

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

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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 */
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...

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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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 */}

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.