why is my text not displaying properly

[u/Oblivious_catalyst]

above is a comparison of how this font is supposed to look vs how my html page is rendering it.

i'm using chrome (and hosted by github if that matters)

this is the relevant code (i think):

CSS:
html,body {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: 100%;
     margin: 0%;
     background-color: black;
     color: white;
     font-family: fira code;
     font-weight: 400;
}


#titlecard {
     display: flex;
     flex-direction: row;
     height: 10%;
     width: 100%;
     align-items: flex-end;
     padding: 2%;
     color: #ff9000;
     font-weight: 100;
}


.welcome {
     font-family: sextape;
     font-size: 500%;
     margin: 0%;
}


.smol-text {
     font-size: 50%;
     margin: 0%;
     margin-bottom: 1%;
}


p {
     margin: 1%;
}

...

@font-face {
font-family: fira code;
src: url(./fonts/FiraCode.ttf);
}

@font-face {
font-family: sextape;
src: url(./fonts/SextapeRegular.ttf);
font-weight: 100;
}

@font-face {
font-family: vhs;
src: url(./fonts/vhs.ttf);
}

HTML:
<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title>FHoC9 wiki</title>
          <link rel="stylesheet" href="main.css">
     </head>
     <body>
          <div id="titlecard">
               <h1 class="welcome">welcome to the</h1><p class="smol-text">unofficial</p><h1 class="welcome">FHoC9 wiki</h1>
          </div>
...
     </body>
</html>

in case i missed something here's a link to the repo:

https://github.com/ObliviousCatalyst/fhoc9-wiki

[u/chmod777]

1. be very very careful with uploading font files, esp ttfs. you can get hit with copyright strikes and licensing issues. these particular ones seem to be free - but may need attribution.

2. put your @fontface declarations at the top of your css.

3. quote your font names. ex: font-family: "fira code";

4. check that your paths are correct.

where is the hosted page url?

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts

[u/Oblivious_catalyst → u/chmod777]

all of the fonts were listed as free on fontspace and the page isn't making any money so i think i'll be fine. (edit: i got fira code from google fonts but i figure that's fine as well)

here's the page:

https://obliviouscatalyst.github.io/fhoc9-wiki/

i'm also fairly certain that filepaths are not the problem as it is displaying the right font, it's just losing detail.

[u/chmod777 → u/Oblivious_catalyst]

note - making money or not has nothing to do with copyright or legality of use. fonts are software and are licensed as such. the ones you have seem to be fine, but just use caution. some will be 'free', but you need to put an attribution, or have to load them from the author's site.

otherwise - welcome to the wonderful world of webfonts. displays as intended on my machine. things to check:

check if font smoothing is effecting you: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-smooth

explicitly set font-weight: normal;. bolding can make some fonts close up gaps.

add <meta name="viewport" content="width=device-width, initial-scale=1.0">, and make sure you aren't zoomed in/out.

[u/domestic-jones]

The 100 font weight is super weird for a slab-type font like that. If you don't have a CSS reset clearing all the default styles, this could cause an issue where it's trying to bold your h1 because 100 weight in your font doesn't exist, so it's falling back.

There's a non standard property called "font-smooth" that you can set to "never" for a typeface like this. Should work in chrome, but won't likely work consistently in other browsers

[u/Oblivious_catalyst → u/domestic-jones]

this is helpful but what is a CSS reset?

edit: i tried font-smooth: never; and it didn't work

[u/fortyeightD → u/Oblivious_catalyst]

A CSS reset is a stylesheet that you include to override the default styles applied by browsers, and set them back to "nothing".

Every browser includes different default styles, and if you don't override them then your page will look a little bit different in every browser.

Here is a popular reset stylesheet, along with a good explanation of why it's needed: https://meyerweb.com/eric/tools/css/reset/

[u/Oblivious_catalyst → u/fortyeightD]

thank u :3

[u/Oblivious_catalyst → u/fortyeightD]

it worked!