Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by rosinapissaco
rosinapissaco
13,401 Points

Right way to add Google Fonts into Theme?

What is the right way to add Google Fonts into my WordPress Theme?

3 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Enqueue the css file in your functions.php the code as normal.

Stephen O'Connor
Stephen O'Connor
22,291 Points
Stephen O'Connor
Stephen O'Connor
22,291 Points

Add the following in your functions.php file and swap out the Google font code for the font your are looking to add.

function theme_fonts()  {
     wp_enqueue_style( 'google-open-sans', 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' );
}
add_action( 'wp_enqueue_scripts', 'theme_fonts' );
rosinapissaco
rosinapissaco
13,401 Points
rosinapissaco
rosinapissaco
13,401 Points

I was searching for a solution and I find this one. Maybe I should put font and styles all together. I am not sure. Is this wrong?

/************* $Styles *************/
function demo_load_styles(){
 wp_enqueue_style('bootstrap_css', get_template_directory_uri() . '/css/vendor/bootstrap.min.css', array(), '', 'screen');
 wp_enqueue_style('font_awesome_css', get_template_directory_uri() . '/css/vendor/font-awesome.min.css', array(), '', 'screen');
 wp_enqueue_style('styles_css', get_template_directory_uri() . '/css/styles.css', array(), '', 'screen');
}

add_action( 'wp_enqueue_scripts', 'demo_load_styles' );

/************* $Fonts *************/
function demo_load_fonts() {
    wp_register_style('googleFontsOpenSans', 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700');
    wp_enqueue_style( 'googleFontsOpenSans');

    wp_register_style('googleFontsQuicksand', 'http://fonts.googleapis.com/css?family=Quicksand');
    wp_enqueue_style( 'googleFontsQuicksand');
}

add_action('wp_print_styles', 'demo_load_fonts');