How to Add Google Fonts to Your WordPress Site

Adding Google Fonts to your WordPress site can enhance its aesthetics and improve readability. Adding Google Fonts to your WordPress site can enhance typography and improve your site’s appearance. There are multiple ways to do this, including using a plugin or manually adding the fonts. Here’s how you can do it:

Choose Your Google Fonts

  1. Visit Google Fonts: Go to Google Fonts.
  2. Select Fonts: Browse through the available fonts and select the ones you like by clicking on the “+” icon. This will add them to a collection at the bottom of the page.
  3. Customize Your Selection: Once you’re done selecting, click on the “Selected Family” bar at the bottom of the screen.
  4. Copy the Embed Code: Under the “Embed” tab, you’ll see a code snippet. Copy the <link> tag provided.

Add the Google Fonts Link to the WordPress

You can add the Google Fonts link in two main ways: through the theme’s functions.php file or by using a plugin.

Method 1: Using functions.php

  1. Access Theme Editor: Log in to your WordPress admin dashboard. Go to Appearance > Theme Editor.
  2. Open functions.php: In the right sidebar, find and click on functions.php.
  3. Add the Code: At the end of the file, add the following code snippet, replacing YOUR_FONT_URL with the link you copied from Google Fonts:
function add_google_fonts() {
    wp_enqueue_style('google-fonts', 'YOUR_FONT_URL', false);
}
add_action('wp_enqueue_scripts', 'add_google_fonts');

4. Save Changes: Click “Update File” to save your changes.

Method 2: Using a Plugin

If you prefer not to edit code, you can use a plugin like Easy Google Fonts.

  1. Install the Plugin:
    • Go to Plugins > Add New.
    • Search for “Easy Google Fonts.”
    • Install and activate the plugin.
  2. Configure the Plugin:
    • Go to Appearance > Customize.
    • Click on Typography (added by the plugin).
    • Select the font you want to use for various elements (like headings, paragraphs, etc.).
  3. Publish Changes: Once you’re satisfied with your selections, click “Publish.”

Method 3: Using functions.php (Optimized for Performance)

Instead of adding fonts in header.php, use WordPress wp_enqueue_style() function.

Steps:

  1. Open AppearanceTheme File Editor.
  2. Select the functions.php file.
  3. Add the following code at the end:
function custom_google_fonts() {
    wp_enqueue_style('custom-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', false);
}
add_action('wp_enqueue_scripts', 'custom_google_fonts');

4. Save the file and refresh your website.

Apply Google Fonts in Your Theme

Now that you’ve added Google Fonts to your site, you can apply them to your theme’s CSS.

  1. Go to Customizer: Navigate to Appearance > Customize.
  2. Additional CSS: Click on “Additional CSS.”
  3. Add CSS Rules: Use CSS to specify the Google Fonts for different elements. For example:
body {
    font-family: 'Your Selected Font', sans-serif;
}

h1, h2, h3 {
    font-family: 'Your Selected Font', serif;
}

4. Save Changes: Click “Publish” to save your custom CSS.

 

Which Method Should You Use?

  • For beginners: Use a plugin (Easy Google Fonts).
  • For developers: Use the functions.php method for better performance.
  • For quick styling changes: Use the Additional CSS method

Clear Cache

If you’re using a caching plugin, clear your site’s cache to ensure the changes take effect.

Leave a Reply