Applying custom font to Headers & Navigation

Hi,

I have uploaded a custom font to the CSS sidebar and entered in the source code (see below).

I have also entered the CSS (after watching a YouTube tutorial).  At first the font did change, but only when I entered the "font-size:" text/

I then tried to change the H4 colour, which then caused the header text to revert back to the Squarespace font.  

I've since taken out the font size and colour, but the font is still the SQRSPC one....Not sure why.  

Could someone please help?

CODE:

#font-face{
font-family:'lovelo';
src: 
url(https://static1.squarespace.com/static/5eaa574add3abf2466016021/t/5ebd1c3274201e4e0584e243/1589451827055/Lovelo-Black.otf);
}
h1,h2,h3,h4{font-family:lovelo;}
.Header-nav--primary
{font-family:lovelo;}

The site I'm working on isn't live yet so unable to provide a link.

Thanks in advance!

Can you share link to your site?