Manually adding a font to WordPress without a plugin

I figured I would document this as I have been asked about it a few times and recently had a client that needed a custom font added to WordPress. While I know there are a handful of plugins that will achieve the desired effect, I opted doing this manually instead of adding another plugin.

First off I wanted the add the ability to upload the new font via the WordPress media uploader, since the font file is not an allowed file type when it comes to the media uploader within WordPress, I added the following code snippet to the functions.php in the theme they were using to allow for the upload. In this case it was a TrueTypeFont (.ttf).

After this had been added I was now able to upload the font with the WordPress media uploader much like you would do with a standard image. I then navigated to the edit screen for the new upload and copied the File URL to use in the CSS of the theme.

font_edit_screenNow that I had the location of the newly uploaded font file I could add this to the CSS of the theme as a @font-face by adding the following to the themes CSS file.

Since the new font has been added to the CSS file I was able to use it anywhere in the theme. In this case I needed to use it in the navigation menu of the site, I did so by changing the font name for the navigation menu to reflect the newly added font as shown here.

That is all you need to do in order to use additional fonts within your WordPress site without the need of a plugin.