Customize Google Fonts

Good typography is an essential part of any design, and good web design is no exception. A great selection of fonts can create a cohesive theme or set a stylish and sophisticated tone throughout your website.

WordPress themes have long utilized Google Fonts. Google’s robust catalog of open-source fonts makes it easy to integrate expressive type seamlessly—no matter where you are in the world.

The Frost WordPress theme offers designers, developers, and end-users a unique experience using Jost and Outfit—replacing ubiquitous and often overused fonts such as Open Sans, Lato, and Roboto.

Google Fonts - Frost WordPress Theme

Inspired by 1920s German sans-serifs, Jost is designed and maintained by Owen Earl, the font foundry indestructible type*. In 2020 Owen Earl and Mirko Velimirovic worked together to make Jost a variable font.

Outfit is a beautiful geometric sans: Inspired by the ligature-rich outfit wordmark, Outfit.io is delighted to release it’s own type family.

Customizing Google Fonts in Frost

While Jost and Outfit are charming fonts, projects might require an alternative Google Font. Thankfully, Frost makes it easy to replace Jost or Outfit—and it can be done by following these simple steps.

There is one function in the Frost theme that enqueues Jost and Outfit.

Open the functions.php file inside of the Frost theme and look for the two snippets of code below. Replace the family= instances with the URL string that Google Fonts provides you for the new font.

// Define fonts.
function frost_fonts_url() {

	// Allow child themes to disable to the default Frost fonts.
	$dequeue_fonts = apply_filters( 'frost_dequeue_fonts', false );

	if ( $dequeue_fonts ) {
		return '';
	}

	$fonts = array(
		'family=Jost:wght@100;200;300;400;500;600;700;800;900',
		'family=Outfit:wght@100;200;300;400;500;600;700;800;900',
	);

	// Make a single request for all Google Fonts.
	return esc_url_raw( 'https://fonts.googleapis.com/css2?' . implode( '&', array_unique( $fonts ) ) . '&display=swap' );

}

Now that you have enqueued your Google Fonts, open up the theme.json file and look for the code below. Replace Jost or Outfit with the new font(s) you have selected. This process will output it on both front and back end.

{
	"version": 2,
	"settings": {
		"typography": {
			"customFontSize": true,
			"dropCap": false,
			"fontFamilies": [
				{
					"fontFamily": "\"Jost\", sans-serif",
					"name": "Jost",
					"slug": "primary"
				},
				{
					"fontFamily": "\"Outfit\", sans-serif",
					"name": "Outfit",
					"slug": "secondary"
				}
			]
	}
}

And just like that, you have customized your Google Fonts in Frost.