Configuring brand fonts

Font families are configured/loaded brand-by-brand.

1. Setup the font CSS variable in the Nova Manifest.
2. Load the font family
   • Using a local file or via CSS import

Setup CSS variable

Adding your font family to the Nova Manifest for your brand will result in a new CSS variable available to the brand (e.g. --brand--font-family--wingdings).

From /style-guide/brands/${brand-name}/${brand-name}.json, add a new object to the fonts array for your brand,

{
	"fonts": [
		{
			"description": "Georgia",
			"type": "system",
			"value": "Georgia, serif",
			"variable": "--nova--font-family--georgia"
		}
	]
}

Examples (opens in a new tab)

Load Fonts

Fonts can be loaded directly from a file, or using a <link> tag.

You only need to follow one of these steps.

Option 1: Enqueue font assets using a file

1. Add/copy your font files to style-guide/public/fonts (ref (opens in a new tab)).
2. In the appropriate style-guide/styles/brands/{brand-name}/index.scss, use @font-face to load your files.
3. Run npm run nova build

You should see your font family available using the token setup in the manifest.

Examples:

• IndieWire (opens in a new tab)
• FootwearNews (opens in a new tab)

Option 2: Enqueue font assets using a <link> tag

Font families loading using <link> need to be setup in both the Style Guide and brand theme,

Style Guide

You can add the link tag in the internal Token Manager component (reference (opens in a new tab)).

3) In WordPress

The same link can be enqueued in WordPress by configuring the PMC Nova plugin for your theme.

This file should be in config/plugins/class-pmc-nova.php.

protected function _setup_hooks(): void {
	add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_fonts' ] );
}
 
/**
 * Enqueue typekit fonts via stylesheet.
 *
 * @return void
 */
public function enqueue_fonts(): void {
	wp_enqueue_style(
		'indiewire-typekit',
		'https://use.typekit.net/jqk3vzz.css'
	);
 
	// Handles the preload tag.
	// This functionality is tested in the base class, not here.
	Enqueued::add( 'indiewire-typekit' ); // @codeCoverageIgnore
}

Examples,

• IndieWire (opens in a new tab)