how to use custom fonts on your website

sometimes you may want to use a specific font that isn't already web safe, or that isn't already available on hosted repositories. here's how!

acquiring fonts

the first step is to find the font(s) you'd like to use. there's several repositories that offer tons of fonts to choose from, that are usually free to use. (you always want to check creator terms of use, though; oftentimes to be able to use a free font, the creator requires a link back to them, or another form of acknowledgement. usually they'll include a readme file stating their terms of use with the font download. sometimes a font may require a license to use, which would need to be purchased. licenses in these repositories are typically for personal use, which means they can't be used in any project that makes you money. a person running a personal for-fun site should be good with a credit link, but always check the terms)

where to find fonts:

from there, you'll download the font to your own machine, and if it's in a .zip or .rar, unzip it to a location of choice. (if you don't know how to unzip files, download winrar, install it, right click on the compressed file, and select "extract here" or "extract to _" from the context menu)

checking embeddability

you'll then want to check the embeddability of the font. if the embeddability is restricted, that means it's not capable or allowed to be used as a primary font on a web page. as in, the font creator doesn't want it used on the web or in text editing programs, and has literally set it to be impossible. you can check the embeddability in the file properties, under details. save yourself a headache and always check if a font is restricted or not before moving on to other steps

also know that if you're dead-set on a certain font, the embeddability should still allow it to be used in programs such as photoshop - manually making things like header graphics is always an option, albeit more tedious. (i know from experience from before custom web fonts were even a thing lol. [grandma voice] "back in my day...")

remember that using the font in graphics will still require appropriate credit based on the license of the font. there's also probably ways to unrestrict the embeddability, but don't do that. it's a douche move

converting fonts

to make sure the font always loads properly on every browser, the font should be converted into various formats. my personal favorite converter is available here; it automatically converts the font into every format you need, regardless of what format it was already in

from there, unzip and upload all the font files to your server, then you can start implementing the codes!

coding

paste this code at the very top of your css file:

in the above code, replace DIRECTORY with your own folder name, and the FONTNAME with the name of the font file. (the name of the file with the .ttf extension for example)

the relative file path is used over a full url; if the relative path is not used, the fonts may not work. if you're not familiar with relative file paths, it's essentially shorter paths based on the folder structure of your site. for example, say you're hosted on neocities and have a folder you put your fonts in. the relative path to the file would be /fonts/FONT.ttf while the full url would be https://YOURSITE.neocities.org/fonts/FONT.ttf. if you put everything in the same directy as your index file, then the relative path will simply be /FONT.ttf. you can learn more about file paths here

you also want to make sure you don't have a double file extension in the code. you want /FONTNAME.eot, not /FONTNAME.eot.eot. the parts you do want to leave in are ?#iefix for the second eot file, to have /FONTNAME.eot?#iefix. for the svg file, you'll want to keep #svg, and add the name of the font again, /FONTNAME.eot#svgFONTNAME.)

paste this code where you want to use the font:

in the above code, for FONT NAME, make sure it's the same as what it's called in the file properties, not necessarily what the file itself is named. right click on the file in your machine, and select "properties" from the dropdown menu. then select the "details" tab at the top of the new window. the first property should be "name," and what it says there is what you want to say is the font name in the code. for example, if it says FontName with capitals there, that's what should be used as the font name, even if the file name is fontname.ttf in lowercase characters. the font name will not use a file extension

font-family is most often used for html, body, header, and div sections of a stylesheet. remember you can set different fonts for each of these for more unique designs, and bear in mind it's best to use a legible font for where the most text is going to be on your site - you want people to be able to actually read your content, right? don't forget different sections of a page can also have different font sizes, so that may need to be adjusted for legibility

and voila! it was a bit of work, but now you should have an entirely custom font working on your website!