Custom fonts not loading on mobile

Argh! I dont understand why my custom KAVANA font appears on mobile in some parts but not others. Help!

website: marcellopisu.com

Here's the code:

@font-face {   
font-family: 'KAVANA';   
src: url(URL.ttf/.otfhttps://static1.squarespace.com/static/5849765d15d5db8cc435ef05/t/5e28d1a6e3920e6502041130/1579733414585/KAVANA_by_Vinny+Olimpio.otf), url(URL.woffhttps://static1.squarespace.com/static/5849765d15d5db8cc435ef05/t/6149d8cea1a1c2375c8aa173/1632229582511/kavana_by_vinny_olimpio-webfont.woff), url(URL.woff2https://static1.squarespace.com/static/5849765d15d5db8cc435ef05/t/6149d8e2374806355e90a625/1632229602918/kavana_by_vinny_olimpio-webfont.woff2);}

h1 {
font-family: 'KAVANA';}

h2 {
font-family: 'KAVANA';}

9 hours ago, StudioMP said:

I dont understand why my custom KAVANA font appears on mobile in some parts but not others.

Most likely you need more specific selectors. Specifying h1 or h2 doesn't mean that all h1 or h2 everywhere will get your font.

In other words the places you are not getting your font to show may need a different selector.

On 10/20/2021 at 2:42 AM, tuanphan said:

Can you share site url? We can check easier

@tuanphan any luck? 

On 10/21/2021 at 2:27 AM, mims said:

linecounseling.squarespace.com 

password: line

Hi,

remove sans-serif in font face code. It should be

@font-face {
    font-family: 'Sunflower';
    src: url('https://static1.squarespace.com/static/6151d06bb4fcfe7439d9f3db/t/616c7c877f51613cde10532d/1634499719814/Sunflower-Bold.ttf');
}

Omgsh @tuanphan THANK YOU. It did the trick! I forgot to check this thinking you might not have seen it, and just realized you responded. You are a lifesaver!

On 4/23/2022 at 11:08 PM, GP22 said:

Hi there, I am having the same issue my font: Laterlocks isn't coming through when I access the website on the mobile device. Here is my url: Bathtisma (squarespace.com)

 

Hi. Can you check site url?

lots of people having same issue i've revise the code 1000 times and im sure it must be an issue with squarespace blocking from the editing option 

this is my code can anyone help?

@font-face { 
  font-family:'abigate';
  src: url  ("https://static1.squarespace.com/static/626adf006a62bf121594b38e/t/626af052359672240ec20bcb/1651175506245/abigate+desgo.ttf")}

h1, h2 {font-family:'abigate'!important;}

@font-face { 
  font-family: 'Lestina'; src: url ("https://static1.squarespace.com/static/626adf006a62bf121594b38e/t/626aee5bb4c1367b5b1ab696/1651175027031/Lestina-Regular.ttf");}

h3 {font-family: 'Lestina'}

i can see the second font but not the first one 🤷🏽‍♀️

https://elsa.squarespace.com/

@jennypetit

Your site is private.

Please set up a site-wide password.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

11 hours ago, creedon said:

@jennypetit

Your site is private.

Please set up a site-wide password.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Just now, jennypetit said:

oh hey sorry just done that password: elsa

20 hours ago, jennypetit said:

this is my code can anyone help?

You have syntax errors in your code. Please use the following.

@font-face {

  font-family : abigate-desgo;
  src : url( https://static1.squarespace.com/static/626adf006a62bf121594b38e/t/626bf5dd359672240edd77ba/1651242461593/abigate+desgo.otf );
  
  }

h1,
h2

  {
  
    font-family : abigate-desgo;
    
    }

@font-face {

  font-family : Lestina;
  src : url( https://static1.squarespace.com/static/626adf006a62bf121594b38e/t/626aee5bb4c1367b5b1ab696/1651175027031/Lestina-Regular.ttf );
  
  }

h3 {

  font-family : Lestina;
  
  }

Let us know how it goes.

I'm dealing with the same issue here! The code works on desktop, but not mobile if anyone can take a look? I tried adding all versions of the font, etc. but no luck. Website is www.lilybnelson.com, code below: 

@font-face {
font-family: 'recoleta';  
src: url(https://static1.squarespace.com/static/55511668e4b04fae16fc1a34/t/62617768a7a4a7038a878cfc/1650554728232/Recoleta-Black.ttfhthttps://static1.squarespace.com/static/55511668e4b04fae16fc1a34/t/626c3e754a79d3621f243b97/1651261045744/Recoleta-Bold.woff2https://static1.squarespace.com/static/55511668e4b04fae16fc1a34/t/626c3e754a79d3621f243b97/1651261045744/Recoleta-Bold.woff2https://static1.squarespace.com/static/55511668e4b04fae16fc1a34/t/626177b2131281772d2ff333/1650554802686/Recoleta-Bold.ttfhttps://static1.squarespace.com/static/55511668e4b04fae16fc1a34/t/626177c6bdb6743eef3e4cd4/1650554822124/Recoleta-Regular.ttfhttps://static1.squarespace.com/static/55511668e4b04fae16fc1a34/t/626c3e34b8357d201c68669d/1651260980779/Recoleta-Regular.woffhttps://static1.squarespace.com/static/55511668e4b04fae16fc1a34/t/626c3e754a79d3621f243b97/1651261045744/Recoleta-Bold.woff2https://static1.squarespace.com/static/55511668e4b04fae16fc1a34/t/626c3e7eff446858b21471be/1651261054606/Recoleta-Regular.woff2https://static1.squarespace.com/static/55511668e4b04fae16fc1a34/t/626c3e8534491911a2d1b596/1651261061534/Recoleta-Medium.woff2tps://static1.squarespace.com/static/55511668e4b04fae16fc1a34/t/626177bca1bc46722dc6b57c/1650554812671/Recoleta-Medium.ttf), url(https://static1.squarespace.com/static/55511668e4b04fae16fc1a34/t/626177bca1bc46722dc6b57c/1650554812671/Recoleta-Medium.ttffontURL.woff), url(fontURLhttps://static1.squarespace.com/static/55511668e4b04fae16fc1a34/t/626177c6bdb6743eef3e4cd4/1650554822124/Recoleta-Regular.ttf.woff2);
}
h2 {
font-family: 'recoleta-medium' !important ;
font-size: 20pt;
letter-spacing: .5px;
line-height: 140%;
color: #3b3b3b;
}
#header h1.logo { font-family: "recoleta-black" !important ; font-size: 42pt;
letter-spacing: 1px; }
#projectThumbs .project .project-title {
    font-family: "recoleta-medium" !important;     letter-spacing: .3px; }

21 hours ago, creedon said:

You have syntax errors in your code. Please use the following.

@font-face {

  font-family : abigate-desgo;
  src : url( https://static1.squarespace.com/static/626adf006a62bf121594b38e/t/626bf5dd359672240edd77ba/1651242461593/abigate+desgo.otf );
  
  }

h1,
h2

  {
  
    font-family : abigate-desgo;
    
    }

@font-face {

  font-family : Lestina;
  src : url( https://static1.squarespace.com/static/626adf006a62bf121594b38e/t/626aee5bb4c1367b5b1ab696/1651175027031/Lestina-Regular.ttf );
  
  }

h3 {

  font-family : Lestina;
  
  }

Let us know how it goes.

Thank you that worked

Hi Everyone,

I am also experiencing this problem. I have uploaded various font formats for my custom font but they still are not loading.

Site is https://ruafood.com/

Custom code:

@font-face {

font-family: 'NibPro-Light';

       src: url(https://static1.squarespace.com/static/5f8968aed816681092dcf5f4/t/62bee2f06345c864902d2063/1656677104470/NibPro-Light.ttf),
         url(https://static1.squarespace.com/static/5f8968aed816681092dcf5f4/t/62bf47e71408e71295473214/1656702951596/NibPro-Light.woff),
           url(https://static1.squarespace.com/static/5f8968aed816681092dcf5f4/t/62bf47f20cb5161201392979/1656702962833/NibPro-Light.woff2);

}

Any help would be much appreciated

On 7/2/2022 at 2:48 AM, EJ_Conway said:

Hi Everyone,

 

I am also experiencing this problem. I have uploaded various font formats for my custom font but they still are not loading.

Site is https://ruafood.com/

Custom code:

@font-face {

font-family: 'NibPro-Light';

       src: url(https://static1.squarespace.com/static/5f8968aed816681092dcf5f4/t/62bee2f06345c864902d2063/1656677104470/NibPro-Light.ttf),
         url(https://static1.squarespace.com/static/5f8968aed816681092dcf5f4/t/62bf47e71408e71295473214/1656702951596/NibPro-Light.woff),
           url(https://static1.squarespace.com/static/5f8968aed816681092dcf5f4/t/62bf47f20cb5161201392979/1656702962833/NibPro-Light.woff2);

}

Any help would be much appreciated

1 font = 1 font face code

Use this new code

@font-face {
    font-family: 'NibPro-Light';
    src: url(https://static1.squarespace.com/static/5f8968aed816681092dcf5f4/t/62bee2f06345c864902d2063/1656677104470/NibPro-Light.ttf);
src: url(https://static1.squarespace.com/static/5f8968aed816681092dcf5f4/t/62bf47e71408e71295473214/1656702951596/NibPro-Light.woff),url(https://static1.squarespace.com/static/5f8968aed816681092dcf5f4/t/62bf47f20cb5161201392979/1656702962833/NibPro-Light.woff2);

}
@font-face {
    font-family: 'ApercuLight';
    src: url(https://static1.squarespace.com/static/5f8968aed816681092dcf5f4/t/62bee309dcf9865df79efbaa/1656677129747/Apercu+Condensed+Pro+Light.ttf);
}

Fantastic, it worked! Thank you so much.

Hi, custom font on mobile isn't working. Works perfect on desktop. Does anyone know what we're doing wrong?

Here's the code:

@font-face {
font-family: black bison;
src: url(https://static1.squarespace.com/static/62a09079af6ca364d721392b/t/62b18f4acd29ed4712460f68/1655803722312/Black+bison.ttf);
}
h1 {
font-family: 'black bison';
}

@font-face {
font-family: Nunito Bold;
src: url(https://static1.squarespace.com/static/62a09079af6ca364d721392b/t/62b1909b88edd70e856504ef/1655804059957/Nunito-ExtraBold.ttf);
}
h2 {
font-family: 'Nunito Bold';
}

@font-face {
font-family: Nunito;
src: url(https://static1.squarespace.com/static/62a09079af6ca364d721392b/t/62b19100dec5cf0dce3d2ed3/1655804161254/Nunito-ExtraLight.ttf);
}
p {
font-family: 'Nunito';
}

.sqsrte-large {
font-family: 'Nunito Bold';
}

.sqsrte-small {
font-family: 'Nunito';
}

.header-nav-item a {
  font-family: 'Nunito Bold' !important;
}

nav.header-menu-nav-list a {
    font-family: 'Nunito Bold' !important;
}

Thanks so much for your help!

On 7/11/2022 at 3:03 PM, LTB said:

Hi, custom font on mobile isn't working. Works perfect on desktop. Does anyone know what we're doing wrong?

Here's the code:

@font-face {
font-family: black bison;
src: url(https://static1.squarespace.com/static/62a09079af6ca364d721392b/t/62b18f4acd29ed4712460f68/1655803722312/Black+bison.ttf);
}
h1 {
font-family: 'black bison';
}

@font-face {
font-family: Nunito Bold;
src: url(https://static1.squarespace.com/static/62a09079af6ca364d721392b/t/62b1909b88edd70e856504ef/1655804059957/Nunito-ExtraBold.ttf);
}
h2 {
font-family: 'Nunito Bold';
}

@font-face {
font-family: Nunito;
src: url(https://static1.squarespace.com/static/62a09079af6ca364d721392b/t/62b19100dec5cf0dce3d2ed3/1655804161254/Nunito-ExtraLight.ttf);
}
p {
font-family: 'Nunito';
}

.sqsrte-large {
font-family: 'Nunito Bold';
}

.sqsrte-small {
font-family: 'Nunito';
}

.header-nav-item a {
  font-family: 'Nunito Bold' !important;
}

nav.header-menu-nav-list a {
    font-family: 'Nunito Bold' !important;
}

Thanks so much for your help!

 

What is your site url? We can check easier

Hello,

I'm also having an issue with a custom font working on mobile. 

This is my site url https://cop2-testsite.squarespace.com/

And here is the CSS I have, I uploaded .TTF, woff, and wodd2 files

@font-face {   
font-family: 'ACUMIN-PRO-WIDE';   
src: url(https://static1.squarespace.com/static/62fcb7847067bd37796b7c2a/t/6305e1abfafd33400bc4247b/1661329835245/AcuminProWide-Semibold.ttf), url(https://static1.squarespace.com/static/62fcb7847067bd37796b7c2a/t/6305e1b24c60655c9f5b4783/1661329842127/acuminprowide-semibold-webfont.woff), url(https://static1.squarespace.com/static/62fcb7847067bd37796b7c2a/t/6305e1afc3bafe6396d97dfa/1661329839035/acuminprowide-semibold-webfont.woff2);}
h1 {
font-family: 'ACUMIN-PRO-WIDE';}
h2 {
font-family: 'ACUMIN-PRO-WIDE';}
h3 {
font-family: 'ACUMIN-PRO-WIDE';}
h4 {
font-family: 'ACUMIN-PRO-WIDE';}

23 hours ago, kpeel said:

Hello,

I'm also having an issue with a custom font working on mobile. 

This is my site url https://cop2-testsite.squarespace.com/

And here is the CSS I have, I uploaded .TTF, woff, and wodd2 files

@font-face {   
font-family: 'ACUMIN-PRO-WIDE';   
src: url(https://static1.squarespace.com/static/62fcb7847067bd37796b7c2a/t/6305e1abfafd33400bc4247b/1661329835245/AcuminProWide-Semibold.ttf), url(https://static1.squarespace.com/static/62fcb7847067bd37796b7c2a/t/6305e1b24c60655c9f5b4783/1661329842127/acuminprowide-semibold-webfont.woff), url(https://static1.squarespace.com/static/62fcb7847067bd37796b7c2a/t/6305e1afc3bafe6396d97dfa/1661329839035/acuminprowide-semibold-webfont.woff2);}
h1 {
font-family: 'ACUMIN-PRO-WIDE';}
h2 {
font-family: 'ACUMIN-PRO-WIDE';}
h3 {
font-family: 'ACUMIN-PRO-WIDE';}
h4 {
font-family: 'ACUMIN-PRO-WIDE';}

 

It looks fine on iOS. Which mobile do you use?

Hi, I was wondering if anyone could help me please? It's just the header font, it's showing as the custom font on my desktop but not on my mobile.

This is the code I currently have:

@font-face { font-family: 'CehuaFreeFree-K7eMl';
src: url('https://static1.squarespace.com/static/5d95cb227bc7f16776f98199/t/63036ce51b03ea72e5b1ef20/1661168869298/CehuaFreeFree-K7eMl.otf');
font-weight: normal;
font-style: normal; }
.has-site-title .Header-branding { font-family: "CehuaFreeFree-K7eMl"; }

@font-face {font-family: 'CehuaFreeFree-K7eMl';
src: url('FontURL');}
h_ {font-family: 'CehuaFreeFree-K7eMl';}

On 11/17/2022 at 12:56 AM, moon_sp said:

Hi, I was wondering if anyone could help me please? It's just the header font, it's showing as the custom font on my desktop but not on my mobile.

This is the code I currently have:

@font-face { font-family: 'CehuaFreeFree-K7eMl';
src: url('https://static1.squarespace.com/static/5d95cb227bc7f16776f98199/t/63036ce51b03ea72e5b1ef20/1661168869298/CehuaFreeFree-K7eMl.otf');
font-weight: normal;
font-style: normal; }
.has-site-title .Header-branding { font-family: "CehuaFreeFree-K7eMl"; }

@font-face {font-family: 'CehuaFreeFree-K7eMl';
src: url('FontURL');}
h_ {font-family: 'CehuaFreeFree-K7eMl';}

I remember mobile title uses a different class name.

What is your site url? We can check class name easier

Custom font is working on desktop and mobile preview, but not when I load it on my phone (Chrome/Safari ios).

Website is https://www.anneke.space/

Quote

//ADDING WILD MANGO FONT//
font-face {
font-family: 'WILD MANGO';
src: url('https://static1.squarespace.com/static/5eb2faba1397ea313cfe5c9f/t/637d4e4668475420c8cff89d/1669156422683/WildMango.ttf');
}
h1, h2, h3, h4 {
font-family: 'WILD MANGO';
}
.header-nav *, nav.header-menu-nav-list * {
    font-family: 'WILD MANGO';
}
//PORTFOLIO TITLE FONT//
h1.portfolio-hover-item-title {font-family: 'Wild Mango' !important;}
h1.portfolio-hover-item-title {font-size: calc(2vw + 2rem) !important;}

On 11/23/2022 at 5:52 AM, solitudeSlicer said:

Custom font is working on desktop and mobile preview, but not when I load it on my phone (Chrome/Safari ios).

Website is https://www.anneke.space/

 

Your font face code missing @ symbol

@font-face {
    font-family: 'WILD MANGO';
    src: url('https://static1.squarespace.com/static/5eb2faba1397ea313cfe5c9f/t/637d4e4668475420c8cff89d/1669156422683/WildMango.ttf')
}

On 11/30/2022 at 6:40 AM, redenfield said:

Hey there - same issue. Also my font changes 3 times before it renders correctly on my desktop too. Please halp: getswell.app

 

@font-face {

    font-family: 'gazpacho-bold';

       src: url('FontURLhttps://static1.squarespace.com/static/633defc7cc2ba4503a0957c9/t/633e4b214dd0dc48c822a933/1665026851116/gazpacho-bold.ttf');

  }
@font-face {

    font-family: 'proxima-nova';

       src: url('https://static1.squarespace.com/static/633defc7cc2ba4503a0957c9/t/633e4b6d93e0265718edff03/1665026926613/ProximaNova-Regular.ttf');

  }

h1 {font-family: 'gazpacho-bold';}
h2 {font-family: 'gazpacho-bold';}
h3 {font-family: 'gazpacho-bold';}
h4 {font-family: 'gazpacho-bold';}
h5 {font-family: 'gazpacho-bold';}
h6 {font-family: 'gazpacho-bold';}
p {font-family: 'proxima-nova';}

 

Remove this text from url

Also, proxima-nova is built-in font, so no need to use custom font

Hello! Facing this same issue, please help! Custom font is working on desktop and mobile preview, but not when I load it on my phone (Chrome/Safari ios).

Website is www.thedivinesocial.com

thank you!