WordPress.org

Ready to get started?Download WordPress

Forums

[Theme: twentytwelve] Enqueue two new Google Fonts (13 posts)

  1. specialmachine
    Member
    Posted 1 year ago #

    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 );

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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!

  3. specialmachine
    Member
    Posted 1 year ago #

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

  4. alchymyth
    Forum Moderator
    Posted 1 year ago #

    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; }
  5. specialmachine
    Member
    Posted 1 year ago #

    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.

  6. specialmachine
    Member
    Posted 1 year ago #

    Thank you so much. Worked a treat!

  7. specialmachine
    Member
    Posted 1 year ago #

    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');
  8. specialmachine
    Member
    Posted 1 year ago #

    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' );
  9. alchymyth
    Forum Moderator
    Posted 1 year ago #

    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 (?)

  10. specialmachine
    Member
    Posted 1 year ago #

    Thank you again!

  11. Tryah85
    Member
    Posted 1 year ago #

    Great thread, thank you.

  12. hussong
    Member
    Posted 1 year ago #

    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!

  13. ishanr
    Member
    Posted 1 year ago #

    $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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.