Custom Font not showing up on any other device

Hi Everyone, 

I am trying to use two custom fonts on my site www.atfirstblink.com  and I've tried all possible codes and loading the font files as eot, woff and woff2 but they still dont show up consistently. They neither on my ipad or iphone in safari or chrome on both. Below is the code I'm using.  If someone can pls check and tell me what I'm doing wrong as I've been trying to fix this issue since 2 days now. Thanks.

// Fontkit

@font-face {
    font-family: 'Carefree Serif';
    src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8a0a43f5e3d84b0e063/1672198304563/CarefreeSerif-Italic.eot');
    src: url('CarefreeSerif-Italic.eot?#iefix') format('embedded-opentype'),
        url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8ad014c952998a623f9/1672198317168/CarefreeSerif-Italic.woff2') format('woff2'),
        url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8a726cf4a562a895194/1672198311916/CarefreeSerif-Italic.woff') format('woff'),
        url('CarefreeSerif-Italic.svg#CarefreeSerif-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Carefree Serif';
    src: url('CarefreeSerif-Regular.eothttps://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb5ec50cb855955f718e0/1672197613522/CarefreeSerif-Regular.eot');
    src: url('CarefreeSerif-Regular.eot?#iefix') format('embedded-opentype'),
        url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb70119e7105dff38b5b8/1672197889612/CarefreeSerif-Regular.woff2') format('woff2'),
        url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb6bb6aca97131a857ff2/1672197819482/CarefreeSerif-Regular.woff') format('woff'),
        url('CarefreeSerif-Regular.svg#CarefreeSerif-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Carefree Serif';
    src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb73c4053d730cde75fe6/1672197949081/CarefreeSerif-Extralight.eot');
    src: url('CarefreeSerif-Extralight.eot?#iefix') format('embedded-opentype'),
        url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb74bcf07713bc091b1d1/1672197963464/CarefreeSerif-Extralight.woff2') format('woff2'),
        url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb767cf07713bc091b53d/1672197991330/CarefreeSerif-Extralight.woff') format('woff'),
        url('CarefreeSerif-Extralight.svg#CarefreeSerif-Extralight') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Carefree Serif';
    src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb78b0474e440f6e0d58d/1672198027328/CarefreeSerif-ExtralightItalic.eot');
    src: url('CarefreeSerif-ExtralightItalic.eot?#iefix') format('embedded-opentype'),
        url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb7a552e2741a949be8e2/1672198053923/CarefreeSerif-ExtralightItalic.woff2') format('woff2'),
        url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb79a4053d730cde76d1f/1672198042776/CarefreeSerif-ExtralightItalic.woff') format('woff'),
        url('CarefreeSerif-ExtralightItalic.svg#CarefreeSerif-ExtralightItalic') format('svg');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sackers Italian Script Std';
    src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb90ca43f5e3d84b0e7c0/1672198413556/SackersItalianScriptStd.eot');
    src: url('SackersItalianScriptStd.eot?#iefix') format('embedded-opentype'),
        url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb91419e7105dff38e36d/1672198420987/SackersItalianScriptStd.woff2') format('woff2'),
        url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb9106aca97131a859931/1672198417013/SackersItalianScriptStd.woff') format('woff'),
        url('SackersItalianScriptStd.svg#SackersItalianScriptStd') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

// Custom Fonts Implement:

h1 {font-family: 'CarefreeSerif-Regular'!important;
  font-style: normal;}

h2 {font-family: 'CarefreeSerif-Regular'!important;
  font-style: normal;}

h1.BlogItem-title 
{ font-size: 50px ;
  font-family:'CarefreeSerif-extralight'!important;
font-style: normal;}

h2.Index-gallery-item-content-heading 
{ font-family: 'Carefreeserif-extralight'!important;
  font-size: 65px;
}

h4 {   
color:#f6f3ef;   
font-family: SackersItalianScriptStd !important;
font-style: normal;
font-size:33px;   
letter-spacing: 0em;   
  line-height: 0em;
margin-bottom:10px; }

//

First, you need to enter real urls here.

Next, font-family in h1, h2, h3, h4 need same as font-family in @font-face code

@tuanphanThank you!! I think this did the trick for me. You're the best 🙂

On 12/28/2022 at 2:30 PM, atfirstblink said:

Hi Everyone, 

I am trying to use two custom fonts on my site www.atfirstblink.com  and I've tried all possible codes and loading the font files as eot, woff and woff2 but they still dont show up consistently. They neither on my ipad or iphone in safari or chrome on both. Below is the code I'm using.  If someone can pls check and tell me what I'm doing wrong as I've been trying to fix this issue since 2 days now. Thanks.

 

// Fontkit

@font-face {
    font-family: 'Carefree Serif';
    src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8a0a43f5e3d84b0e063/1672198304563/CarefreeSerif-Italic.eot');
    src: url('CarefreeSerif-Italic.eot?#iefix') format('embedded-opentype'),
        url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8ad014c952998a623f9/1672198317168/CarefreeSerif-Italic.woff2') format('woff2'),
        url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb8a726cf4a562a895194/1672198311916/CarefreeSerif-Italic.woff') format('woff'),
        url('CarefreeSerif-Italic.svg#CarefreeSerif-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Carefree Serif';
    src: url('CarefreeSerif-Regular.eothttps://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb5ec50cb855955f718e0/1672197613522/CarefreeSerif-Regular.eot');
    src: url('CarefreeSerif-Regular.eot?#iefix') format('embedded-opentype'),
        url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb70119e7105dff38b5b8/1672197889612/CarefreeSerif-Regular.woff2') format('woff2'),
        url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb6bb6aca97131a857ff2/1672197819482/CarefreeSerif-Regular.woff') format('woff'),
        url('CarefreeSerif-Regular.svg#CarefreeSerif-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Carefree Serif';
    src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb73c4053d730cde75fe6/1672197949081/CarefreeSerif-Extralight.eot');
    src: url('CarefreeSerif-Extralight.eot?#iefix') format('embedded-opentype'),
        url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb74bcf07713bc091b1d1/1672197963464/CarefreeSerif-Extralight.woff2') format('woff2'),
        url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb767cf07713bc091b53d/1672197991330/CarefreeSerif-Extralight.woff') format('woff'),
        url('CarefreeSerif-Extralight.svg#CarefreeSerif-Extralight') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Carefree Serif';
    src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb78b0474e440f6e0d58d/1672198027328/CarefreeSerif-ExtralightItalic.eot');
    src: url('CarefreeSerif-ExtralightItalic.eot?#iefix') format('embedded-opentype'),
        url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb7a552e2741a949be8e2/1672198053923/CarefreeSerif-ExtralightItalic.woff2') format('woff2'),
        url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb79a4053d730cde76d1f/1672198042776/CarefreeSerif-ExtralightItalic.woff') format('woff'),
        url('CarefreeSerif-ExtralightItalic.svg#CarefreeSerif-ExtralightItalic') format('svg');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sackers Italian Script Std';
    src: url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb90ca43f5e3d84b0e7c0/1672198413556/SackersItalianScriptStd.eot');
    src: url('SackersItalianScriptStd.eot?#iefix') format('embedded-opentype'),
        url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb91419e7105dff38e36d/1672198420987/SackersItalianScriptStd.woff2') format('woff2'),
        url('https://static1.squarespace.com/static/5e92cb1439c6d744195f9c11/t/63abb9106aca97131a859931/1672198417013/SackersItalianScriptStd.woff') format('woff'),
        url('SackersItalianScriptStd.svg#SackersItalianScriptStd') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

// Custom Fonts Implement:

h1 {font-family: 'CarefreeSerif-Regular'!important;
  font-style: normal;}

h2 {font-family: 'CarefreeSerif-Regular'!important;
  font-style: normal;}

h1.BlogItem-title 
{ font-size: 50px ;
  font-family:'CarefreeSerif-extralight'!important;
font-style: normal;}

h2.Index-gallery-item-content-heading 
{ font-family: 'Carefreeserif-extralight'!important;
  font-size: 65px;
}

h4 {   
color:#f6f3ef;   
font-family: SackersItalianScriptStd !important;
font-style: normal;
font-size:33px;   
letter-spacing: 0em;   
  line-height: 0em;
margin-bottom:10px; }

//

See this

https://forum.squarespace.com/topic/232662-custom-fonts-not-showing-properly/?do=findComment&comment=595861

Hi all, 

My custom font Ranille is working on Chrome on desktop, but not at all on Safari or mobile (iOS). I'm a coding novice, and have tried several things that have not worked. This is my current code: 

@font-face {

    font-family: 'Ranille';

       src: url('Lhttps://static1.squarespace.com/static/60c3fb0485a57543b8171a4e/t/62fab09aed5c5704dab1a521/1660596378847/Ranille.ttf');

  }
@font-face {

    font-family: 'Ranille';

       src: url('Lhttps://static1.squarespace.com/static/60c3fb0485a57543b8171a4e/t/62fab09aed5c5704dab1a521/1660596378847/Ranille.otf');

  }

h1 {font-family: 'Ranille';}
h2 {font-family: 'Ranille';}
:root {
  font-variant-ligatures: none;
}
h1 {
    font-family: 'Ranille' !important;
}
h2 {
    font-family: 'Ranille' !important;
}

Would appreciate any and all help. Thank you!

I think that the header-title...() class updates when you're on mobile. I'd start with inspecting your website and setting the inspector view to a mobile device!

Best of luck! 😄

Hi @tuanphan

I am having the same issue , all fonts are working perfectly on editing view but on my live mobile site some fonts are appearing incorrectly, example would be the title on this page: https://nahinc.co.uk/bracelets works great on desktop not mobile. My code is:

font-face {
font-family: 'NEWSAGENT';
src: url('https://static1.squarespace.com/static/63983691f4abd17b78f87f79/t/639844ef1126fe1d05079e74/1670923503916/Newsagent-Regular.otf');
}
h1 {
font-family: 'NEWSAGENT';
}
h2 {
font-family: 'NEWSAGENT';
}
h3 {
font-family: 'NEWSAGENT';
}
h4 {
font-family: 'NEWSAGENT';
}

32 minutes ago, HMagorRoberts said:

font-face {

You are missing the '@' symbol that should be on the first line:

@font-face {

Did this help? Please give feedback by clicking an icon below  ⬇️

help😅

I've used this code to change my website title and it's working on my computer but not showing in mobile

@font-face{ font-family: 'LEIXO'; src: url ('https://static1.squarespace.com/static/638e2d2f9489023a9bd18d4c/t/63af083d032d172e9f7009b3/1672415293763/LEIXO.ttf '); } /

/ Site Title // .header-title-text a { font-family: LEIXO !important; }

the first two screenshots from my computer and the third one from my phone.
?

@tuanphanThank you @tuanphan. I don't suppose you know why my description copy is black on this page? https://nahinc.co.uk/earrings/p/beaded-daffodil-earrings-xndz5-ynk3w-fry6r all the other pages are the set colour in the theme being pink but only the 'earrings' pages are showing the text as black!

1 hour ago, lamessaleh said:

it's working on my computer but not showing in mobile

There is an error in the CSS (an extra space). It works on your computer (and only your computer) because you have the font installed on it. To resolve the issue, remove the space between "ttf" and the quotation mark.

LEIXO.ttf ');

Did this help? Please give feedback by clicking an icon below  ⬇️

I removed the space between "ttf" and the quotation mark, but it's still the same.
can you help please?

1 minute ago, lamessaleh said:

I removed the space between "ttf" and the quotation mark, but it's still the same

Unfortunately you also removed the brackets 🥲. 

is this right?
still no differnce on mobile?

20 minutes ago, lamessaleh said:

is this right?

The correct format is shown below, where ??? is the name you want to assign to the font and ???? is the url of the font. 

@font-face { 
  font-family: '??';
  src: url('???');
}

You have accidentally removed the brackets that were in your previous post so you'll need to add the brackets around the url again. When you've added these, the first part of your CSS should look like this:

@font-face { 
  font-family: 'LEIXO'; 
  src: url ('https://static1.squarespace.com/static/638e2d2f9489023a9bd18d4c/t/63af083d032d172e9f7009b3/1672415293763/LEIXO.ttf');
}

No change on mobile

Please provide a link to the site. If the site isn’t live, please see How to Post a Forum Question for guidance on how to provide a link to your site.

@tuanphanThank you @tuanphan. I don't suppose you know why my description copy is black on this page? https://nahinc.co.uk/earrings/p/beaded-daffodil-earrings-xndz5-ynk3w-fry6r all the other pages are the set colour in the theme being pink but only the 'earrings' pages are showing the text as black!

Here is the link
www.lameessaleh.com
5GKH6d5c7UXgB2i

50 minutes ago, lamessaleh said:

Here is the link

Thanks for the link. I can see the CSS on your site but the brackets are still missing. Please try adding these and saving your changes. Here's what happens when I add the brackets:

I think their is a problem in squarespace because here's the code that I have now and the brackets are still here.
 

👇 That's my code right now

4 hours ago, lamessaleh said:

I think their is a problem in squarespace because here's the code that I have now and the brackets are still here.

The issue is that you still have a syntax error in your code. You have a space character between url and (. That space causes a parsing issue and the code gets munged.

If the code goes in as...

@font-face {

  font-family : LEIXO;
  src : url ( 'https://static1.squarespace.com/static/638e2d2f9489023a9bd18d4c/t/63af083d032d172e9f7009b3/1672415293763/LEIXO.ttf' );
  
  }

.header-title-text a {

  font-family : LEIXO;
  
  }

...it gets processed into...

@font-face {
  font-family: LEIXO;
  src: url 'https://static1.squarespace.com/static/638e2d2f9489023a9bd18d4c/t/63af083d032d172e9f7009b3/1672415293763/LEIXO.ttf'
}

.header-title-text a {
  font-family: LEIXO
}

...which is missing the curved brackets.

Here is the code as it should look.

@font-face {

  font-family : LEIXO;
  src : url( 'https://static1.squarespace.com/static/638e2d2f9489023a9bd18d4c/t/63af083d032d172e9f7009b3/1672415293763/LEIXO.ttf' );
  
  }

.header-title-text a {

  font-family : LEIXO;
  
  }

Let us know how it goes.

50 minutes ago, creedon said:

The issue is that you still have a syntax error in your code. You have a space character between url and (. That space causes a parsing issue and the code gets munged.

If the code goes in as...

@font-face {

  font-family : LEIXO;
  src : url ( 'https://static1.squarespace.com/static/638e2d2f9489023a9bd18d4c/t/63af083d032d172e9f7009b3/1672415293763/LEIXO.ttf' );
  
  }

.header-title-text a {

  font-family : LEIXO;
  
  }

...it gets processed into...

@font-face {
  font-family: LEIXO;
  src: url 'https://static1.squarespace.com/static/638e2d2f9489023a9bd18d4c/t/63af083d032d172e9f7009b3/1672415293763/LEIXO.ttf'
}

.header-title-text a {
  font-family: LEIXO
}

...which is missing the curved brackets.

Here is the code as it should look.

@font-face {

  font-family : LEIXO;
  src : url( 'https://static1.squarespace.com/static/638e2d2f9489023a9bd18d4c/t/63af083d032d172e9f7009b3/1672415293763/LEIXO.ttf' );
  
  }

.header-title-text a {

  font-family : LEIXO;
  
  }

Let us know how it goes.

YOU ARE A HERO!! It worked! Thank you so much 
🙏♥️

Hi @tuanphan we have a site that is having a similar issue where Google Chrome is displaying the correct fonts but safari is not. Below is the link and password. If you could take a look for us we would appreciate it. Thank you! 

URL: https://martini-i3-may.squarespace.com/about

Password: DoveLove2022!

On 1/6/2023 at 3:59 AM, Dovely2023 said:

Hi @tuanphan we have a site that is having a similar issue where Google Chrome is displaying the correct fonts but safari is not. Below is the link and password. If you could take a look for us we would appreciate it. Thank you! 

URL: https://martini-i3-may.squarespace.com/about

Password: DoveLove2022!

Custom font or Squarespace font? If custom font, which code did you add?

If Squarespace font, which element you want to apply the font? and which font?