WordPress is a pretty powerful CMS but its default configuration has very limited font options at your disposal. If you want to style your website a bit from the ordinary, you might need to change the typography of your website with unique custom fonts that you have downloaded from a third party source. For an absolute beginner who is still learning the ropes of web development, this tutorial is very helpful is it teaches the basic technique on how to makeover a website.
Here’s how to add custom font in WordPress website
To follow this tutorial, it is presumed that you have access of the files in your directory through FTP client like Filezilla and that you have a text editor like Notepad++. Also, this tutorial makes use of @font-face method of adding font instead of the wp_enqueue technique achieved by adding a custom function in your functions.php nor the @import url() system. We will discuss these techniques later in separate posts so keep focus on this tutorial for now.
If you have not yet downloaded the font that you want to use, or you have not yet decided as to what font do you want to integrate, you can visit some of the free font directory websites for some inspiration. Dafont and Font Squirrel are some of the largest font repositories and you can download fonts for your projects for free. For commercial purposes however, you need to check its license if it so allowed by its author.
- Download the font eg. Arizonia as in this example.
2. Once you have downloaded the font, create a folder and cut the .zip file into it and extract.
3. Go to Font Squirrel web font generator and convert the font into web friendly format.
4. Click the “Add Fonts” button, check the agreement and download your fonts. If you need more fine-grain control, choose the Expert option. I go with the default selection though, *optimal.
5. Click the “Download Your Kit” button and extract the .zip file.
6. Create a folder in your theme directory and name it “fonts” if it still doesn’t have that folder. Also on your ftp drive, create a folder and also name it as “fonts”.
7. Copy all the EOT File, SVG Document, TrueType Font File, WOFF File, WOFF2 File and put them inside a folder called “fonts” in your computer ftp memory.
Here’s what these files are for:
- TrueType Fonts format is intended for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0
- WOFF fonts is for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
- SVG fonts for apple devices like iPad and iPhone and;
- EOT fonts for Internet Explorer 4+
8. Upload all the files from the folder “fonts” in your ftp computer memory, to your WordPress theme folder called “fonts”
9. Download your theme’s stylesheet and open it with your text editor.
10. Open the stylesheet of the Font-Squirrel-generated files.
11. Copy all of them and paste them on your theme’s stylesheet.
12. Tweak your theme stylesheet’s font directory code so it would point to the source files accordingly. Add this before the file name. ../name-of-theme-/fonts/name-of-the-file
13. Save your theme’s stylesheet and upload.
14. Your font is now ready to use. To use it, simply call the font-family.
Here’s the result of my work applied on the title of the blog post.