[Theme: twentytwelve] Enqueue two new Google Fonts

Please continue with your existing thread on this topic:

https://www.ads-software.com/support/topic/child-theme-2012-changing-to-google-webfont-fontsizecolor?replies=5

EDIT – reopened – closed in error — sorry!

So if anyone could help here, that would be wonderful!

either consider to use a plugin: https://www.ads-software.com/extend/plugins/search.php?q=google+fonts

or do it manually:

– in your google links from the other topic, scroll down to get to the blue box with ‘3. Add this code to your website:’

and just copy the href part 'https://fonts.googleapis.com/css?family=Abel'

use this for the code you need to add to functions.php of your child theme:

function load_google_fonts() {
		wp_register_style('googleFontsAbel','https://fonts.googleapis.com/css?family=Abel');
            wp_enqueue_style( 'googleFontsAbel'); 

            wp_register_style('googleFontsOldStandardTT','https://fonts.googleapis.com/css?family=Old+Standard+TT');
            wp_enqueue_style( 'googleFontsOldStandardTT');

}
add_action('wp_print_styles', 'load_google_fonts');

then use the font names in font-family declarations as normal;

example:

.site-title { font-family: 'Old Standard TT', 'Times New Roman', Times, serif; }

I’ll have a quick look at this in a second. I just wanted to quickly say thank you! You’ve helped me twice now.

Thank you so much. Worked a treat!

The only problem is I then lose the body.custom-font-enabled class that’s added when Open Sans is used by default. How I have it that body class is no longer added.

/* Remove Google Open Sans */

function mytheme_dequeue_fonts() {
wp_dequeue_style( 'twentytwelve-fonts' );
}

add_action( 'wp_enqueue_scripts', 'mytheme_dequeue_fonts', 11 );

/* Enqueue New Google Fonts */

function load_google_fonts() {
		wp_register_style('googleFontsAbel','https://fonts.googleapis.com/css?family=Abel');
            wp_enqueue_style( 'googleFontsAbel'); 

            wp_register_style('googleFontsOldStandardTT','https://fonts.googleapis.com/css?family=Old+Standard+TT');
            wp_enqueue_style( 'googleFontsOldStandardTT');

}
add_action('wp_print_styles', 'load_google_fonts');

Here’s that bit in functions.php in twentytwelve…

function twentytwelve_body_class( $classes ) {
	$background_color = get_background_color();

	if ( ! is_active_sidebar( 'sidebar-1' ) || is_page_template( 'page-templates/full-width.php' ) )
		$classes[] = 'full-width';

	if ( is_page_template( 'page-templates/front-page.php' ) ) {
		$classes[] = 'template-front-page';
		if ( has_post_thumbnail() )
			$classes[] = 'has-post-thumbnail';
		if ( is_active_sidebar( 'sidebar-2' ) && is_active_sidebar( 'sidebar-3' ) )
			$classes[] = 'two-sidebars';
	}

	if ( empty( $background_color ) )
		$classes[] = 'custom-background-empty';
	elseif ( in_array( $background_color, array( 'fff', 'ffffff' ) ) )
		$classes[] = 'custom-background-white';

	// Enable custom font class only if the font CSS is queued to load.
	if ( wp_style_is( 'twentytwelve-fonts', 'queue' ) )
		$classes[] = 'custom-font-enabled';

	if ( ! is_multi_author() )
		$classes[] = 'single-author';

	return $classes;
}
add_filter( 'body_class', 'twentytwelve_body_class' );

the .custom-font-enabled class is only used in this style in Twenty Twelve:

body.custom-font-enabled {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

yopu have two choices:

either
add one of your new google fonts directly to the body style in your child theme’s style.css;

or
add a filter to functions.php of the child theme to add those body_class again if one of your google fonts is enqueued, plus add the correspondant body style to style.css;

in functions.php (for example):

//add corrresponding body_class if new google font is loaded
add_filter('body_class','twentytwelvechild_custom_font_body_classes');
function twentytwelvechild_custom_font_body_classes( $classes ) {
	if ( wp_style_is( 'googleFontsAbel', 'queue' ) )
		$classes[] = 'custom-font-enabled';
	return $classes;
}

in style.css (for example):

body.custom-font-enabled { font-family: Abel, Verdana, Arial, sans-serif; }

no idea how you are planning to organize that with two custom fonts (?)

Thank you again!

Great thread, thank you.

the .custom-font-enabled class is only used in this style in Twenty Twelve:

This just made my day, I was worried that the absence of this class would have some side-effects, thanks a lot!

$my_query_args = array(
            'family' => 'Montserrat:400,700:latin'
        );
    wp_enqueue_style('custom-google-fonts', add_query_arg( $my_query_args, "$protocol://fonts.googleapis.com/css" ), array(), null );

I like Open Sans, so I didn’t touch that or dequeue it. Just added another enqueue style for the Montserrat Font.