How to replace fonts in TwentyThirteen

- by

I must admit that the new default font in TwentyFourteen looks damn sexy – but I’ve only just gotten used to the TwentyThirteen theme. Don’t get me wrong, if you’re after a magazine style theme then TwentyFourteen does a great job.

Since I didn’t want to change themes again over at versluis.com, I thought perhaps I’ll just replace the default fonts in TwentyThirteen (Bitter and Source Sans Pro) with TwentyFourteen’s new font Lato.

Here’s how:

Screen Shot 2013-12-15 at 14.21.14

Screen Shot 2013-12-15 at 14.28.15

Lato is an open source font by Warsaw based designer Łukasz Dziedzic hosted on Google Fonts. Lucky for us we can link to it in our CSS stylesheet right away. Do this somewhere near the top, just below any other @import statements:

@import url(http://fonts.googleapis.com/css?family=Lato);

Next, overwrite the existing TwentyThirteen declarations with this bit of CSS. If you’re using a child theme, add this right after the import statement. If you’re tweaking the original (which you shouldn’t) then you can add this to the very bottom of style.css. Alternatively you can declare this as additional CSS if you have the option (Jetpack does this for example):

/* new font for 2014: Lato */
html,
button,
input,
select,
textarea,
h1.site-title,
h1.entry-title,
h2.site-description {
	font-family: Lato, Helvetica, sans-serif;
}

This will style the following elements, overriding existing TwentyThirteen declarations:

  • site title and description
  • all post/page headlines
  • input text areas
  • drop down menus
  • button text

Remove items as appropriate (for example the site title). If you don’t fancy Lato and would like to use another font instead, just link to it with an @import statement, then replace “Lato” in the font-family declaration with your own font. Here’s an article I’ve written that shows you howto do this:

This tweak may also work on WordPress.com with the CSS extension subscription, but since I haven’t got that I couldn’t test it.

Hope it helps!



If you enjoy my content, please consider supporting me on Ko-fi. In return you can browse this whole site without any pesky ads! More details here.

1 thought on “How to replace fonts in TwentyThirteen”

Leave a Comment!

This site uses Akismet to reduce spam. Learn how your comment data is processed.