How to add a custom font library to a css file

Something I find myself doing quite often is searching for unique fonts to add to my projects in order to make them stand out so I figured I’d make a quick guide on how I do it.

First you’ll want to find a specific font that you can get access to a .ttf file which in most cases is the hardest part.

My favorite example is when I worked with a partner on a pokemon battle game and wanted to find the classic gameboy font from the original games.

I was able to find a great resource at https://www.cufonfonts.com/font/pokemon-fire-red

All you have to do is download the file, add it to your local and bring it into your program. There are surely ways to do it from the terminal but being a visual learner I like to just drag it from my files directly into visual studio code.
I recommend creating a folder called “fonts” (preferably under assets if you’re working in a react app) and dropping it there.

You will most likely be met with a warning. Not to fear as this is just because there are some unfamiliar characters.

After hitting ok you will given some code that looks something like this.

After having that file added you can now jump into your CSS file and start to add it to your program.

You will begin by bringing the ttf file you placed into the fonts folder into your css under what you will declare as @font-face. You will declare a font family within that so that you can refer back to it from other styling declarations. You will also want to name the “src” and have that referring to where you placed the ttf file. In this case it looks something like this

Now you can use your newly created font-family to style any font within your program. In my project I wanted to have any text on the screen appear in that style so it was as easy as just setting the html to that font family.

Thats all there is to it! You now have the ability to use any font you want!