Luckily, adding your own choice of fonts is relatively easy using the CSS3 Let’s look at how to do it for your WordPress theme.<\/p>\n There are many places to find great web fonts for free such as FontSquirrel<\/a> or Adobe Fonts<\/a>. Just make sure the font you choose has a license suitable to your needs.<\/p>\n Not all free fonts can be used for commercial purposes, but you can buy premium fonts for commercial use from many places such as Typekit<\/a>.<\/p>\n There are also two main kinds of fonts: Serif and sans-serif. Serif fonts have curls over the edges while sans-serif fonts do not.<\/p>\n This might help you remember the difference between the two font types.<\/p>\n The amusing image below might help you remember the difference between the two types.<\/p>\n Once you have chosen your new font, you need to download its file. Keep in mind that there are different kinds of font files and they aren’t all compatible across most major browsers.<\/p>\n Here’s a quick summary of different types of fonts and their file extensions:<\/p>\n The Web Open Font Format has become the standard since the fonts are compressed to consume less of your bandwidth and contain extra metadata. Unfortunately, they’re not always available to download.<\/p>\n If you’re having trouble finding this kind of file, TrueType and OpenType fonts are more readily available for download and are still great choices.<\/p>\n Once you’ve found the font you wish to use and followed your source’s instructions for downloading the file, it’s time to upload it to your server. Before you do, it’s a good idea to backup your entire site before making any changes.<\/p>\n For details on creating a full backup, check out a couple of our other posts: How to Backup Your WordPress Website (and Multisite) Using Snapshot<\/a> and 7 Top Premium and Freemium WordPress Backup Plugins Reviewed<\/a>.<\/p>\n It’s best to add it to the folder of your theme, which can be found under wp-content > themes > your-theme<\/strong>. You could optionally create a “Fonts” folder to house your file to keep things organized, especially if you plan on adding more than one font.<\/p>\n Unzip the packaged file and upload the contents to your theme folder.<\/p>\n In cPanel, click the File Manager<\/strong> button under Files<\/strong> on the main page. If a pop-up opens, select your site’s location followed by the Go<\/strong> button. Navigate to your theme folder and click the Upload<\/strong> button at the top of the page.<\/p>\n Click the Choose file<\/strong> button on the Upload Files<\/strong> page and choose the font files from your computer. Once selected and opened, the files will upload automatically without clicking another button on this page.<\/p>\n No matter where you place your font file, you need to remember its file path. It will be listed on this page in bold after the words Select files to upload to<\/strong>.<\/p>\n To allow your uploaded font to actually appear in your theme, you need to call it in your style.css<\/em> file, which you can find under wp-content > themes > your-theme<\/strong>.<\/p>\n It’s ideal to create a child theme first so your changes aren’t lost when your theme rolls out with updates.<\/p>\n If you’re creating a theme from scratch, this isn’t usually a problem, but if you’re editing a pre-existing theme, you can check out a couple of our other posts, How to Create a WordPress Child Theme<\/a> and How to Automagically Create Child Themes in WordPress<\/a>, for details on how to make a child theme.<\/p>\n In cPanel, select the file, then click the Edit<\/strong> button at the top of the page. If you haven’t previously disabled pop-ups, one will appear. If this is the case, click Go<\/strong> at the bottom.<\/p>\n Copy and paste the following code into the file, ideally, somewhere where fonts are referenced. Make sure there is a line break in between each block of CSS and the code you enter.<\/p>\n@font-face<\/code> rule. All that’s required is uploading a font to your server, then adding it to your theme with a few small snippets of CSS.<\/p>\n\n
Finding a Font<\/h2>\n
![\"A](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/02\/shot-serif.png\")
\n
Uploading Your Font<\/h2>\n
![\"A](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/02\/upload-file-cPanel-700x295.png\")
Adding Your Font to Your Theme<\/h2>\n