Load local font by using css-CodePudding

I am hosting a javascript project on locally and trying to use the local font, but it seem not loaded, here is my style.css code, ipixregular is the font i am trying to use, may I know what might be the problem? and do I need to refere it in html? thanks

@import "@fontsource/press-start-2p/index.css";
@import "@16bits/nes.css/css/nes.min.css";
@font-face {
font-family: 'ipixregular';
src: url('front/ipix-webfont.eot');
src: url('front/ipix-webfont.eot?#iefix') format('embedded-opentype'),
     url('front/ipix-webfont.woff2') format('woff2'),
     url('front/ipix-webfont.woff') format('woff'),
     url('front/ipix-webfont.ttf') format('truetype'),
     url('front/ipix-webfont.svg#ipixregular') format('svg');
font-weight: normal;
font-style: normal;

}

*{
      font-family: ipixregular
}

.nes-btn {
      font-family: "Press Start 2P";
}

CodePudding user response：

@import loads the font style rules @font-face loads the font

I do not understand why you have the rule font-family: "Press Start 2P"; as that is not a valid font family.

You could try body * {font-family: ipixregular;}

CodePudding user response：

I noticed that you are using "front" instead of "font" in your URLs, to be clear - is this the right folder name? Could simply be a typo.

I.e., from: url('front/ipix-webfont.eot') to: url('font/ipix-webfont.eot')