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 among 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.
Other sites that offer fonts are Typekit, a free & subscription font service, FontSquirrel, free commercial use fonts, and Fonts.com, purchasable fonts.
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.
- Click the “next page” icon when you hover over the font icon.
- Select the font style that you want. This font has 8 styles. For this example, we’ll use Normal 400.
- Choose a character set that you want to use.
- 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 recommended that this is added in the above the tag.
Here’s a copy of the code :
<link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/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.
1.Create a new free account
2.Select the font you like
3.Select the “Web” tab
4.Select “Create a New Kit”
5.Add your information
6.A code will be generated.
7.Install the TypeKit plugin
8.Activate the plugin
9.Navigate to Settings–>Typekit Fonts
10.Add your Typekit embed code and your CSS rules
11.You can now use the TypeKit font on your site.