Add a Custom Google Font to a WordPress Theme

Adding a Custom Google Font to WordPress

Method 1: Custom Code Solution

Add this code to your theme's functions.php file or in a site-specific plugin:

This code enqueues a Google Font (Roboto in this example) and applies it to your site:

function add_google_fonts() {
    wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap', array(), null);
}
add_action('wp_enqueue_scripts', 'add_google_fonts');

Then add this CSS to your theme's stylesheet (style.css) or in the WordPress Customizer:

body {
    font-family: 'Roboto', sans-serif;
}

Method 2: Multiple Fonts Solution

This code allows you to add multiple Google Fonts at once:

function add_multiple_google_fonts() {
    // Add or remove fonts in this array
    $fonts = array(
        'Roboto:wght@300;400;700',
        'Open+Sans:wght@400;600',
        'Lato:wght@300;400'
    );
    
    $fonts_url = sprintf('https://fonts.googleapis.com/css2?family=%s&display=swap', implode('&family=', $fonts));
    wp_enqueue_style('google-fonts', $fonts_url, array(), null);
}
add_action('wp_enqueue_scripts', 'add_multiple_google_fonts');

Method 3: Plugin Solutions

If you prefer using a plugin, here are reliable options:

1. Google Fonts Typography

• Easy interface to browse and add Google Fonts
• Control typography settings for different elements

2. Easy Google Fonts

• Integration with WordPress Customizer
• Real-time preview of font changes

Additional Notes

• Replace 'Roboto' with your chosen Google Font name
• Adjust font weights (300, 400, 700) based on your needs
• Test site performance after adding fonts
• Consider using font-display: swap for better loading performance
• Use Google Fonts to find available fonts and weights

For locally hosting Google Fonts (better performance):

function add_local_google_fonts() {
    // Replace with your local font file paths
    wp_enqueue_style('local-google-fonts', get_template_directory_uri() . '/assets/fonts/fonts.css', array(), '1.0.0');
}
add_action('wp_enqueue_scripts', 'add_local_google_fonts');

This approach requires downloading font files and hosting them in your theme directory.