How to Add Google Fonts to Your WordPress Site

Adding Google Fonts to your WordPress site can enhance it’s aesthetics and improve readability.

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 snippet code. 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');

1. 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.”

Apply Google Fonts in Your Theme

Now that you’ve added Google Fonts to your site, you can apply them in 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;
}

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

Clear Cache

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

Share on Facebook

Tweet

Follow us

Save