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


If a response has helped you, please give thanks using the  like-20-mag.png.3997345d620e40b4760b5d7a667cad54.png button.
Need personalised help? I'm a professional Developer who works with Designers internationally. You can book me via my company's website. www.sf.digital

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