How To Install Google Fonts In WordPress?

Google Fonts offer a wide range of fonts that can add to the design and aesthetics of a WordPress website. In this tutorial, we will go through the steps to install Google Fonts in WordPress.

Step 1:

Choose your Google Fonts The first step is to choose the Google Fonts that you want to use on your website. You can browse through the fonts on the Google Fonts website and select the ones that you like. Once you have selected your fonts, add them to your collection by clicking the “+ Select this style” button next to each font.

Step 2:

Create a Custom Font Control File WordPress provides a way to add custom fonts to a theme using a custom font control file. To create this file, follow the steps below:

1. Create a new file in a text editor such as Notepad.
2. Copy the following code into the file:

phpCopy code<?php
function custom_fonts() {
    wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Roboto:400,700', array(), CHILD_THEME_VERSION );
}
add_action( 'wp_enqueue_scripts', 'custom_fonts' );
?>

3. Replace the URL //fonts.googleapis.com/css?family=Roboto:400,700 with the URL of the Google Fonts that you want to use. You can add multiple fonts by separating them with a | character. For example, if you want to use the Roboto and Open Sans fonts, you can use the following URL: //fonts.googleapis.com/css?family=Roboto:400,700|Open+Sans:400,700
4. Save the file with a .php extension. For example, you can save the file as custom-fonts.php.

Step 3:

Upload the Custom Font Control File to WordPress Now that you have created the custom font control file, you need to upload it to your WordPress website. Follow the steps below:

1. Log in to your WordPress website and navigate to the wp-content/themes/your-theme-name directory.
2. Upload the custom font control file that you created in Step 2 to this directory.
3. Go to the Appearance > Editor section in your WordPress dashboard.
4. Select your theme’s functions.php file from the list of files on the right-hand side.
5. Add the following code to the end of the file:

lessCopy coderequire_once( get_stylesheet_directory() . '/custom-fonts.php' );

6. Save the changes.

Step 4:

Check the Custom Fonts on your WordPress Site Now that you have added the custom fonts to your WordPress site, you can check to see if they are working correctly. Follow the steps below:

1. Go to the frontend of your WordPress site.
2. Refresh the page.
3. Inspect the page using your web browser’s developer tools.
4. Look for the font-family property in the CSS for the text that you want to check.
5. Verify that the font-family property matches the font that you selected.

In conclusion, adding Google Fonts to a WordPress website is a straightforward process. By following the steps above, you can enhance the design of your website and make it more visually appealing.