Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
did you try replacing href with url of your preferred font ? –  pr1nc3 Aug 22 '13 at 12:58
    
That's my last-ditch option, yes, but I'd really like to learn a little bit more about how the Wordpress system works and change it "properly". –  Alby Aug 22 '13 at 13:04
    
i havent use 2013 theme, but u can add another css file in your header where you can do your font face styling and mark !important –  pr1nc3 Aug 22 '13 at 13:13
    
Yes. That's what I'm planning to do if I can't find a more elegant solution. –  Alby Aug 22 '13 at 13:15
add comment

4 Answers

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.