Adding custom fonts in WordPress isn’t a task you normally need to perform – themes come packed with a font library, usually Google Fonts, giving you the option to choose among a vast number of different fonts you can use on your site. If you, however, work on clients’ websites and are required to use a specific font – or you are just too enthusiastic about making your site perfect, you must master the technique of adding custom fonts in WordPress.
Adding Custom Fonts in WordPress: Step-by-Step
Step 1: Download the Font
You can find custom fonts many places online, both paid and free. One of the largest free font libraries is Google’s, which currently offers 848 font families and many more styles. There are, however, hundreds, if not thousands of other websites offering font libraries or individual fonts. Some of them are listed below:
Choose the font you want to use and download it as a web font kit (recommended) or in the available web font format. Fonts can be downloaded in different formats, such as .TTF, .OTF, .WOFF, .WOFF2, and .EOT. The difference between them is in their browser compatibility. .WOFF and .WOFF2 seem to slowly become the preferred font formats, while .EOT is only supported by IE 6+.
As long as a font is available in format, supported by few browsers, you can use a web font kit generator to create a kit, including all recommended font formats (see step 2 for details).
Step 2: Create a Web Font Kit
Often, when you download a font, it is provided as single file in one of the web font formats (.eot, .ttf, otf, .woff, or .woff2). Each of this formats is only supported by certain browser versions, with .woff being the most universal format at the moment. To make sure that the font you want to use on your website is compatible with as many browsers as possible, you should create a web font kit, containing all or almost all of the web font formats mentioned above.
You can use a smart web font generator for that purpose, for example the one offered by Fonts Squirrel.
The generator allows you to choose, which font formats should be included in the kit (settings appear when choosing Expert mode), as well as whether to embed fonts in CSS or enable family support in CSS. There are tons of settings in Expert mode, so try to only tweak, what you understand. The default settings will work perfectly as they are.
Download the kit and unzip it (it comes as a .zip archive).
Step 3: Create a Child Theme
To create a child theme, you have to create a directory on the server, within public_html->wp-content->themes and give it a name that would tell you that this is your theme’s child theme. You can do that, using either FTP or File Manager directly on the server. In the child theme, you have to create two files: functions.php and style.css. There are necessary for the child theme to function.
Style.css is usually a loose file in the theme directory but can sometimes be placed in a folder, if there are more than one CSS files, used for the theme. When creating a child theme, you must replicate the folder and file structure of your theme by placing each file you use (you need to create only the files you use) in the correct folder or subfolder.
For example, let’s say that the file x.php is found here: theme folder->core->functions. In the child theme, you need to place the new x.php here: child theme folder->core->functions. Replicating the folder and file structure, including names, is necessary as it helps the server discover altered files in the child theme.
As long as you aren’t familiar with the way of creating a child theme or connecting the child to the parent theme, you can follow this link to take a quick free course on creating child themes in WordPress at WPBN eAcademy.
Last but not least, for any of your changes to take effect, you must switch your site to the newly created child theme. No worries, the design won’t be affected, as long as you don’t manually edit the child theme’s files.
Step 4: Installing the Font Kit on the Server
- Log in on the server and navigate to public_html->yoursite->wp-content->themes->parent theme.
- Dump all of the web font files there. They are therefore in the same folder as the parent’s style.css.
- Open style.css in edit mode
- Insert the following code:
- Replace font name with the name of the custom font that you are uploading. You can find the name of the font in the style.css file, included in the web font kit. You can optionally choose to directly use the provided code in the file, it is meant to be copy-pasted in the theme’s style.css. However, keep in mind that the code by Font Squirrel does not follow the bulletproofed syntax, which might result in errors on some browsers. After the .EOT file name, you must insert ?#iefix, in order to instruct correct bowser behavior.
- As long as you want to upload and use multiple styles of the same font, you have to include the code above for all styles and change the value of font-weight and font-style to match the actual font weight and style. As long as you only want to use the regular font weight and style, you can skip these lines, as these are the default font settings.
- Save your changes. That’s it. the font should be ready to be called via CSS (unfortunately, it does not appear as a setting anywhere in WordPress backend to allow you to easily switch to the custom font).
Please note! The path to the font file is relative to the position of style.css. The example above assumes that both style.css and the uploaded fonts reside in the same directory. If you, however, choose to create a subdirectory called fonts within the theme’s folder or style.css has its own folder, the path you have to use in order to point to the font files is /fonts/font-file.file-type. Avoid using capital letters, when creating directories and files, as this can cause errors!
Step 5: Call the Custom Font in CSS
As mentioned above, adding custom fonts in WordPress doesn’t affect theme options, which means that you cannot easily switch to the new font. In order use custom fonts, you have to call them in CSS.
To do that, you can use either WordPress’ custom CSS option (Appearance->Customize->Custom CSS), your theme’s custom CSS field or a plugin, such as Simple CSS & JS. Using either of them will overwrite CSS settings from the stylesheet.
To apply custom font to any of the HTML elements on your site, h1-h6, p, or a, you should type the name of the element and then use the font- family declaration. If you, for example, want to change the font of h2 to the new custom font, you have to use the following CSS, where you exchange “font name” with the actual name of the font, as written in style.css:
Most of the time, it isn’t necessary to use !important after the font name. If the new font isn’t picked up after saving all your changes though, you should use !important as a way to force the style.
That’s it. Your custom font should now appear on your site.
Adding custom fonts in WordPress should be a simple task. There are, however, many things that can go wrong. The worst thing being that you don’t get an error message telling you, what went wrong, so you need to check all possibilities. Let’s review the most common errors:
Wrong Path to Font
It might sound easy to write the path to a file but it might easily go wrong. Adding custom fonts in the same folder as style.css is therefore the safest option, as it makes it possible to link to the font in style.css by only mentioning the file name (as in the example above). If you aren’t sure, whether you have linked correctly to the custom font, you might want to check out this post on relative and absolute paths.
For CSS to work, every coma, semicolon or curly brace should be in place and everything must be spelled 100% correctly. Double and triple check the CSS syntax, if you have problems getting the custom font to work.
Wrong Font Name
Now, this is a difficult one. While the font name is in fact the one that you saw on the website you downloaded it from, the font name you have to use with @font-face and in CSS is different. It might, for example be written as one word, connected by a hyphen, include font weight or style in the name, etc.
When using the font kit generator, suggested above, you get a style.css file in the kit and the font name is provided in it, right after font-family. Use the name exactly as provided, both in style.css and in the custom CSS.
Directory and File Permissions
On the server, there are group permissions defined for each file and directory. These permissions give different groups of users different combinations of the three main rights: read, write, and execute.
As a rule, the permissions for the files and folders you place the fonts in, should be 755 for directories and 644 for files. On some servers, however, these settings could give errors.
If this is the case, you can either experiment by adding more permissions, such as execute for user, or consult your web host, as they will be able to guide you through the recommended settings.
Security Settings on the Server
Some servers don’t allow you to upload font files, as they are considered insecure. If this is the case, you can contact your hosting provider and ask for help. While they won’t always help you get around the rules, you’ll at least get to know, what your options are.
Install Custom Fonts with a Plugin
If all of the above seems as something you don’t dare start with, you can try the easy way: by using a plugin. There are many different ones available, some free and some paid. I’ve chosen to present 2 plugins to you in this post, as they are both free, are easy to work with (no CSS needed), and have great reviews:
- Google Fonts – enables you to use any Google font on your site
- Font Organizer – enables you to use any Google font or custom font on your site
While using plugins is easy, as it saves you a lot of troubles, I have to warn you that it won’t always work as it should. You cannot go around server security settings or HTML elements with custom CSS classes on your site.
The first makes it impossible to upload any font and the latter makes it necessary to use CSS to target the HTML elements on your site.