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

Custom fonts not loading on mobile


Recommended Posts

Hello,
I uploaded a custom font and it's working fine on desktop but won't load on mobile. I've tested on both android and iphone. My site is https://www.beautybymichele.ca/about (homepage is a cover page). I'm trying to add this font to both the header overlay text and the H1 headings. I read it's good to add many font formats so that's why I have so many. Here is the code I used:

/**********CUSTOM FONTS**********/
//adding playlist script font
@font-face {
    font-family: 'Playlist-Script' !important;
  src: url('https://static1.squarespace.com/static/5dc1fa82d238444f39cf08ab/t/5dc7183b492ddd0f8b82bc87/1573328955817/Playlist-Script.eot'),
       url('https://static1.squarespace.com/static/5dc1fa82d238444f39cf08ab/t/5dc7184559401f78176f21e2/1573328965178/Playlist-Script.otf'),
       url('https://static1.squarespace.com/static/5dc1fa82d238444f39cf08ab/t/5dc71859df818a4a7428db06/1573328985576/Playlist-Script.ttf'),
       url('https://static1.squarespace.com/static/5dc1fa82d238444f39cf08ab/t/5dc7185f09cdf43d6db139cf/1573328991947/Playlist-Script.woff');
  }

//customize h1 to playlist font
h1 {
  font-family: Playlist Script, sans-serif !important;
  color: #cfa2ad;
  font-size: 40px;
}

//style banner text to playlist font
.desc-wrapper p>strong {
  font-family: Playlist Script, sans-serif !important;
  color: #cfa2ad;
  font-size: 60px;
  line-height: 63px;
  text-transform: capitalize;
}

 

Thank you so much... I have been stuck on this.
Have a good day-
Michele

Link to comment

Hi Michele

There are a few issues that you need to correct. It's not working on desktop either, but if you have the fonts installed on YOUR desktop, it may appear to be working for you 🙂.

Firstly, a rule of thumb is to not add '!important' unless absolutely necessary. You should remove it from line 4 (font-face) as it cannot be added here.

Secondly, whatever you name the font in line 4 ('Playlist-Script') you MUST use the same name throughout, with the quotes. Take a look through the rest of your CSS and replace Playlist Script with 'Playlist-Script'. It should then work.

Let me know how you get on.

-Paul

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect . Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 3 months later...

Hi @paul2009

 I saw you helped someone else with a similar problem to what I am facing with my custom fonts on squarespace. I have filled in the code and the fonts work perfectly on all desktops (not just my own) but they don't work on mobile devices. The code I have used is below and the website is here - https://dove-kangaroo-kam5.squarespace.com/      password: thecommitment    

 

@font-face {
  font-family: 'akzidenz';
  src:
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fc95fef291f3341760e92/1582287200294/berthold-akzidenz-grotesk-be-bold.ttf),
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fd1006da5ca09037d0fed/1582289152788/berthold-akzidenz-grotesk-be-bold-webfont.woff2),
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fd111ef291f334176e079/1582289169411/berthold-akzidenz-grotesk-be-bold-webfont.woff);  
}
h3 {
  font-family: 'akzidenz';
}

@font-face {
  font-family: 'akzidenz';
  src:
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fc95fef291f3341760e92/1582287200294/berthold-akzidenz-grotesk-be-bold.ttf),
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fd1006da5ca09037d0fed/1582289152788/berthold-akzidenz-grotesk-be-bold-webfont.woff2),
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fd111ef291f334176e079/1582289169411/berthold-akzidenz-grotesk-be-bold-webfont.woff);  
}
h1 {
  font-family: 'akzidenz';
}

@font-face {
  font-family: 'Sabon';
  src:
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fc96ca7813949bba7ece2/1582287212698/sabon_roman.ttf),
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fd0f3a7813949bba8c021/1582289139862/sabon_roman-webfont.woff2),
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fd1227d4ad15fa6e3324c/1582289186638/sabon_roman-webfont.woff);  
}
P {
  font-family: 'Sabon';
}

@font-face {
 font-family: 'Sabon';
  src:
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fc96ca7813949bba7ece2/1582287212698/sabon_roman.ttf),
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fd0f3a7813949bba8c021/1582289139862/sabon_roman-webfont.woff2),
url(https://static1.squarespace.com/static/5e4e98e52af88f0ae8ad9b84/t/5e4fd1227d4ad15fa6e3324c/1582289186638/sabon_roman-webfont.woff);  
}
H2 {
  font-family: 'Sabon';
}

 

Many thanks

Harry

Link to comment
  • 9 months later...

Hi Everyone! I am having the same problem. Would you be able to help?

My fonts are not showing on Mobile.

This is my code is:

@font-face { 
font-family: 'Sailec';
src: url(https://static1.squarespace.com/static/5dfbeb951e1a9011a52b6835/t/5f5fb322b11bc31456117109/1600107300708/Sailec+Bold.ttf)
}
h1 {
font-family: 'Sailec', alternative-web-safe-font;
}
h2 {
font-family: 'Sailec', alternative-web-safe-font;
}
h3 {
font-family: 'Sailec', alternative-web-safe-font;
}
h4 {
font-family: 'Sailec', alternative-web-safe-font;
}

Thank you!!

Link to comment
13 hours ago, Gordita said:

Hi Everyone! I am having the same problem. Would you be able to help?

My fonts are not showing on Mobile.

This is my code is:

@font-face { 
font-family: 'Sailec';
src: url(https://static1.squarespace.com/static/5dfbeb951e1a9011a52b6835/t/5f5fb322b11bc31456117109/1600107300708/Sailec+Bold.ttf)
}
h1 {
font-family: 'Sailec', alternative-web-safe-font;
}
h2 {
font-family: 'Sailec', alternative-web-safe-font;
}
h3 {
font-family: 'Sailec', alternative-web-safe-font;
}
h4 {
font-family: 'Sailec', alternative-web-safe-font;
}

Thank you!!

Can you share site url? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

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...
  • 2 months later...

Hi, I have the same problem. I added a code block with the Playfair Display font, and it does not load on the mobile version.

 <h1 class="portfolio-item" style="font-size:310%; font-family:playfair display; !important;"> Hi there! I'm Bea Ibeas, <br>

site: https://www.beaibeas.com/

Any idea on how to fix this?

Thank you in advance

Link to comment

@beaibeas

You have syntax errors in your code. The first issue is in Design > Custom CSS.

1662234832_ScreenShot2021-03-21at2_11_13PM.png.607e45708eb8eb107fcf9a365fad24bc.png

I have no suggestions there as I can't see the code that is causing the problem.

The code you posted should be replaced with the following.

<h1 class="portfolio-item" style="font-size: 310%; font-family: 'playfair display';"> Hi there! I'm Bea Ibeas, <br>

 

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

Link to comment
  • 1 month later...

Can anyone help me?! I am having the same issue of the custom font not showing up on the mobile view! Here is the code that was injected by the previous designer:

 

@font-face {

    font-family: 'gotham-book';

       src: url('https://static1.squarespace.com/static/604b9eee1d2fa95044fa4ca8/t/604ba22f00ce880c5970d75a/1615569455817/Gotham-Book.ot');

  }
h1 {font-family: 'gotham-book';}
h2 {font-family: 'gotham-book';}
h3 {font-family: 'gotham-book';}
h4 {font-family: 'gotham-book';}
p {font-family: 'gotham-light';}
.header-nav-item a {
  font-family: 'gotham-book' !important;
}
/* Button font */
.sqs-block-button-element {
  font-family: 'gotham-light' !important;
}
/* Image blocks and button in image blocks */
.sqs-block-image * {
   font-family: "gotham-book" !important;
}
/* Newsletter form button */
.newsletter-form-button {
   font-family: "gotham-light" !important;
}
.newsletter-form-header {
   font-family: "gotham-book" !important;
}

.newsletter-block .newsletter-form-field-element, .newsletter-block .newsletter-form-button {
  padding: .8rem 2rem !important;
}
.form-wrapper .field-list .field .caption{

  font-family : gotham-light;
  font-size : 16px;
}

.gallery-caption p{font-family:gotham-light!important}
.gallery-caption {background:white;margin-top:-20%; opacity:0!important}
.gallery-masonry-item:hover .gallery-caption {opacity:1!important; transition-duration:0s!important}

.gallery-caption p{font-family:gotham-light!important}
.gallery-caption {background:white;margin-top:-10%; opacity:0!important}
.gallery-grid-item:hover .gallery-caption {opacity:1!important; transition-duration:0s!important}

 

Your help is so greatly appreciated!!!

Link to comment
On 4/28/2021 at 12:53 AM, cassandranicole said:

Can anyone help me?! I am having the same issue of the custom font not showing up on the mobile view! Here is the code that was injected by the previous designer:

 

@font-face {

    font-family: 'gotham-book';

       src: url('https://static1.squarespace.com/static/604b9eee1d2fa95044fa4ca8/t/604ba22f00ce880c5970d75a/1615569455817/Gotham-Book.ot');

  }
h1 {font-family: 'gotham-book';}
h2 {font-family: 'gotham-book';}
h3 {font-family: 'gotham-book';}
h4 {font-family: 'gotham-book';}
p {font-family: 'gotham-light';}
.header-nav-item a {
  font-family: 'gotham-book' !important;
}
/* Button font */
.sqs-block-button-element {
  font-family: 'gotham-light' !important;
}
/* Image blocks and button in image blocks */
.sqs-block-image * {
   font-family: "gotham-book" !important;
}
/* Newsletter form button */
.newsletter-form-button {
   font-family: "gotham-light" !important;
}
.newsletter-form-header {
   font-family: "gotham-book" !important;
}

.newsletter-block .newsletter-form-field-element, .newsletter-block .newsletter-form-button {
  padding: .8rem 2rem !important;
}
.form-wrapper .field-list .field .caption{

  font-family : gotham-light;
  font-size : 16px;
}

.gallery-caption p{font-family:gotham-light!important}
.gallery-caption {background:white;margin-top:-20%; opacity:0!important}
.gallery-masonry-item:hover .gallery-caption {opacity:1!important; transition-duration:0s!important}

.gallery-caption p{font-family:gotham-light!important}
.gallery-caption {background:white;margin-top:-10%; opacity:0!important}
.gallery-grid-item:hover .gallery-caption {opacity:1!important; transition-duration:0s!important}

 

Your help is so greatly appreciated!!!

Hi. Have you solved it yet?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 2 months later...

Can any help me, I'm having the same issue, my customs fonts (SilverSouthSerif and SilverSouthScriptAlt are not displaying on mobile for Headings H1 and H2.

Here is my code. Thanks

 

@font-face {

    font-family: 'Roboto';

       src: url('https://indigo-saxophone-chwp.squarespace.com/config/design/undefined');

  }

h1 {font-family: 'Roboto-Regular';}
h2 {font-family: 'Roboto-Bold';}
h3 {font-family: 'Roboto-Regular';}
h4 {font-family: 'Roboto-Regular';}
h5 {font-family: 'Roboto-Regular';}
P {font-family: 'Roboto-Regular';}

@font-face {

    font-family: 'SilverSouth';

       src: url('https://indigo-saxophone-chwp.squarespace.com/config/design/undefined');

  }

h1 {font-family: 'SilverSouthSerif';
font-style: regular;

  font-size: 60px;

  letter-spacing: 0em;

  text-transform: sentencecase;

  line-height: 1em;
}

h2 {

  font-family: 'SilverSouthScriptAlt';

  font-weight: 500;

  font-style: regular;

  font-size: 70px;

  letter-spacing: 0em;

  text-transform: sentencecase;

  line-height: 1em;

}
h3 {font-family: 'Roboto-Bold';}
h4 {font-family: 'Roboto-Regular';}
h5 {

  font-family: 'SilverSouthScriptAlt';

  font-weight: 500;

  font-style: regular;

  font-size: 40px;

  letter-spacing: 0em;

  text-transform: sentencecase;

  line-height: 1em;

}

Link to comment
5 hours ago, katrinaoxy said:

Can any help me, I'm having the same issue, my customs fonts (SilverSouthSerif and SilverSouthScriptAlt are not displaying on mobile for Headings H1 and H2.

Here is my code. Thanks

 

@font-face {

    font-family: 'Roboto';

       src: url('https://indigo-saxophone-chwp.squarespace.com/config/design/undefined');

  }

h1 {font-family: 'Roboto-Regular';}
h2 {font-family: 'Roboto-Bold';}
h3 {font-family: 'Roboto-Regular';}
h4 {font-family: 'Roboto-Regular';}
h5 {font-family: 'Roboto-Regular';}
P {font-family: 'Roboto-Regular';}

@font-face {

    font-family: 'SilverSouth';

       src: url('https://indigo-saxophone-chwp.squarespace.com/config/design/undefined');

  }

h1 {font-family: 'SilverSouthSerif';
font-style: regular;

  font-size: 60px;

  letter-spacing: 0em;

  text-transform: sentencecase;

  line-height: 1em;
}

h2 {

  font-family: 'SilverSouthScriptAlt';

  font-weight: 500;

  font-style: regular;

  font-size: 70px;

  letter-spacing: 0em;

  text-transform: sentencecase;

  line-height: 1em;

}
h3 {font-family: 'Roboto-Bold';}
h4 {font-family: 'Roboto-Regular';}
h5 {

  font-family: 'SilverSouthScriptAlt';

  font-weight: 500;

  font-style: regular;

  font-size: 40px;

  letter-spacing: 0em;

  text-transform: sentencecase;

  line-height: 1em;

}

What is your site url?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 2 months later...

@tuanphan Hi Tuan! Would you be able to help with my code too? 

I want the font to show on my site title and navigation along with the h1. It's currently not showing up on either desktop or mobile. The site is sandradamian.com

Quote

 

@font-face {

    font-family: 'Mango';

       src: url('https://static1.squarespace.com/static/599ba7cf15d5db327ad86d5d/t/6164796cc1a31d18d9c0cdcb/1633974636221/Mango.ttf'), url(https://static1.squarespace.com/static/599ba7cf15d5db327ad86d5d/t/61647987c6d0580035320eeb/1633974663996/Mango.woff;)
url('https://static1.squarespace.com/static/599ba7cf15d5db327ad86d5d/t/61647db7e1770d726d80791d/1633975735619/Mango.woff2';)

  }

h1 {font-family: 'Mango';}
Header-branding-title {
font-family: 'Mango';}
Header-nav-title {font-family: 'Mango';} Header-nav-secondary {font-family: 'Mango';}

 


 

Link to comment

Can someone please fix my code too I'm having the same mobile issue! My site is www.thedivinesocial.com

 

@font-face{
     font-family: 'Bulgari';
     src: url ('https://static1.squarespace.com/static/5fc490c3b8467722f1eb7e1b/t/61606f8a8230495ecf5ab0b0/1633709962694/Bulgari.otf ');
     font-weight: regular;
}
 
h1 {
     font-family: 'Bulgari';
}
@font-face{
     font-family: 'Bulgari';
     src: url ('https://static1.squarespace.com/static/5fc490c3b8467722f1eb7e1b/t/61606f8a8230495ecf5ab0b0/1633709962694/Bulgari.otf ');
     font-weight: regular;
}
 
h2 {
     font-family: 'Bulgari';
}
@font-face{
     font-family: 'Bulgari';
     src: url ('https://static1.squarespace.com/static/5fc490c3b8467722f1eb7e1b/t/61606f8a8230495ecf5ab0b0/1633709962694/Bulgari.otf ');
     font-weight: regular;
}
 
h3 {
     font-family: 'Bulgari';
}

Link to comment
5 hours ago, thedivinesocial said:

Can someone please fix my code too I'm having the same mobile issue! My site is www.thedivinesocial.com

 

@font-face{
     font-family: 'Bulgari';
     src: url ('https://static1.squarespace.com/static/5fc490c3b8467722f1eb7e1b/t/61606f8a8230495ecf5ab0b0/1633709962694/Bulgari.otf ');
     font-weight: regular;
}
 
h1 {
     font-family: 'Bulgari';
}
@font-face{
     font-family: 'Bulgari';
     src: url ('https://static1.squarespace.com/static/5fc490c3b8467722f1eb7e1b/t/61606f8a8230495ecf5ab0b0/1633709962694/Bulgari.otf ');
     font-weight: regular;
}
 
h2 {
     font-family: 'Bulgari';
}
@font-face{
     font-family: 'Bulgari';
     src: url ('https://static1.squarespace.com/static/5fc490c3b8467722f1eb7e1b/t/61606f8a8230495ecf5ab0b0/1633709962694/Bulgari.otf ');
     font-weight: regular;
}
 
h3 {
     font-family: 'Bulgari';
}

Use this new code

@font-face {
    font-family: 'Bulgari';
    src: url('https://static1.squarespace.com/static/5fc490c3b8467722f1eb7e1b/t/61606f8a8230495ecf5ab0b0/1633709962694/Bulgari.otf');
}
h1, h2, h3 {
    font-family: 'Bulgari' !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
On 10/12/2021 at 1:15 AM, sndybear said:

@tuanphan Hi Tuan! Would you be able to help with my code too? 

I want the font to show on my site title and navigation along with the h1. It's currently not showing up on either desktop or mobile. The site is sandradamian.com


 

Your Custom CSS has a syntax error. Can you post all current code in Custom CSS here? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
19 hours ago, tuanphan said:

Your Custom CSS has a syntax error. Can you post all current code in Custom CSS here? We can check easier

Thank you so much for your help! 

 

Here is the full code in Custom CSS: 

 

@font-face {
    font-family: 'Mango';
       src: url('https://static1.squarespace.com/static/599ba7cf15d5db327ad86d5d/t/6164796cc1a31d18d9c0cdcb/1633974636221/Mango.ttf'), url(https://static1.squarespace.com/static/599ba7cf15d5db327ad86d5d/t/61647987c6d0580035320eeb/1633974663996/Mango.woff;),
url('https://static1.squarespace.com/static/599ba7cf15d5db327ad86d5d/t/61647db7e1770d726d80791d/1633975735619/Mango.woff2';)
  }


.header-title-text {
  font-family: 'Mango' !important;
}
.header-nav-item {
  font-family: 'Mango';
}

h1 {font-family: 'Mango';}
Header-branding-title {
font-family: 'Mango';}
Header-nav-title {font-family: 'Mango';} Header-nav-secondary {font-family: 'Mango';}

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