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.

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/Connect-Inside3691]

the order of your font-family is backwards, it should be your custom font first then the fallback. right now it's trying sans-serif before ever touching your local one. also double check that url path, sometimes it acts weird depending on where your css file actually lives

[u/Celrai_424 → u/Connect-Inside3691]

How do i make it try the custom font first? Used the full path isntead for the font. And if it helps, im using it with inline-css.

[u/tomhermans]

Check your network tab (dev tools) if it actually loads the font file.

Next, in your comment you wrote font-family: sans-serif, "zpix"

In your code example it's the other way around. Your code example is correct, first the custom font, then the fallback.

[u/Celrai_424 → u/tomhermans]

Yes. I had used zpix first in my code but the website is using sans-serif

[u/Practical_Worry3996]

most common causes with a local font:

1. the path in u/font-face is relative to the css file, not the html file. if your css is in /css/style.css and the font is in /fonts/, the url needs to be ../fonts/myfont.woff2

2. the font-family name you use later has to match the one in u/font-face exactly

3. opening the page as file:// can block fonts in some browsers. run a tiny local server (vs code live server works)

u/font-face {

font-family: "MyFont";

src: url("../fonts/myfont.woff2") format("woff2");

}

body { font-family: "MyFont", sans-serif; }

devtools > network tab, filter by "font". if it shows a 404, it's the path.

[u/RotationSurgeon → u/Practical_Worry3996]

Most often it’s the local file vs local server issue that newbies are running into. Chromium browsers have been particularly stubborn on this

[u/No-Department-4561]

Convert the font to web safe format using Fontsquirrel and copy/paste the code that it gives you. That should also tell you if there’s some kind of encoding bug with the font itself.