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:
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!
1 thought on “How to replace fonts in TwentyThirteen”