How to use the Google Open Sans font in WordPress by Bas Wijdenes

Google web fonts in WordPress.

Google has its own web fonts and one of these fonts is Open Sans. Personally, I think this is one of the most professional looks on the internet. I also like to use Google Open Sans on my WordPress sites.

As usual, you can easily use the Open Sans font by using one of the WordPress plugins. There are enough of 😉.
Personally, I prefer not to use a plugin when it is a small effort to add this yourself. After all, you never know what a plugin adds to your WordPress site even more undesirable.

In the tutorial below I indicate how you can add Open Sans to WordPress without the work of a plugin.

Before we start.

Because we are going to implement changes to the ‘core’ you have a few requirements that you have to meet.
If you make changes to the WordPress core, it is best to create a child theme. If you do not know what a child theme is, you can find it on the WordPress.org website.
It is useful to use an FTP client like Filezilla together with Notepad++ for editing the files.

Implementing Google Open Sans in WordPress.

I assume now that you already use a child theme. Connect via your FTP client to your website and navigate to your Child theme.
We can add the Open Sans in your CSS file, but before we can do that we have to enter the Google font database in your functions.php.
If you already have a functions.php you can go to the next step. If not, create a new file in the child theme directory, name it functions.php, and add the following code snippet.

<?php 
//Import parent styles the right way and add other stylesheets if necessary.
function twenty_fifteen_child_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twenty_fifteen_child_styles' );

/**
 * Register footer widget area.
 *
 * @since Twenty Fifteen Child 1.0
 *
 * @link https://codex.wordpress.org/Function_Reference/register_sidebar
 */
}

We have now ensured that your child theme functions.php also looks at the core functions.php to load all functions. Next, we now have to add a code-snippet that ensures that we can use Google fonts in WordPress. Copy / paste the code-snippet below in your functions.php.

function load_google_web_font_sample() { 
echo '<link href="'. ( is_ssl() ? 'https' : 'http' ) .'://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet" type="text/css">';
 } 
add_action( 'wp_head', 'load_google_web_font_sample', 0 );

Okay now we are ready to use the Google web font API. We now only need to use the font in your CSS file, make sure to use this in your CSS file.

For the body you can now add this for example.

.body { 
font-family:"Open Sans" !important; 
}

Recap

I have reviewed this blog post and I no longer think that the content is very relevant, but because this post has been popular and some may still want to use the Google Open Sans Font in WordPress, I keep the blog post for now. The plugin itself has been removed and can therefore no longer be downloaded. I have renewed the post.