How to change fonts in TwentyFifteen by Automattic

- by

TwentyFifteen uses the Noto Serif font. It looks swish and comes with an Apache license, and it can be pulled from Google Fonts too. It’s a fine font indeed – but individuals that we are, it may not be for everybody.

It’s easy to change it to something else though, and in this article I’ll show you how.

By default, TwentyFifteen and Noto Serif looks like this:

Screen Shot 2015-11-05 at 11.58.15

If we want to change this to something else, we must first import said font into our style sheet, and then declare it for a couple of classes. In this example I’m going to use Lato, another fabulous font that’s featured in the TwentyFourteen theme:

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

/* change the font to something else */
body, .entry-content, .page-title {
	
	font-family: Lato, Georgia, "Times New Roman", Times, serif;
}

Now TwentyFifteen will look like this:

Screen Shot 2015-11-05 at 11.59.27

If for some reason Lato cannot be downloaded, the browser will try to display text in the next font we declared (Georgia – and if that fails, it’ll try Times New Roman… you get the picture).

1 thought on “How to change fonts in TwentyFifteen by Automattic”

Add your voice!

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