How to Add Google Fonts to Block Themes

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 theme for WordPress offers designers, developers, and end-users a unique experience using Outfit—replacing ubiquitous and often overused fonts such as Open Sans, Lato, and Roboto.

Outfit is a a beautiful geometric sans: The official typeface for brand automation company outfit.io. Inspired by the ligature-rich outfit wordmark, Outfit.io is delighted to release it’s own type family.

Customizing Google Fonts in Frost

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

There is one function in the Frost theme that enqueues Outfit, which not only will output Outfit on the front end of your website, it will also output it in the WordPress block editor as well.

Open the functions.php file inside of the Frost theme and look for the two snippets of code below. Replace line 74 in both 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=Outfit:[email protected];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' );

}
Code language: PHP (php)

Now that you have enqueued your Google Font, open up the theme.json file and look for the code below. Replace Jost with the new font you have selected. This process will output it everywhere—front end and back end.

"settings": {
	"typography": {
		"fontFamilies": [
			{
				"fontFamily": "\"Outfit\", sans-serif",
				"name": "Outfit",
				"slug": "primary"
			}
		],
	}
},
Code language: JavaScript (javascript)

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