The Custom Fonts extension has been created to let you easily upload your personal font library, to be used on your website. It supports TTF and WOFF2 fonts, as well as standard and variable font files.

Enabling this extension is super easy. Simply go to the Blocksy Dashboard -> Extensions -> Pro Extensions -> Custom Fonts.

Configuring Custom Fonts

Once enabled, the extension will give you two options, a simple font or a variable font.

Simple fonts can be variable, but each variation is stored in a separate file. This is the classic way of doing things.

Variable fonts are pretty much the exact same thing as simple fonts, but their variations are contained inside of two files, which makes organising and uploading these fonts much easier.

Integration with Third Party Plugins

The extension is fully integrated with third party page builders, such as Stackable, Elementor, Plus Addons for Gutenberg and more.

---

Dynamically Enqueued Fonts

This extension also provides a way to enqueue fonts without touching the UI at all. This is very useful if you want to automate the process of including fonts on your website or when you want to store the font files in a child theme.

The dynamic registration of the fonts is done via the blocksy_ext_custom_fonts:dynamic_fonts filter. The filter has full feature parity with the UI options, thus anything that can be done from the UI, can be done with the filter too. The usage of the filter is as follows:

add_filter('blocksy_ext_custom_fonts:dynamic_fonts', function ($fonts) {
	$fonts[] = [
		'name' => 'OpenSans',
		'fontType' => 'regular',
		'variations' => [
			[
				// 'n1', 'i1', 'n2',
				// 'i2', 'n3', 'i3',
				// 'n4', 'i4', 'n5',
				// 'i5', 'n6', 'i6',
				// 'n7', 'i7', 'n8',
				// 'i8', 'n9', 'i9',
				'variation' => 'n4',
				'url' => 'https://google.com/opensans.woff2'
			]
		]
	];

	$fonts[] = [
		'name' => 'Roboto',
		'fontType' => 'variable',
		'variations' => [
			[
				'variation' => 'n4',
				'url' => 'https://google.com/roboto.woff2'
			],

			[
				'variation' => 'i4',
				// Optional
				'url' => 'https://google.com/roboto-italic.woff2'
			]
		]
	];

	return $fonts;
});

The above code snippet enqueues two fonts: one variable and one regular (fontType field of the font).

Important note: For variable fonts, only two variations are supported and exactly two of them have to be provided. The url for the i4 variation can be an empty string, in which case the italic axis will be skipped from being enqueued.