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

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

Share this post


Link to post

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, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...