Jump to content

Custom font not showing from my mobile phone

Recommended Posts

Hi,

I put in a custom font on my CSS design. It's looks correct from my desktop view and mobile view through the desktop but when I check my website through my mobile device, the font does not show on my website. I've tried adding more lines with different header names but that seems to do nothing, not sure if its my code. I have zero coding experience so i'm hoping someone who does can help out in some way.  Thanks! 

This is the password for the website - fajewelry2023

This is my code for the font 

#site-title {font-family: 'huova'; src:local('huova'), url(http://static1.squarespace.com/static/5683f9f1cbced6d45d92de3d/t/56855928e0327c02e3702e57/1451579688037/Example.otf)
}

// Heading 1 //

h1 {font-family: 'huova';}

// Heading 2 //

h2 {font-family: 'huova';}

// Heading 3 //

h3 {font-family: 'huova';}

// Normal //


h4 {font-family: 'huova';}

h5 {font-family: 'huova';}

h6 {font-family: 'huova';}

h7 {font-family: 'huova';}

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

The start of your code isn't right, did you upload the font to the CSS file upload?

Once you've uploaded the font you'll need to correctly reference it like this:

@font-face {
  font-family: 'huova'; 
  src: url(‘font-url-here’);
}

Read this for more info:
https://squarefortytwo.com/squarespace-guides/custom-fonts-on-squarespace-71

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

I uploaded the font correctly and the mobile view is still the same 

@font-face {
   font-family: ‘huova’;
   src: url(‘https://static1.squarespace.com/static/61a514f7d5ff0b5ad9e7460d/t/61a7ad6dbc2b00294ebe3a2b/1638378861907/huova-light.ttf’);
  
}

#site-title {font-family: 'huova'; src:local('huova'), url(http://static1.squarespace.com/static/5683f9f1cbced6d45d92de3d/t/56855928e0327c02e3702e57/1451579688037/Example.otf)
}


h1 {font-family: 'huova';}


h2 {font-family: 'huova';}


h3 {font-family: 'huova';}


h4 {font-family: 'huova';}


h5 {font-family: 'huova';}

h6 {font-family: 'huova';}

Link to comment

You need to delete this:

#site-title {font-family: 'huova'; src:local('huova'), url(http://static1.squarespace.com/static/5683f9f1cbced6d45d92de3d/t/56855928e0327c02e3702e57/1451579688037/Example.otf)
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Did it fix the problem?

That code I suggested deleting included a reference to a local file (which won't work for anyone but you) and a URL that was for an example font, and also referencing in the wrong way, so I thought it would be causing the problems in your code.

If you replace that snippet with this it should work on your site title and maybe fix the other problems:

#site-title {font-family: 'huova';}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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

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.