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

Custom fonts not loading on mobile


Recommended Posts

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

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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');
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
  • 5 months later...
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?

No Such Website
The website you requested does not exist.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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/

Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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

 

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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

Link to comment
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

 

Link to comment
  • 2 months later...

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

Link to comment
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);
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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!

 

Link to comment
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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

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

 

Link to comment
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?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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...