Jump to content

Mobile Header not displaying custom font

Recommended Posts

Site URL: https://herecomesthespooky.com/

I am looking for some help here. 

I loaded a customer font (titled "WerewolfA" on my site) and it displays just fine for everything but recently it will no longer display on my mobile header and I cannot figure out why. For the past several months the font would display just fine on both a PC website and the mobile site but now it suddenly will no longer display the custom font for the mobile header.

Any help would be appreciated and thank you in advance!

Website is:https://herecomesthespooky.com/

Here is the code I have saved/loaded:

@font-face {
    font-family: 'werewolfa';
       src: url('https://static1.squarespace.com/static/5f3ed8e17415291d748ed192/t/5f47098bd4d74d11f98c6409/1598491021415/WolfBrothersAcademy-29vX.otf');
  }
.header-nav-item a {
  font-family: 'werewolfa' !important;
}
.header-nav-item a {font-size: 40px;}
nav.header-menu-nav-list a {
    font-family: 'werewolfa' !important;
}
nav.header-menu-nav-list a {font-size: 55px;}
h1 {font-family:werewolfa;}
.header-title-text {
  font-family:werewolfa;
}
.header-title-text {font-size: 70px;}
@media only screen and (max-width: 640px) {a#site-title { font-size: 80px; }
}

Edited by Spooky_Podcast
Link to comment

I do yes. The font is still displaying incorrectly on the mobile site and I cannot figure out how to fix it. I have attached 2 pictures to showcase the difference between the PC site and the mobile site. The top picture is the PC Font that I am trying to replicate on the mobile site. The bottom picture is what the mobile site currently displays. 

PC_Site_Font.png

Mobiel_Site_Font.png

Edited by Spooky_Podcast
Link to comment
On 6/29/2021 at 8:02 PM, Spooky_Podcast said:

I do yes. The font is still displaying incorrectly on the mobile site and I cannot figure out how to fix it. I have attached 2 pictures to showcase the difference between the PC site and the mobile site. The top picture is the PC Font that I am trying to replicate on the mobile site. The bottom picture is what the mobile site currently displays. 

PC_Site_Font.png

Mobiel_Site_Font.png

Don't remove any code. Add this to Design > Custom CSS

a#site-title {
    font-family: werewolfa !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.