Do you have a custom font you are trying to install on your WordPress site? This can help your site look fresh and give you a very unique appearance.
Now that you have a Custom WordPress font selected, you probably want to know how to install it.
In general, there are three methods you can use to install a font with WordPress: CSS3 @ Font-Face, Google Fonts and TypeKit.
Custom fonts can help your site stand amongst the rest of the sites out there. There are a multitude of custom font options available for you to install on your site. They come in many different types of packages and licenses.
Done incorrectly, too many fonts can bog your site down and cause it to load slower. We all know how important a fast site is.
This article will show you how to install the right font, properly and without issues.
However, before I can show you how to add a custom font in WordPress, let’s find those fonts first.
How to Find Custom Fonts to Use for WordPress
I have seen many clients take fonts off the web without understanding the process. Much like copyright, fonts weigh in with very similar protections. You cannot simply take a font off a site because it’s available.
You must read the site’s terms and conditions and policies regarding usage of the fonts. Sometimes you can even find paid fonts out there for free.
Be careful and fully understand what you are doing. Just because the font is free, doesn’t mean the author doesn’t want to get recognized for delivering it. Often times you may need to add attribution on your site if you use that font. Other times, you may need to pay for the font to legitimately use it.
However, Google has been a good friend in this situation and has created something called Google Fonts. These are fonts that you can use on any site. A lot of these fonts are very similar to the ones that you must pay for or find on other font sites, but are offered by Google as an Open Source project.
Method 1: Adding Custom Fonts in WordPress with Google Fonts
Google fonts is a great open-source resource for free fonts. You get tons of unique font options, without the typical font headaches. They are simple to install and are offered by Google.
Installing is easy. Let’s begin.
For example, let’s say you wanted to install the really cool “Merriweather” custom font on your WordPress install.
2. Select the font style that you want. This font has 8 styles. For this example, we’ll use Normal 400.
3. Choose a character set that you want to use.
4. Add the Google Provided code in the Header.php section of your site. Often times, your theme will allow you to add items to the header code of your site. You can also add this as a text-widget on the site, though it’s recommneded that this is added in the above the </head> tag.
Here’s a copy of the code:
<link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
5. Now you can add the code into the stylesheet or inline css.
Method 2: Adding Custom Fonts in WordPress with Typekit
Typekit is another source for fonts, both paid and free. These fonts are supported by Adobe. Simply sign up for an account to take advantage of Adobe Typekit.
The steps for this is similar to Google fonts, but there is a plugin for WordPress.
- Create a new free account
- Select the font you like
- Select the “Web” tab
- Select “Create a New Kit”
- Add your information
- A code will be generated.
- Install the TypeKit plugin
- Activate the plugin
- Navigate to Settings–>Typekit Fonts
- Add your Typekit embed code and your CSS rules
- You can now use the TypeKit font on your site.
Method 3: Adding Custom Fonts in WordPress with CSS3 @font-face
This is an accepted way of installing a font without installing any plugins or adding any server code to your site. The font stays local to your server. This could impact speed as the user must download the font the first time they visit your site, but gives you more control over the font file structure if you are dealing with multiple fonts.
- Download the font you want to use
- Convert your font into a webfont (if it isn’t already)
- Using FTP, create a folder called /fonts in your child theme or theme
- Upload the font to the new folder
- Load the font in your themes CSS by editing the style.css file.
- Use the font with CSS, either inline or in stylesheet.
The code example is below.
font-family: Open Sans;
This is not the best way to do this, especially if you have the opportunity to server the font from a different server. It’s best to serve the font from the server where you found it so it doesn’t impact your load times or performance.
What fonts have you tried installing? What other sites have you used for finding fonts? Please comment below.