Jump to content

1 of 2 custom fonts not working on safari/mobile

Recommended Posts

Site URL: https://isabela.design

Hi I uploaded two custom fonts on my site, Manolete & Helmet. Both are ttf files

1435329377_ScreenShot2021-04-15at10_48_08AM.thumb.png.648e60d1f6d26813cb08e81bba3cbd88.png

1396480816_ScreenShot2021-04-15at10_48_14AM.thumb.png.e3a5d18f96695e7f7c41a259ff93a117.png

I have a Mac & when I run Squarespace on Chrome, the fonts look fine but when I'm on Safari only Helmet shows up. Helmet is also the only font that shows up on mobile (I tried both Chrome & Safari on an iPhone iOS 14.4.2).

I read that I should also include other source files as well but I added the src url for woff/woff2/eot, etc. for Manolete and none of those changed anything, also skeptical because both fonts I used are ttf files so maybe it's the problem with the font itself but I was wondering if anyone has ran into this issue & could give me pointers on how to fix it, thanks in advance!

site: https://isabela.design

password: ivqux2021

 

Edited by ivq
uploaded wrong photo
Link to comment
  • Replies 3
  • Views 2.6k
  • Created
  • Last Reply

Top Posters In This Topic

Remove this code (It is invalid code)

@font-face {
    font-family: 'Manolete';
    src: url('https://static1.squarespace.com/static/606b9a512192b36e2d9e5c25/t/607a43d091aa5a30cbfc3e67/1618625488880/MANOLETE.ttf');
    font-family: 'Helmet';
    src: url('https://static1.squarespace.com/static/606b9a512192b36e2d9e5c25/t/6075a8510fc4145c05f2d88b/1618323538013/Helmet-Regular.ttf')
}

Add new code

@font-face {
    font-family: 'Manolete';
    src: url('https://static1.squarespace.com/static/606b9a512192b36e2d9e5c25/t/607a43d091aa5a30cbfc3e67/1618625488880/MANOLETE.ttf');
}
@font-face {
        font-family: 'Helmet';
    src: url('https://static1.squarespace.com/static/606b9a512192b36e2d9e5c25/t/6075a8510fc4145c05f2d88b/1618323538013/Helmet-Regular.ttf')
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Also, the site has some small problems

Site URL: https://isabela.design/

1. (Mobile-Homepage) Icon look huge. Want to resize it?

isabela.design-01-min.png

2. (Tablet-Homepage) Icon looks small. Want to increase its width?

isabela.design-02-min.png

3. (Tablet-Overlay Menu) Menu has 2 items only. Want to remove burger & force desktop nav on tablet?

isabela.design-03-min.png

4. (About page) 2 squares..

isabela.design-04-min.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
On 4/18/2021 at 5:01 AM, tuanphan said:

Add new code

@font-face {
    font-family: 'Manolete';
    src: url('https://static1.squarespace.com/static/606b9a512192b36e2d9e5c25/t/607a43d091aa5a30cbfc3e67/1618625488880/MANOLETE.ttf');
}
@font-face {
        font-family: 'Helmet';
    src: url('https://static1.squarespace.com/static/606b9a512192b36e2d9e5c25/t/6075a8510fc4145c05f2d88b/1618323538013/Helmet-Regular.ttf')
}

 

Thank you so much @tuanphan !

I was having problems with my custom fonts appearing different on Chrome and Safari.

They were displaying on Chrome but not on Safari.

I copy and pasted the above code (and changed the font names and source) and it works now!

 

I thought that maybe because my site will be in Bulgarian langue (Cyrillic Fonts) that that was causing a problem but when I thought about it - it shouldn't.

Thanks again for this code!

 

I probably made a typo in my original code.

 

If you ever are in Bulgaria - you have a drink on me! 

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.