Custom font not showing from my mobile phone

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';}

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

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';}

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)
}

I did that and it removed my site title font.  

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';}