Changing Google Fonts

In your functions.php file you'll see this a generic base code
//* Enqueue Lato Google font
add_action( 'wp_enqueue_scripts', 'sp_load_google_fonts' );
function sp_load_google_fonts() {
	wp_enqueue_style( 'google-font-lato', '//fonts.googleapis.com/css?family=Lato:300,700', array(), CHILD_THEME_VERSION );
}

We want to customize with our own fonts. In this tutorial, I'm going to use fonts Source Sans Pro and Droid Sans which are the fonts in this current theme for Espresso.

  1. Select your font choices keep it simple by picking 2 or 3. You don't want to get too crazy with the different fonts on the site. It's the same with colors, less is more.
  2. Review what they will look like with different size and heading. In Review, you can switch between header size and content size. So just play around with it.
  3. Choose the sizes you want for your site. Now that you've figured it all out, click on Use and select your sizes. Grab the code.
  4. Now it's time the code that Google has provided into your PHP and CSS files.
My Results: functions.php
//* Enqueue Source Sans and Droid Sans Google font
add_action( 'wp_enqueue_scripts', 'summer_riot_google_fonts' );
function summer_riot_google_fonts() { 
	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400|Droid+Sans:400,700', array(), CHILD_THEME_VERSION );
}
style.css
body {
	background: #f7f7f7;
	color: #333;
	font-family: 'Droid Sans', sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.625;
}

h1{
    color: #111;
    font-family: 'Source Sans Pro', sans-serif;
    text-transform: uppercase;
}
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.