HTML & CSS Custom font css not working in Squarespace 7.0

[j393]

My custom font CSS is not working in Squarespace 7.0. I have uploaded the font which is this font: https://connary.com/wayfinder.html



I am using this code to add the font, but nothing is changing and the font is not displayed.

@font-face {
font-family: 'Wayfinder';
src: url('https://static1.squarespace.com/static/603e9a9da51e5672d8d9633a/t/60c8026984d82a4fe9c58594/1623720553471/WayfinderCF-Thin.otf');
  }
h1 {font-family: 'Wayfinder';}

What am I doing wrong? PLEASE HELP

 

[BGB]

Try This -

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wayfinder</title>
   
    <style>
        @font-face {
            font-family: 'Wayfinder';
            src: url('fonts/WayfinderCF-Thin.otf') format('opentype');
        }
        main {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        main > h1 {
            font-family: 'Wayfinder';
        }
    </style>
</head>

<body>
    <main>
        <h1>How Are You!</h1>
    </main>

</body>

</html>

 

[BGB]

Is not this the font you are talking about. If so than it is working fine here.

 

[j393]

Try This -

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wayfinder</title>
  
    <style>
        @font-face {
            font-family: 'Wayfinder';
            src: url('fonts/WayfinderCF-Thin.otf') format('opentype');
        }
        main {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        main > h1 {
            font-family: 'Wayfinder';
        }
    </style>
</head>

<body>
    <main>
        <h1>How Are You!</h1>
    </main>

</body>

</html>

That did not work and it says there is a syntax error on line 3 I copied it exactly

 

[BGB]

Which one is line 3. Please paste the code not image.

 

[BGB]

If line 3 is this -

<html lang="en">

Than don't worry. Browsers have their own rules and it will still display correctly even if there is syntax error in html. But in your webpage you have forgot to declare character encoding metadata. Please correct the error.