Change Default TwentyTwelve WordPress Theme Font in My Child Theme

I needed to change default Open Sans font in my child theme for WordPress with default Twenty Twelve theme as parent. The function which calls to google web fonts is in the TwentyTwelve functions.php

functions.php file of default theme has this code:

/*
	 * Loads our special font CSS file.
	 *
	 * The use of Open Sans by default is localized. For languages that use
	 * characters not supported by the font, the font can be disabled.
	 *
	 * To disable in a child theme, use wp_dequeue_style()
	 * function mytheme_dequeue_fonts() {
	 *     wp_dequeue_style( 'twentytwelve-fonts' );
	 * }
	 * add_action( 'wp_enqueue_scripts', 'mytheme_dequeue_fonts', 11 );
	 */

	/* translators: If there are characters in your language that are not supported
	   by Open Sans, translate this to 'off'. Do not translate into your own language. */
	if ( 'off' !== _x( 'on', 'Open Sans font: on or off', 'twentytwelve' ) ) {
		$subsets = 'latin,latin-ext';

		/* translators: To add an additional Open Sans character subset specific to your language, translate
		   this to 'greek', 'cyrillic' or 'vietnamese'. Do not translate into your own language. */
		$subset = _x( 'no-subset', 'Open Sans font: add new subset (greek, cyrillic, vietnamese)', 'twentytwelve' );

		if ( 'cyrillic' == $subset )
			$subsets .= ',cyrillic,cyrillic-ext';
		elseif ( 'greek' == $subset )
			$subsets .= ',greek,greek-ext';
		elseif ( 'vietnamese' == $subset )
			$subsets .= ',vietnamese';

		$protocol = is_ssl() ? 'https' : 'http';
		$query_args = array(
			'family' => 'Open+Sans:400italic,700italic,400,700',
			'subset' => $subsets,
		);
		wp_enqueue_style( 'twentytwelve-fonts', add_query_arg( $query_args, "$protocol://fonts.googleapis.com/css" ), array(), null );
	}

As you can see in the commented out part it already contains a function to remove open sans from WordPress child theme:

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

Add this to a child theme. This will remove a google font at all.

But if I want to switch Open Sans to another font from Google I’ll use this code:

/*
	 * Loads our special font CSS file.
*/

	if ( 'off' !== _x( 'on', 'Yanone Kaffeesatz font: on or off', 'twentytwelve' ) ) {
		$subsets = 'latin,latin-ext';
		$protocol = is_ssl() ? 'https' : 'http';
		$query_args = array(
			'family' => 'Yanone+Kaffeesatz:200,400,700',
			'subset' => $subsets,
		);
		wp_enqueue_style( 'twentytwelve-fonts', add_query_arg( $query_args, "$protocol://fonts.googleapis.com/css" ), array(), null );
	}

Here I ‘m using Yanone Kaffeesatz font. I’ve removed switches for encoding, because my site is in English only and the font I use doesn’t have any other encoding, except Latin.

When I choose this font  on googlefonts there is a code like advised to use:

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

So I can see exactly how google calls my font to use this name in my child theme functions. Check source to see if it was successful and had generated the code you wanted with your font.

Now I only need to switch off Open Sans font in css, and to add my new font Yanone Kaffeesatz in my child theme style.css

On TwentyTwelve theme style.css I can see:

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

So just adding in my child theme’s style:

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

Or I can add it only to some specific definitions, like headings etc.

 Update for WP3.8

Notice that OpenSans even when removed is still used for Backend administration, so to check if it’s removed or not, clean the your cache and open page source when not logged in, preferably in another browser. Open Sans will be removed on frontend, but not on backend.

And another piece of removal code is here, but also first piece is working for me:

// remove google fonts
function remove_open_sans() { 
wp_dequeue_style( 'twentytwelve-fonts' ); 
}
add_action('wp_print_styles','remove_open_sans');

This code is getting more votes on stackexchange.

 

Share:
This entry was posted in WordPress and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *