Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

custom css h1 font not appearing on mobile?


ErynnBriggs

Question

  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

@Tcp13 Thanks so much! that did it!

Posted Images

8 answers to this question

Recommended Posts

  • 0

Hi @ErynnBriggs,

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

image.png.f289439a2653e656c6280d08fc043815.png

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:

image.png.fb7ae71c958dfeb18cd1371c6a59bd11.png

Hope this helps!
-Tyler

There were 3550 lawsuits last year against websites that were inaccessible to people with disabilities. Is your Squarespace site ADA compliant? Find out in 60 seconds with our free accessibility audit

Link to post
  • 0
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

There were 3550 lawsuits last year against websites that were inaccessible to people with disabilities. Is your Squarespace site ADA compliant? Find out in 60 seconds with our free accessibility audit

Link to post
  • 0

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: 

Chrome.PNG

Safari.PNG

Link to post
  • 0
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
}

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...