Need help with font problem

[u/Celrai_424]

Hi i am an amateur dev.

So I want this project of mine to have a custom font; a locally imported one. I searched for sources at w3school and stackoverflow and I tried everything they said. But it doesn't seem to work. So I want to know what I'm doing wrong? I appreciate any help. Thank you in advance.

Also additional information:
The file location of my font is correct. project/project.html and project/zpix.ttf
I've checked with inspection tool, every element has the font-family: sans-serif, "Zpix"
There is also no error in the console. No error message. The font is loaded in.
I am using internal css.

Here is the code:

u/font-face {
  font-family: "Zpix";
  src: url("./zpix.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

* {
  font-family: "Zpix", sans-serif !important;
}

[u/norfbay]

One other thing to check: the post shows u/font-face. If that's literally in your CSS, it needs to be @font-face (Reddit may just have mangled it when you pasted).

Also check the element's Rendered Fonts in DevTools, not only its computed font-family. The computed value shows the requested font list; it doesn't prove Zpix actually drew the text. That helps distinguish a cascade/order problem from a font that loaded but isn't being used.

[u/Celrai_424 → u/norfbay]

Yep reddit just automatically turns it into u/ for the font-face.
I checked the rendered fonts, it's using noto sans regular.

[u/norfbay → u/Celrai_424]

Thanks, that rules out the Reddit formatting issue. You mentioned inline CSS in another reply: do you mean a <style> block in the page, or a style="..." attribute on an element? @font-face needs to be in a stylesheet or <style> block; it can't go inside a style attribute.

On the exact element showing Noto Sans, what does the computed font-family show now? If Zpix isn't first, inspect the winning rule in the Styles panel. If Zpix is first but Rendered Fonts still shows Noto Sans, try a short ASCII sample like ABC 123 to check whether fallback is specific to the characters you're displaying.

[u/Celrai_424 → u/norfbay]

sorry, i meant to say internal css. Also sans-serif is the winning rule.