I am using a variable font that I have downloaded, and the font face doesn't work. The font is local, and the website is local

I am trying to use a custom font on a local Mac that I'm using. No servers or anything, just a basic HTML, CSS website. I am trying to use custom fonts, one variable, the other is static. I amusing @font-face to enable them from their file destination, and after testing a lot, it still doesn't work. I've scoured Stack but I haven't found a solution yet.

Here is the @font-face code:

/* Enabling Font: Uncut Sans VARIABLE */
@font-face {
    font-family: "Uncut";
    src: url('../fonts/Uncut-Sans-Variable.woff2') format('woff2');
    font-weight: 300 700!important;
    font-style: oblique 0deg 12deg!important;
  }
  
/* Enabling Font: Open Sauce */
/* Open Sauce Regular */
@font-face {
    font-family: 'Open Sauce';
    src: url('opensaucetwo-regular-webfont.woff2') format('woff2'),
         url('opensaucetwo-regular-webfont.woff') format('woff');
    src: local('Open Sauce')!important;  
    font-weight: 400;
    font-style: normal;

}
@font-face {
    font-family: 'Open Sauce';
    src: url('opensaucetwo-italic-webfont.woff2') format('woff2'),
         url('opensaucetwo-italic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;

}
/* Open Sauce Medium */
@font-face {
    font-family: 'Open Sauce';
    src: url('opensaucetwo-medium-webfont.woff2') format('woff2'),
         url('opensaucetwo-medium-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;

}
@font-face {
    font-family: 'Open Sauce';
    src: url('opensaucetwo-mediumitalic-webfont.woff2') format('woff2'),
         url('opensaucetwo-mediumitalic-webfont.woff') format('woff');
    font-weight: 500;
    font-style: italic;

}

Here is the CSS code where I set the fonts above in heading and body.

body {
    font-family: "Open Sauce", sans-serif;
    font-size: 20px !important;
    letter-spacing: -0.5px;
    line-height: 1.7;
    color: #011C42;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: #011C42;
    font-family: "Uncut", sans-serif;
    font-weight: 550 !important;
    line-height: 0.8;
}

My index.html file is in /main folder.

My CSS folder is in main/assets/css/style.css

My fonts are in main/assets/fonts/fontname.woff2

Solution

I have implemented them on my sites in the following way:

@font-face {
    font-family: Inter;
    src: url('./assets/fonts/Inter/Inter-Regular.ttf');
}

body {
    font-family: Inter, sans-serif;
}

A way you can check if the font is applied is by inspecting the element, going to computed styles and checking the font-family property.

A way you will easily debug your issue is to make a simpler demo. Make a simple HTML file, have one h1 element and try importing only the font and setting it to the h1 element, as in my example (without any extra CSS properties). And put everything in one folder for an easy implementation.

You can try implementing the Inter font ( https://fonts.google.com/specimen/Inter - there's a download family button ) to see if everything is okay with it, there may be something up with the fonts your testing or their format.

And, of course, never forget to clear your browser cache, since CSS gets cached and changes may not always be displayed. For Chrome the shortcut is CTRL + SHIFT + R.

It may also be worth checking the different form formats just in case. ( https://www.w3schools.com/css/css3_fonts.asp )