WordPress.org

Support

Support » Themes and Templates » [Theme: twentytwelve] Enqueue two new Google Fonts

[Theme: twentytwelve] Enqueue two new Google Fonts

  • I’ve started a child theme with a separate functions.php file. I’m trying to enqueue two new Google fonts, but I’m clueless beyond using the snippet included in the functions.php file for turning Open Sans off.

    /* Remove Google Open Sans */

    function mytheme_dequeue_fonts() {
    wp_dequeue_style( ‘twentytwelve-fonts’ );
    }
    add_action( ‘wp_enqueue_scripts’, ‘mytheme_dequeue_fonts’, 11 );

Viewing 12 replies - 1 through 12 (of 12 total)
  • WPyogi

    @wpyogi

    Forum Moderator

    Please continue with your existing thread on this topic:

    http://wordpress.org/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: http://wordpress.org/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 'http://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','http://fonts.googleapis.com/css?family=Abel');
                wp_enqueue_style( 'googleFontsAbel'); 
    
                wp_register_style('googleFontsOldStandardTT','http://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','http://fonts.googleapis.com/css?family=Abel');
                wp_enqueue_style( 'googleFontsAbel'); 
    
                wp_register_style('googleFontsOldStandardTT','http://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.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘[Theme: twentytwelve] Enqueue two new Google Fonts’ is closed to new replies.
Skip to toolbar