Using Google Fonts in the Promo Skin

This page is part of the Promo Skin documentation.

Out of the box, the Promo Skin comes with two fully-integrated Google Fonts, Roboto Slab and Pacifico. You can select either of these fonts from the various dropdown font selectors in the Design Options, and they will appear in your core Skin CSS without you having to lift a finger.

These fonts are served via the Google Webfont Loader, which is an efficient and flexible way to add Google Fonts to any web page. The biggest benefit here, however, is that the Google Webfont Loader can be used to add any Google Fonts to your design.

Unlike Roboto Slab and Pacifico, though, you’ll need to incorporate any Google Fonts you’ve added into your Custom CSS. We’ll walk you through that process in just a minute.

To add any Google Font(s) to the Promo Skin, simply add the following code to either your Promo custom.php file or your Thesis master.php file:

function google_fonts() {
	/* return an array of the fonts and weights you wish to use */
	return array('Noto Sans:400,400italic', 'Lusitana:400,700');
}
add_filter('nina_cross_promo_google_fonts', 'google_fonts');

In the above code, you should specify your Google Fonts according to the syntax described in the Google Webfont Loader documentation.

The example shown here includes two fonts—Noto Sans and Lusitana—and two weights of each one (400 and 400 italic for Noto Sans, and 400 and 700 for Lusitana). These fonts and weights are then automatically loaded via the Webfont Loader, and they will be available for use within your Custom CSS.

Referencing Your Google Fonts in Custom CSS

The Promo Skin CSS has been built in a way that is easy to modify. For example, if you’ve added your own Google Fonts and would like to apply them to your design, simply add the following code to your Custom CSS:

/* custom primary font */
body {
	font-family: "Noto Sans", sans-serif;
}
/* custom headline and sub-headline font */
.grt .headline, .grt h2, .grt h3, .grt h4, .post_box .widget_title, .post_list .headline, .comment_author, .comment_form_title, .sidebar .headline, .sidebar .widget_title, .email_form_title {
	font-family: Lusitana, serif;
}
/* custom site title and accent font */
#site_title, .thesis_email_form input[type="submit"] {
	font-family: Lusitana, serif;
}

In the above code, you should replace Noto Sans and Lusitana with your chosen fonts. Please note that the sample CSS shown here is sufficient to override all the fonts in the Promo Skin.