custom css h1 font not appearing on mobile?

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!