ok, so, fonts. they seem difficult, but they're actually pretty simple.

step 1: getting the font

there are some various in-built fonts, but they vary by browser iirc (and most of them are lame), so it's best to download one yourself. Here's an example font, directly from my site's files: font link. You can usually find fonts just by looking them up (and sometimes by looking in a game's files).


step 2: adding the font

so, you've got the font, but now what? how can you use it? as with all website jank, the answer is css.

first, you're gonna want to put the font somewhere on your site. the location doesn't matter, as long as you can remember where it is.

next, open the css file that's serving as your page's style.css

now, add a fontface declaration. these are pretty boilerplate (i just copy paste all mine and change the minute details), so here's another example from my site:

@font-face {font-family: "VCR OSD Mono"; src: url("/fonts/VCR_OSD_MONO/VCR_OSD_MONO.ttf") format("truetype") }

the font-family: declaration just names the font in your css (we'll get to that later), and the url links to where it is. the format declaration declares what type of font it is. nowadays, you only see two formats. opentype (.otf), and truetype (.ttf). make sure you use the right format declaration!

anyways, you can just add the fontface anywhere on your css, as long as it's on the css.


step 3: applying the font

ok, so, now you've got the font, you want to apply it. this is the simplest part. just make a css class! here's an example:

.example {
font-family: VCR OSD Mono;
}

As you can see, we refer to "VCR OSD Mono" as the font-family (as mentioned earlier), and now the code knows what font to use! now we just add the class to a tag (this can be a <p>, a <span>, a <div>, whatever your heart desires), and everything in it will be the font!


example code:

<p class="example">test text </p>

becomes...

test text




hope this helps!