Building an integration

An integration makes your fonts available somewhere else, usually a page builder’s or theme’s font picker. Write a class, register it with one filter, and it gets its own switch in Settings like the built-in ones.

The interface#

Implement \NahnuFonts\Integration, which has three methods:

Add an optional get_label() for the name shown in Settings.

The Base class#

Extend \NahnuFonts\Integrations\Base instead to get these helpers:

Example#

add_action( 'nahnu_fonts_boot_end', function () {

	class My_Builder_Integration extends \NahnuFonts\Integrations\Base {

		public function get_name() {
			return 'my-builder';
		}

		public function get_label() {
			return 'My Builder';
		}

		public function is_available() {
			return defined( 'MY_BUILDER_VERSION' );
		}

		public function register() {
			// Add our fonts to the builder's picker.
			add_filter( 'my_builder_fonts', function ( $fonts ) {
				foreach ( $this->fonts() as $font ) {
					$fonts[ $font['family'] ] = $font['css']['stack'];
				}
				return $fonts;
			} );

			// Respect the Google Fonts switch.
			if ( $this->builder_google_fonts_off() ) {
				add_filter( 'my_builder_load_google_fonts', '__return_false' );
			}
		}
	}

	add_filter( 'nahnu_fonts_integrations', function ( $integrations ) {
		$integrations['my-builder'] = My_Builder_Integration::class;
		return $integrations;
	} );
} );

add_action( 'nahnu_fonts_boot_end', function () {

	class My_Builder_Integration extends \NahnuFonts\Integrations\Base {

		public function get_name() {
			return 'my-builder';
		}

		public function get_label() {
			return 'My Builder';
		}

		public function is_available() {
			return defined( 'MY_BUILDER_VERSION' );
		}

		public function register() {
			// Add our fonts to the builder's picker.
			add_filter( 'my_builder_fonts', function ( $fonts ) {
				foreach ( $this->fonts() as $font ) {
					$fonts[ $font['family'] ] = $font['css']['stack'];
				}
				return $fonts;
			} );

			// Respect the Google Fonts switch.
			if ( $this->builder_google_fonts_off() ) {
				add_filter( 'my_builder_load_google_fonts', '__return_false' );
			}
		}
	}

	add_filter( 'nahnu_fonts_integrations', function ( $integrations ) {
		$integrations['my-builder'] = My_Builder_Integration::class;
		return $integrations;
	} );
} );

How integrations load#

1. On after_setup_theme (priority 5), Nahnu Fonts reads the nahnu_fonts_integrations filter: an array of name to class.
2. For each, it checks is_available() and that the site owner hasn’t switched it off (setting integrations_off).
3. It calls register().
4. nahnu_fonts_integrations_loaded fires with the running integrations. An invalid class fires nahnu_fonts_invalid_integration.

Tips#

• List by family name. Most builders write the family name into CSS. Our stylesheet already declares each family, so you usually don’t need to load anything else on the front end.
• Use the stack where a builder writes the value as-is, so the fallback is included: $font['css']['stack'].
• Load the stylesheet in the editor if the builder’s editor isn’t a normal front-end page: $this->enqueue_stylesheet().
• Don’t restyle the builder. If the builder’s interface is a front-end request, filter nahnu_fonts_load_stylesheet to skip it there, so “Apply to” rules don’t change the builder’s panels.
• Respect the switch. Wrap any Google Fonts changes in builder_google_fonts_off().
• Built-in integrations are good examples. They’re in includes/integrations/ in the plugin.

The built-in integration names are block-editor, elementor, bricks, breakdance, beaver-builder, generatepress, kadence, blocksy, greenshift, classic-editor, etch, yellowpencil, builderius and funnelkit. Replace one by registering your own class under the same name.