Adding Google Fonts to your WordPress website is a great way to enhance the typography and design of your site. Google Fonts provides a large selection of free, high-quality fonts that are easy to integrate into WordPress without requiring a lot of technical knowledge. There are several methods to add Google Fonts to WordPress, depending on your preferences and the level of customization you want.
Here’s a step-by-step guide to help you add Google Fonts to your WordPress website.
Method 1: Adding Google Fonts via WordPress Customizer (Without Coding)
For those who want a simple, plugin-free way to add Google Fonts, WordPress provides a built-in customization option.
Steps:
- Access the WordPress Customizer:
- From your WordPress dashboard, go to Appearance > Customize.
- Navigate to the Typography Settings:
- Depending on your theme, the typography options might be found under Typography, Fonts, or a similar section. For themes that have built-in typography options, you can adjust your fonts from there.
- Choose Your Google Font:
- In the typography settings, you will usually see options to customize different text elements (e.g., body text, headings, etc.). Most modern themes now integrate with Google Fonts, so you may see a dropdown that allows you to select from hundreds of Google Fonts.
- Select a Font:
- Once you find the desired Google Font, select it from the dropdown or font selection field. Some themes also allow you to change the font weight, style, and other typography settings.
- Publish the Changes:
- After selecting your fonts and adjusting any other typography settings, click the Publish button to save and apply the changes to your site.
This is the easiest method, and it works well for themes that already support Google Fonts in the customizer. However, if your theme doesn’t have built-in options for Google Fonts, you’ll need to use one of the other methods below.
Method 2: Adding Google Fonts Manually in WordPress (Using Code)
If your theme doesn’t have Google Fonts built-in, you can manually add Google Fonts by adding some code to your theme’s files.
Steps:
- Get the Google Fonts Link:
- Visit the Google Fonts website.
- Browse or search for the font you want to use.
- After selecting a font, click on it and then click on the + Select this style button to add it to your collection.
- Once you’ve selected the font, click the black bar that appears at the bottom of the screen to open the collection.
- Copy the link provided under the “Use” section. This will look something like this:htmlCopy
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
- Add the Google Fonts Link to the
<head>Section:- From the WordPress dashboard, go to Appearance > Theme Editor.
- Open your theme’s header.php file (found in the theme files list on the right).
- Paste the Google Fonts link code you copied from Google Fonts just before the
</head>tag. For example:htmlCopy<head> <!-- Other head content --> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> </head>
- Save the Changes:
- Click the Update File button to save your changes.
- Apply the Font in Your CSS:
- After adding the Google Font link to the header, you need to apply the font to your website’s elements (like body text, headings, etc.).
- You can add custom CSS by going to Appearance > Customize > Additional CSS.
- Use the following CSS to apply the font:cssCopy
body { font-family: 'Roboto', sans-serif; }
- Publish the Changes:
- After adding the CSS code, click the Publish button to apply the changes.
This method gives you complete control over which fonts you add to your site and how they’re used, but it requires editing the theme files and adding custom CSS.
Method 3: Using a Child Theme (For Safer Customization)
If you want to make changes to your theme’s files but don’t want your changes to be lost when the theme updates, it’s recommended to use a child theme. This allows you to override the parent theme’s files safely.
Steps:
- Create a Child Theme:
- If you don’t already have a child theme, you can create one by following this guide on creating a child theme.
- Add the Google Fonts Link in the Child Theme’s
header.php:- Follow the same steps as in Method 2 but add the Google Fonts link in the
header.phpfile of your child theme instead of the parent theme. This way, any updates to the parent theme won’t override your changes.
- Follow the same steps as in Method 2 but add the Google Fonts link in the
- Add Custom CSS in the Child Theme:
- In the child theme’s
style.css, add the custom CSS to apply the selected Google Font to your website elements (as described in Method 2, Step 4).
- In the child theme’s
Method 4: Using the wp_enqueue_scripts Function (Advanced)
For more advanced users or developers, you can enqueue Google Fonts properly using WordPress’s wp_enqueue_scripts action. This method ensures that the font is only loaded on your website when necessary and follows best practices.
Steps:
- Enqueue the Google Font in
functions.php:- Open the functions.php file of your active theme or child theme.
- Add the following code to enqueue the Google Font:
function add_google_fonts() {
wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', false);
}
add_action('wp_enqueue_scripts', 'add_google_fonts');
This code ensures that the Google Font is properly enqueued using WordPress’s wp_enqueue_style function.
- Add Custom CSS to Apply the Font:
- As in Method 2, go to Appearance > Customize > Additional CSS, and add the following CSS to apply the font:
body {
font-family: 'Roboto', sans-serif;
}
- Publish the Changes:
- Click Publish to save your changes.
This method is ideal for developers and ensures better performance and best practices for enqueuing stylesheets in WordPress.
Method 5: Using a Plugin (Optional)
If you prefer a simpler way to add Google Fonts to your site without touching code, you can use a plugin. Here are a couple of plugins that make it easy:
- Easy Google Fonts: This plugin allows you to add Google Fonts without writing any code. It integrates directly with the WordPress Customizer and provides an easy-to-use interface to select and apply fonts to various elements.
- Google Fonts Typography: This plugin also lets you select and apply Google Fonts to your WordPress site, with full control over typography settings.
However, using a plugin is an optional method. For most WordPress users, manually adding the fonts via the customizer or code is sufficient.
Conclusion
Adding Google Fonts to WordPress is a simple process that can enhance your website’s design and typography. Here’s a summary of the methods you can use:
- Customizer (If your theme supports it).
- Manually adding the font link in
header.php. - Using a Child Theme for safer, update-proof customizations.
- Using
wp_enqueue_scriptsfunction for advanced users. - Using a Plugin for a no-code solution.
By following the steps in this guide, you’ll be able to customize your website’s typography and make it visually appealing while using high-quality Google Fonts.
