Custom Font Tutorial

Hey guys,

As Professor Vee brought up, it’s easy for your website to look a little outdated because of the default settings. This will be a quick tutorial on how to use a custom font on your website.

I will be using the font BetterTogether for this demo:

Step 1: You have to choose a font and download it. My preference for custom fonts is dafont.com. It has an assorted selection of fonts that are typically free for personal use. I got this particular font at urbanfonts.com. It is important to note the author’s copyright regulations on the ones you pick. Once you have downloaded it, open up the .zip folder and open the font file. Install the font from the window that opens.

Step 2: Now that you have the font installed on your computer, you have access to it. **To find where the font is installed, just do a search for “fonts” in the search bar of your computer. Copy the font file. In order for your html files to have access to it, it must be saved in the same folder as your other files. If you are working from Sublime and a file on your desktop, add all of your files to the same folder. Or you can upload it straight to your repository on github. This step is very important or other computers will not be able to interpret your font!

Step 3: Now that your files have access to the font file, it is time to code it. In the <style> tag, add the code you see below. You must replace where I wrote “BetterTogether” since that’s the name of my font. The font-family is a name you create for your font that you will reference in the next step. The source url is the name of the font file that you copied into the folder. The two most common font files are .otf and .ttf, which are OpenType font files and TrueType font files.

Step 4: The next step involves creating a header or a class and then applying your custom font to that class. Include the font-family name that you created and the size of the font of you want. The fonts vary in size since they are custom, but you just have to play around with it. You can include any other CSS descriptors that you want, including align and color.

Step 5: I decided that the font size at 100% was a little too small so I bumped it up. I added a whole list of things that are better together (ideas from here) in a new font to show how you can do several fonts on one page. Just follow the same steps and you have modernized your webpage.