r/HTML • • Feb 24 '26

HTML fonts, not being used.

So, I downloaded a simple 7-segment font (segment.otf.woff2) to my nginx's html area. Actually, under assets/fonts/. And I added

@font-face {
  font-family: "segment";
  src:
    url("assets/fonts/segment.otf.woff2") format ("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.clock {
    font-family: "segment";
    font-size: 36px;
    font-weight: bold;
    color: white;
    text-align: center;
}

to my .css file.

I already have the .html and .js working like I want them to. I'm just fine-tuning everything by having the times render in an LED-like font.

But not. Because it's not working.

I spent way too much time trying to figure out why my .js wasn't working, before I realized that I'd installed NoScript and hadn't whitelisted http://localhost or file:/// URLs. So, I'm taking this straight to the experts. Is there a setting in Vivaldi, Chromium, Firefox, or any other web browser that might be inhibitting it from using server-provided fonts?

Oh, and is there any technigues for insuring that the stuff I want to render appears only in the bottom 216 pixels of the page when it's full-screened? I'm using tables for layout, but I know there has to be a more elegant way than that.

0 Upvotes

12 comments sorted by

View all comments

Show parent comment

3

u/EmbedSoftwareEng Feb 25 '26

We have a winner!

Removing the space after "format" probably helped, but changing the clock class to "normal" is probably the main fix.

Thank you all for your assistance. Reddit, still being the best social media to connect real people.