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?

Hello,

I seem to be having the same issue with a client's website. The custom fonts look fine for me on my mobile (Android), but it isn't showing for them (iPhone).

This is the code on the site:

/* CSS FOR CUSTOM FONTS */
@font-face {

    font-family: 'Gill Sans';

       src: url('https://static1.squarespace.com/static/62958ba724667166229bbe55/t/63bf7e38b8d9d668777ca172/1673494072707/GillSansMTStd-UltraBold.otf');

  }
@font-face {
  

    font-family: 'Gothic Demi';

       src: url('https://static1.squarespace.com/static/62958ba724667166229bbe55/t/63bf7e2aeef8ee55601a040e/1673494058591/AllRoundGothic-Demi.otf');

  }
@font-face {

    font-family: 'Bonne Nuit';

       src: url('https://static1.squarespace.com/static/62958ba724667166229bbe55/t/63bf7e1f19b97d34289c51bd/1673494048240/BonneNuit-Regular.otf');

  }
@font-face {

    font-family: 'Sweet Sans';

       src: url('https://static1.squarespace.com/static/62958ba724667166229bbe55/t/63bf7e94b8d9d668777cb194/1673494165041/SweetSansProLight.woff');

  }
h1 {

  font-family: 'Gill Sans';

  font-weight: 300;

  font-style: normal;

  font-size: 55px;

  letter-spacing: 0.05em;

  text-transform: normal;

  line-height: 1.2em;

}
h2 {

  font-family: 'Gothic Demi';

  font-weight: 600;

  font-style: normal;

  font-size: 30px;

  letter-spacing: 0.00em;

  text-transform: normal;

  line-height: 1em;

}
h3 {

  font-family: 'Bonne Nuit';

  font-weight: 600;

  font-style: normal;

  font-size: 30px;

  letter-spacing: 0.05em;

  text-transform: normal;

  line-height: 1.2em;

}
h4 {

  font-family: 'Gothic Demi';

  font-weight: 600;

  font-style: normal;

  font-size: 20px;

  letter-spacing: 0.1em;

  text-transform: normal;

  line-height: 1.2em;

}
p {
font-family: 'Sweet Sans' !important;
}
a.btn.btn--border.theme-btn--primary-inverse {
    font-family: Gill Sans;
}
button {
    font-family: Gill Sans !important;
}
/* CSS FOR TABLET */
@media only screen and (min-width: 641px) and (max-width: 949px) {

/* Start Insert Code for Tablet*/

// Header h1
 h1 {font-size:2.7rem !important} 
// Header h2
 h2 {font-size:2rem !important} 
// Header h3
 h3 {font-size:2rem !important} 
// Paragraph
 p {font-size:1rem!important} 
  
/* End Insert Code for Tablet */
}

/* CSS FOR MOBILE */
@media only screen and (max-width: 640px) {
/* Start Insert Code for Mobile*/

// Header h1
 h1 {font-size:2.2rem !important;
   text-align: center} 
// Header h2
 h2 {font-size:1.8rem!important;
   text-align: center} 
// Header h3
 h3 {font-size:1.6rem !important;
   text-align: center} 
  // Header h3
 h4 {font-size:1.4rem !important;
   text-align: center}  

/* End Insert Code for Mobile*/

Any suggestions to help me please? I've attached screenshots they have sent me of what they see, versus what it should look like, and the url is below.

This is the website https://www.foundregional.com.au/

Thanks!

Hi,

It looks fine to Android. Did you figure it out?

Not yet. I have an android and it looks fine to me. But my clients use iPhones and the custom fonts are not showing for them. That's the only thing I can think of that's different. They've tried a cache clear, different browsers etc. Nothing changes, they still can't see the custom fonts.

Hey! I'm having an issue with my fonts not showing up on Mobile. Could anyone assist?

Here is my Code:

h1 {
font-family: 'NEWYORK';
}

h2 {
font-family: 'NEWYORK';
}

h3 {
font-family: 'NEWYORK';
}

h4 {
font-family: 'NEWYORK';
}

h5 {
font-family: 'NEWYORK';
}

h6 {
font-family: 'NEWYORK';
}

.sqsrte-small {
font-family: 'LULOCLEANONE';
}

On 6/9/2023 at 2:21 PM, KyahDigital said:

Not yet. I have an android and it looks fine to me. But my clients use iPhones and the custom fonts are not showing for them. That's the only thing I can think of that's different. They've tried a cache clear, different browsers etc. Nothing changes, they still can't see the custom fonts.

You try checking the site where you got the font and check to see if it works there or not, if not, you can find another font or try contacting font author. If it works there, do you have any other font formats?

On 6/9/2023 at 8:24 PM, elbertfoster62 said:

Hey! I'm having an issue with my fonts not showing up on Mobile. Could anyone assist?

 

Here is my Code:

 

h1 {
font-family: 'NEWYORK';
}

h2 {
font-family: 'NEWYORK';
}

h3 {
font-family: 'NEWYORK';
}

h4 {
font-family: 'NEWYORK';
}

h5 {
font-family: 'NEWYORK';
}

h6 {
font-family: 'NEWYORK';
}

.sqsrte-small {
font-family: 'LULOCLEANONE';
}

What is site url?

On 6/11/2023 at 5:41 PM, tuanphan said:

You try checking the site where you got the font and check to see if it works there or not, if not, you can find another font or try contacting font author. If it works there, do you have any other font formats?

I've tried different font formats and it doesn't seem to have updated anything. Are there any changes I need to make to the code?