custom css h1 font not appearing on mobile?

Site URL: http://www.ebcophoto.com

Hi

my custom CSS H1 font code is only appearing on the desktop version of my site and not mobile. do i need specific code to make it work on mobile too? (the intended font is called White Angelica}

Thank you

Hi @ErynnBriggs,

The default font is showing for me (both desktop and mobile):

I noticed a few typos in your CSS. Try this instead:

@font-face {
    font-family: 'white angelica';
    src: url('https://static1.squarespace.com/static/5ac7fe4cc258b4e1cd67c9c2/t/5f909f94732c6b19aa0ad4af/1603313556494/WhiteAngelica.ttf') format('truetype');
}

h1 {
    font-family: 'white angelica' !important
}

With this expected result:

Hope this helps!
-Tyler

The same thing is happening to me – I see my custom font on desktop but not on mobile

https://potato-rabbit-ez5k.squarespace.com/ 

25 minutes ago, mariyaleona said:

The same thing is happening to me – I see my custom font on desktop but not on mobile

Hi @mariyaleona,

It appears you may have a similar typo in your CSS. When testing your site with multiple browsers, I see Chrome recognizes the Karin font, whereas Edge and mobile browsers do not.

Try this instead - the filename should be wrapped in quotation marks, and it's best to specify the format too:

@font-face {
    font-family: 'KARIN';
    src: url('https://static1.squarespace.com/static/5f7b8d3d7ffdc521ceafbda5/t/5f7b92f5cc6429688a063106/1601934070893/Karin.otf') format('opentype');
}

h1 {
    font-family: 'KARIN';
    letter-spacing: 0px;
    font-size: 45px
}

Hope this helps!
-Tyler

Hi Tyler - thank you for the support. I updated the code but the font still isn't appearing on mobile on the mobile chrome browser – but it's working on safari. Is there anything else I would need to do to ensure it formats for both browsers?

I did clear my cookies and make sure I have the latest version of the app for chrome, but it's still not showing. Here's screenshots for reference: 

@Tcp13 Thanks so much! that did it!

site url https://www.superpowerss.com/ 

i added a custom css code for H1 but it dosent show in the mobile site i tried the codes above but they dont work

13 hours ago, AndreaOchoa said:

site url https://www.superpowerss.com/ 

i added a custom css code for H1 but it dosent show in the mobile site i tried the codes above but they dont work

Try this new code

@font-face {
    font-family: 'Turnpike';
    src: url(https://static1.squarespace.com/static/5aef419ff2e6b1f9aa3ea218/t/5fb7df823254445724c133f0/1605885826610/turnpike.ttf);
}

.mobile-bar-wrapper *, h1 {
    font-family: 'Turnpike' !important;
    font-size: 18px
}

thanks so much worked! 

This same issue is happening for me. Here is the code I have and it is not working on mobile:

//ADDING REMAN FONT//
@font-face {
  font-family: "Reman";
      src:
url('https://static1.squarespace.com/static/60f1b9ed84bdc3300f23b9cc/t/60f99ced9da0b966a576b8a4/1626971373596/Reman+3.ttf');
}

//ASSIGN REMAN FONT//
h3 {font-family: "Reman"; 
letter-spacing:'2px';    
font-size:120px;
  line-height:.75
}
.mobile-bar-wrapper *, h3 {
    font-family: "Reman" !important;
    font-size: 70px
}

On 8/18/2021 at 9:56 PM, dimauro said:

This same issue is happening for me. Here is the code I have and it is not working on mobile:

//ADDING REMAN FONT//
@font-face {
  font-family: "Reman";
      src:
url('https://static1.squarespace.com/static/60f1b9ed84bdc3300f23b9cc/t/60f99ced9da0b966a576b8a4/1626971373596/Reman+3.ttf');
}

//ASSIGN REMAN FONT//
h3 {font-family: "Reman"; 
letter-spacing:'2px';    
font-size:120px;
  line-height:.75
}
.mobile-bar-wrapper *, h3 {
    font-family: "Reman" !important;
    font-size: 70px
}

Hi. Can you share link to your site? We can check easier

Hi there @tcp13,

I am running into the same issue. It is appearing on desktop, but not mobile. Any suggestions? I just added the bit "format('opentype');" per your suggestion above, but it unfortunately didn't fix the issuse.

++++++++++++++++++++++++++++++

ULR: https://www.ashandaircreative.com/

@font-face {
  font-family: 'Sophillia';
  src: url('https://static1.squarespace.com/static/5e2a0c24a601f10901a27e9d/t/5fa1a2bdcba0b51a3787ef38/1604428478006/Sophillia.otf') format('opentype');
  }

h1,h2 {
  font-family: 'Sophillia';
}

4 hours ago, AshM13 said:

Hi there @tcp13,

I am running into the same issue. It is appearing on desktop, but not mobile. Any suggestions? I just added the bit "format('opentype');" per your suggestion above, but it unfortunately didn't fix the issuse.

++++++++++++++++++++++++++++++

ULR: https://www.ashandaircreative.com/

@font-face {
  font-family: 'Sophillia';
  src: url('https://static1.squarespace.com/static/5e2a0c24a601f10901a27e9d/t/5fa1a2bdcba0b51a3787ef38/1604428478006/Sophillia.otf') format('opentype');
  }

h1,h2 {
  font-family: 'Sophillia';
}

Hi. THe font file doesn't exist. Try copy font file url & paste to browser address bar. You will see

Thank you @tuanphan! 

I uploaded the font file again and the issue was resolved.