How do I change the fonts in the Twenty Thirteen theme?

Question

The Twenty Thirteen theme uses Bitter for headings and Source Sans Pro for body text. I would like to change these.

The fonts are included by the line:

<link rel='stylesheet' id='twentythirteen-fonts-css'  href='//fonts.googleapis.com/css?family=Source+Sans+Pro%3A300%2C400%2C700%2C300italic%2C400italic%2C700italic%7CBitter%3A400%2C700&#038;subset=latin%2Clatin-ext' type='text/css' media='all' />

in the rendered page, but I can't find out how to edit this line.

The template calls wp_head in header.php to insert the line, and the line that embeds the font is included in custom-header.php:

wp_enqueue_style( 'twentythirteen-fonts', twentythirteen_fonts_url(), array(), null );

But this is where I get stuck. I cannot find how to edit twentythirteen-fonts or the associated twentythirteen_fonts_url().

Any suggestions? The fonts I want to include in place of Bitter and Source Sans Pro are also Google Fonts, if that makes things easier.

Answer 1

I looked at TwentyThirteen's twentythirteen_fonts_url() function and there are no hooks so you need to deregister twentythirteen-fonts and enqueue your own fonts.

Removing the fonts is easy:

function deregister_gfonts_wpse_111190() {
  wp_deregister_style('twentythirteen-fonts');
}
add_action('wp_enqueue_scripts','deregister_gfonts_wpse_111190',100);

Add your own Google fonts (or other) the same way that TwentyThirteen did.

You will need to add another stylesheet to override the places where TwentyThirteen uses the fonts though.

Answer 2

Answering my own question, for the sake of anyone that finds their way here via Google.

The trick is to look in the theme's functions.php file, which is where the twentythirteen-fonts variable and twentythirteen_fonts_url() function are defined. The relevant section begins on line 117 in the copy of functions.php that I have.

Answer 3

Alby, note that if you are editing the main TwentyThirteen files, your alterations will be overwritten if/when you update the theme. Instead, if you create a child theme, any changes you make will be preserved. As noted in the previous link, your child theme functions.php would not have to include an entire repeat of TwentyThirteen's function.php file, just the specific changes you want to make.

You would want, then, to follow s_ha_dum's suggestion of deregistering the default fonts and enqueue your own.

Answer 4

http://digitechnotitia.com/fonts-in-twenty-thirteen-theme/

Fonts are included by the line:

<link rel="stylesheet" id="twentythirteen-fonts-css" href="//fonts.googleapis.com/css?family=Source+Sans+Pro%3A300%2C400%2C700%2C300italic%2C400italic%2C700italic%7CBitter%3A400%2C700&amp;subset=latin%2Clatin-ext" type="text/css" media="all" />

The template calls wp_head in header.php to insert the line, and the line that embeds the font is included in custom-header.php:

wp_enqueue_style( "twentythirteen-fonts", twentythirteen_fonts_url(), array(), null ); 

Changing method

The trick is to look in the theme's functions.php file, which is where the twentythirteen-fonts variable and twentythirteen_fonts_url() function are defined. The relevant section begins on line 117 in the copy of functions.php that I have.

TwentyThirteen's twentythirteen_fonts_url() function and there are no hooks so you need to deregister twentythirteen-fonts and enquire your own fonts.