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";
}
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')
@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;}