Everybody wants their site to be unique. They don’t want to be stuck with the standard option like everyone else but express their own style and personality with their website.
One of the easiest ways to customize a website is to add custom fonts to it. After all, text makes up large part of it and is an important element of web design.
Luckily, Google Fonts provides a large number of web fonts that anyone can use. It’s an awesome service and one that many website owners should take advantage of.
Not sure what Google Fonts are? Don’t worry we will first go over that part and explain it in detail. After that we will show you exactly how you can add Google Fonts to your WordPress site manually and then do the same again via a plugin.
Ready to add custom fonts to WordPress? Then let’s get going.
What Are Google Fonts?
Before we get into technical bits, let’s first talk about what we are talking about when we say Google Fonts.
Google Fonts is a service where Google provides access to free web typography for anyone. To understand why this matters, let’s take a quick tour through the history of web fonts.
A Short History of Web Typography
To grasp the significance of Google Fonts, you need to know that in earlier times there were no special fonts for websites. Instead, the letters in which websites were displayed were dependent on the browser.
Later on, webmaster gained the ability to control typography to a degree. However, they were mostly limited to a handful of core fonts that had to be installed on the user’s computer in order to work. While workarounds were available, they were often cumbersome like using Flash or (individual) images of letters to form text.
It was only when CSS2 came out that web browsers gained the ability to download fonts from websites. However, for it to work, you had to own (meaning purchase) the typeface you wanted to use on your site.
Plus, there was (and is) controversy about this techniques because it makes fonts freely downloadable for everyone even if they have a commercial license. A clear violation in some cases.
In short, using custom fonts on websites used to be expensive and/or complicated.
Enter Google Fonts
A lot of that changed when Google Fonts was introduced in 2010. While not the first service of its kind (Typekit was there earlier), Google Fonts has become the go-to place for custom web typography.
The most obvious reason for that is the fact that all typography inside the library is available under a free license. With already more than 800 fonts available, often in several strengths, sizes and styles, that’s a strong argument.
Secondly, as you will see, the service makes implementation of its fonts very easy and frictionless on any website. The best part: you don’t even have to host the font on your own server. Instead, you can just point the user browser to Google and it will get the font directly from them.
Sounds good, right? Now, if you want to know how to use Google Fonts with a WordPress website, just keep reading. That’s exactly what we will get to now.
How to Add Google Fonts to WordPress Manually
There are several ways to add Google Fonts to your website with a little coding. We will go through each of them below. However, they all start off the same way.
1. Find the Right Font
The very first step is to go to the Google Fonts website and choose a font. There are several ways to do so.
If you are looking for one typeface in particular, the easiest way is to search for it directly by name in the upper right corner.
In case you don’t know yet and merely want to browse or get some inspiration, you can also use the many filter options. First of all, you can filter fonts by category:
- Serif — Meaning fonts with small squiggly lines at the end. Times New Roman is a good example for a serif font.
- Sans-Serif — These are simple fonts without the little lines. Look at the type we are using on this website to understand what we are talking about.
- Display — Find fonts that are usable at large display such as for headings and titles.
- Handwriting — Typography that looks like someone drew it by hand.
- Monospace — Fonts with characters that all have the same spacing. Anyone who was already using computers in the late 80s has seen this.
Other options to sort the fonts are by trending or popular fonts, the date they were added or alphabetically by name. You can also limit your search to fonts that include special characters used in certain languages, such as cyrillic.
If that isn’t enough, you may also search fonts by style. Options for that include:
- Number of styles — How many different style options the font offers.
- Thickness — From very thin letters to very thick.
- Slant — Are the letters straight or slanted?
- Width — Search by the spacing between letters and characters.
The cool thing: Since the redesign, Google Fonts lets you preview exactly what the font of your choice is going to look like later.
To do so, just click into the field where the font is displayed, mark the text and type in anything you want. Another option is to use the drop-down menu to view the entire alphabet, just the numerals, a random paragraph or a sentence. Plus, you can change size and style of the text to whatever you want.
In my case, I’m going for a font I like named Lato. Since I know what I am looking for, I can merely search it by name.
2. Select the Font
Once you have settled on a font, click on the plus sign in the upper right corner to add it to your selection. Your chosen font will then appear in a new menu at the bottom of the screen.
Note that you can also add several fonts and font families here. Once satisfied, click on the bottom bar to open your selection for the next steps.
3. Choose Styles and Additional Character Sets
The window that opens will already contain information on how to add the fonts to your site. However, before we get to that, we first want to pick the styles that we need. For that, click Customize.
In this menu, tick boxes for the styles as well as the languages/special character collections you need on your site.
Be aware that the more you add, the more users will have to load on your pages. A load time indicator in the upper right corner will tell you how strongly your selection will affect the speed of your website.
In my example, I opt for the regular, light and regular italic style of my font.
4. Embed Fonts on Your WordPress Site
After that, it’s time to get the fonts onto your site. As mentioned, there several ways to do so, yet all of them start in the Embed section of the Google Fonts interface.
From here, we can either embed our custom fonts via CSS, HTML or a WordPress function. While the latter is the recommended way, I’ll show you how to do the other ones as well.
a) Adding custom fonts to WordPress using @font-face
With the CSS operator @font-face you can tell browsers to load fonts that are located on your own server.
That means, in order to use this method, you first need to download whichever typeface you chose from Google Fonts and upload them to your own server via FTP.
Downloading can be done with the icon in the upper right corner.
After that, you need to place the files on your server. A good location would be inside a fonts directory in your (child) theme folder. Once you have placed them there, you can call the fonts like this:
@font-face {
font-family: Lato;
src: url('http://yoursite.com/wp-content/themes/yourtheme/fonts/Lato-Regular.ttf') format('truetype'),
url('http://yoursite.com/wp-content/themes/yourtheme/fonts/Lato-Italic.ttf') format('truetype'),
url('http://yoursite.com/wp-content/themes/yourtheme/fonts/Lato-Light.ttf') format('truetype');
}The problem with this method: For the best results you might have to add the fonts in several formats. While most modern browser can deal with .ttf (True Type Fonts) files, not all of the older ones can.
Also, unless you take measures to change it, fonts on your server won’t get automatically updated like they are when you use their counterparts hosted by Google. For that reason, this is not quite the recommended method.
b) Calling Fonts via CSS Using @import
A second option to add custom fonts to WordPress is to load them inside your stylesheet via @import. This method is similar to @font-face, however, instead of loading the font from your own server, you are calling it from somewhere else (in this case Google).
Setting this up is pretty easy as Google provides a ready-made solution. Just click @import in Google fonts to find the necessary CSS.
Now all you need to do is copy it (without the <style> brackets) and paste it at the beginning of your theme’s stylesheet. Save and you are done.
While this way to add custom fonts is easy, it can be bad for site performance because it blocks parallel downloads. That means, browsers have to finish the download of the font before they can move on to the rest of your site. Especially if you are importing several fonts, this can really slow down site (even if Google combines them into a single request).
c) Embedding Google Fonts via HTML
One of the easiest ways to add a font to your website is to simply copy the code provided by Google and add it to the header.php file of your theme. All you need to make sure is that it goes inside the <head> section of your site above the call for your main stylesheet like so:
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://yoursite.com/wp-content/themes/yourtheme/style.css" media="all">Save and you are good to go. To make things faster, here, too, you can combine several fonts into one download.
It can get a little problematic, however, in case you are using a theme framework or not a child theme. If that’s so, you might not have a header.php or run the risk of having your changes overwritten at update.
Plus, with this method, if another component of your site calls for the same font or stylesheet (unlikely, but possible) it would be loaded more than once, again increasing the loading time of your site.
For that reason, it’s a) always better to use a child theme and b) to use functions.php to add Google fonts to your WordPress website like below.
d) Enqueueing Google Fonts — The WordPress Way
The final — and recommended — way to add Google fonts to your site is to use the wp_enqueue_style function.
This handy piece of code tells WordPress to add your font to the header section of every page on your site and it will also keep stylesheets from being loaded more than once. Therefore, if you have anything like a font to add to WordPress, this is the way to go.
To make it work, all you need is the link to the fonts on Google’s server, without all the stuff around it. In my case, that’s https://fonts.googleapis.com/css?family=Lato:300,400,400i
Now all we we need to do is wrap some code around it in order to to make it load properly and then add this to the functions.php file of our (child) theme.
function custom_add_google_fonts() {
wp_enqueue_style( 'custom-google-fonts', 'https://fonts.googleapis.com/css?family=Lato:300,400,400i', false );
}
add_action( 'wp_enqueue_scripts', 'custom_add_google_fonts' );Save, upload and that should do the trick. Just remember to replace the link with your own.
5. Call Google Fonts in Your Stylesheet
By now you should have your custom font fully integrated on your site and can start using it in your design. To do so, all that’s left is calling it somewhere.
Google is actually so nice to give you the necessary CSS for that — including a fallback font!
An example of how you can use it on your site is this:
.entry-title {
font-family: Lato;
font-weight: normal;
}That’s it. Not so hard, was it? However, if you are not so much the DIY type, you can also achieve the same thing with a WordPress plugin. We will show you how to do that now.
Adding Google Fonts to WordPress With a Plugin
Besides the manual way, we also have several plugin options to add Google fonts to WordPress, the most popular being Easy Google Fonts. Here’s how to use it.
1. Install the Plugin
As the very first step, we need to get the plugin onto our site. For that, simply go to Plugins > Add New and search for its name. Find it in the list and click Install Now.
After installation is done, don’t forget to activate!
2. Change Fonts
After Easy Google Fonts has been installed, it adds a new menu called Typography to the WordPress customizer (which you can find under Appearance > Customize).
From here, you can now control fonts for all typography on your site, from headings to paragraphs.
To show you how it works, let’s say I wanted to change my H2 heading to the font Advent Pro. For that, I first need to click on the Heading 2 menu in Default Typography to open it.
If you don’t know exactly which font to use, you can also limit your choices to certain subsets (in case that’s important for your site).
In my case, I simply click on Font Family to open the options. Then, I type in the name Advent Pro and click on it when it appears.
When I do so, immediately the font will change in my preview window.
If I want, I can now also change the style, add text decoration like underlining and transform it to uppercase or lower case.
In addition to that, under Appearance I can also make bigger changes like adjust the font color, background color, font size, line height and letter spacing.
Furthermore, Positioning gives us the option to change margins, padding, border, border radius and display options.
When you are fine with how things look, saving the changes will make them visible on your site.
3. Adding Your Own CSS Classes
You will notice that in some cases the plugin won’t work with some of the typography.
For example, in the Twenty Sixteen default theme, I found myself unable to change the H1 heading in the customizer. That’s because this heading is not only called by the standard H1 tag but also a CSS class called .entry-title (as I found out after looking at the heading with the Firefox developer tools). For that reason, the plugin was unable to change its font.
If you get into a similar situation, you can solve it by creating your own font controls under Settings > Google Fonts.
https://www.designbombs.com/add-google-fonts-wordpress/