Google Fonts became the go-to resource for custom web typography since its development in 2010. There are three main reasons that Google became the frontrunner here. First, there were no font services which were decent enough, so Google filled the void. Second, even at the beginning, the variety they offered was comparatively great. Currently, there are over 800 fonts available in numerous styles. Third, these fonts are available for free, making them especially attractive.
In addition, they’re surprisingly easy to integrate into your design projects. We’ll show you how you can include these Google Fonts into your WordPress Site.
Google Fonts
To begin, you’ll need to select the font you want to work with. There are a variety of options, so you have a rather large menu to choose from. You can find them by heading over to Google’s Font Page. If you are looking for a specific font, then simply type the name of the font in the Search box and it should come up with a sample.
There are also other search parameters you can use. Right below the Search box is a button called Categories. If you click on this, it will reveal a drop-down menu with five options. These are as follows:
- Serif – These are fonts with short lines stemming from the upper and lower strokes of a letter. Times New Roman and Sylfaen are good examples.
- Sans Serif – As the name suggests, these are fonts without those little lines. They tend to have a simple and clean aesthetic.
- Display – These are what can be called attention-grabbing fonts. They’re best for headings rather than long text.
- Handwriting – These fonts make it seem like someone wrote them by hand. You’ll find that many are in cursive or have less consistent spacing.
- Monospace – Like a typewriter, their letters occupy the same horizontal width. They are very consistently spaced.
Added to these, you also have other options to choose from, like selecting the Language and Font Properties. The latter includes the number of styles, thickness, slant, and width.
Embedding Fonts in WordPress
If you’re wanting to include these unique fonts into your WordPress site, there are several methods you can try.
Using CSS
Click on the Font from Google’s selection, and it will take you to the detailed font page. At the upper right corner, there is a “+” sign. Click on that and a side window will open. Click on “Embed.”
Now you can click @import. This will open the CSS code which you need to copy. Go to your WordPress theme’s stylesheet and paste it at the beginning. Make sure that you have copied the import link without the <style> brackets. Make sure you Save, and you’ll have added the font.
Using PHP
Follow the first few steps and copy the link you get after clicking the “+” sign. Now, simply add it to your theme’s header.php file. Remember to save in order for the font to be added.
Using a Javascript Function
You can also try something known as “enqueueing.” You’ll need to use the wp_enqueue_style function for this. Through this method, you can add the chosen font to the header section of all your website pages. It’s a great way to add multiple changes all at once.
Just get the link of the font (from http till the ”), and add this to your theme’s functions.php file with extra code around it. Here’s the code you’ll need to use:
function custom_add_google_fonts() {
wp_enqueue_style( ‘custom-google-fonts’, https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap,false );
}
add_action( ‘wp_enqueue_scripts’, ‘custom_add_google_fonts’ );
Any of these options will work just fine to integrate Google Fonts into your WordPress website, so it’s important to pick the one you feel most comfortable with.
Did this help? Let us know!