How to change fonts in TwentyFifteen by Automattic

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).





Jay is the CEO and founder of WP Hosting, a boutique style managed WordPress hosting and support service. He has been working with Plesk since version 9 and is a qualified Parallels Automation Professional. In his spare time he likes to develop iOS apps and WordPress plugins, or draw on tablet devices. He blogs about his coding journey at http://wpguru.co.uk and http://pinkstone.co.uk.