Trouble with downloading font in Custom Css

Hi!

I have downloaded and paid for my font that goes with my branding and am having a hard time getting access to it for my website.

I have gone to custom css and added/uploaded the .OTF and put it in what I thought was the right code? 

What I have in manage custom css: 

@font-face {font-family: Malibu;
src: url(//static1.squarespace.com/static/6452c41623fdff7382b815f9/t/6453eb93731c425e7f853752/1683221395683/malibu.otf);
}

Obviously I am doing something wrong but do not know what. Any time I think I did it right the font is now existent when I try to use it on my page. Hope I am making sense, I am new to this. Help please and thank you!!!!

/*custom font*/
@font-face {

    font-family: 'ENTER FONT NAME HERE';

       src: url('ENTER URL HERE');

  }

#header h1.site-title {font-family: "ENTER FONT NAME HERE";}
h1 {font-family: 'ENTER FONT NAME HERE';}
h2 {font-family: 'ENTER FONT NAME HERE';}
h3 {font-family: 'ENTER FONT NAME HERE';}
h4 {font-family: 'ENTER FONT NAME HERE';}

@hayleypaige delete what you have in CSS and copy the code above. Name the font family where it says to do so and then where it says enter url here you highlight the part between the single quote marks and then click on the font in your uploaded files.

Below you can keep all four headers and put the name you have for your font there or you can pick and choose which ones you want the font for. Just delete any you don't want to customize. Hit save and you should be good. If you can't get it tag me and I'll see if I can walk you through it step by step.

@sayreambrosio Thank you for your response!!

This is what I put in now and I still am not seeing it in my font selections. =( 

/*custom font*/
@font-face {

    font-family: 'Malibu';

       src: url('https://static1.squarespace.com/static/6452c41623fdff7382b815f9/t/6453eb93731c425e7f853752/1683221395683/malibu.otf');

  }

#header h1.site-title {font-family: "Malibu";}
h1 {font-family: 'Malibu';}

1 hour ago, hayleypaige said:

@sayreambrosio Thank you for your response!!

 

This is what I put in now and I still am not seeing it in my font selections. =( 

 

/*custom font*/
@font-face {

    font-family: 'Malibu';

       src: url('https://static1.squarespace.com/static/6452c41623fdff7382b815f9/t/6453eb93731c425e7f853752/1683221395683/malibu.otf');

  }

#header h1.site-title {font-family: "Malibu";}
h1 {font-family: 'Malibu';}

Can you share the url of the site you are using this on? I know if we can't figure it out @tuanphan may have suggestions and will need the url to check the code.

@sayreambrosio Thank you so much for your help.

the OTF I am using is: 

https://static1.squarespace.com/static/6452c41623fdff7382b815f9/t/6453eb93731c425e7f853752/1683221395683/malibu.otf

I have other links or licenses (?) as well. When I put that in alone it says syntax error line 1 and "https:" is purple. 

5 hours ago, hayleypaige said:

@sayreambrosio Thank you so much for your help.

 

the OTF I am using is: 

https://static1.squarespace.com/static/6452c41623fdff7382b815f9/t/6453eb93731c425e7f853752/1683221395683/malibu.otf

 

I have other links or licenses (?) as well. When I put that in alone it says syntax error line 1 and "https:" is purple. 

Oops I mean your website not the font. 

sorry! haha my website is hayleypaigehair.com 

wait. I did duplicate my website and am trying to rebrand on the duplicate. Would that have anything to do with it?

Duplicating the site shouldn’t have anything to do with it. I’m not home, but as soon as I get home, I will take a look at the code.

I totally appreciate your help! I created my new brand board and of course this font is in it. Lol 

10 hours ago, hayleypaige said:

I totally appreciate your help! I created my new brand board and of course this font is in it. Lol 

Looks like you are missing a semicolon. This is what I see when I look on my end.

@font-face {
    font-family: 'Malibu';
    src: url('https://static1.squarespace.com/static/611b29e82a1b6b6dd1d8860b/t/645b8c91a3ecbc1d79dceea8/1683721361303/malibu-webfont.woff')
}

#header h1.site-title {
    font-family: "Malibu"
}

h1 {
    font-family: 'Malibu'
}

Try highlighting that and deleting and then copy and paste this into the CSS section.

/*custom font*/
@font-face {

    font-family: 'Malibu';

       src: url('https://static1.squarespace.com/static/611b29e82a1b6b6dd1d8860b/t/645b8c91a3ecbc1d79dceea8/1683721361303/malibu-webfont.woff');

  }

#header h1.site-title {font-family: "Malibu";}
h1 {font-family: 'Malibu';}

I tried. Even waited a couple days to see if it like needed to load? haha! =( It does not want to work for me. 

because I should be able to go into design and change font family to malibu and every time i type it in or scroll down after hitting save on the custom css its still not appearing =( 

i appreciate your help. Technology hates me lol