Font not showing up on mobile devices & Nav bar disappeared

I am currently having two issues I need help with asap!

1) The custom font I have uploaded and plugged into my CSS is not showing up on the mobile view of my website. How do I make it where it will appear the same on both desktop and mobile view? 

2) My navigation bar has completely disappeared. I have tried everything I know to bring it back but have come to a dead end. The menu was there yesterday and gone today and I can not figure out where it went or how to get it back. I can hover over where the nav bar should be and click and it will take me to specific pages but the visible nav bar is not there for clients to see and click.

I have researched how to fix the above two things for hours and need help. Might be a simple fix that I just can't figure out 

Here us the CSS for my custom font that isn't showing up on mobile devices

@font-face {
font-family: 'HelloParisSerif-ExtraLight';
src: url('FontURLhttps://static1.squarespace.com/static/633e9c01a76f02709b803205/t/63d168212aecf51ae1ff68f0/1674668065185/Hello+Paris+Serif+Extra+Light.ttf');}

h1 {font-family: 'HelloParisSerif-ExtraLight';}
h2 {font-family: 'HelloParisSerif-ExtraLight';}
h3 {font-family: 'HelloParisSerif-ExtraLight';}
 

Hey, Please share your website URL