Documentation

Everything you need to get started with Blocksy Theme and Companion

Custom Fonts

The Custom Fonts extension allows you to insert fonts on your site and use them in any typography setting from Blocksy. It allows to upload woff2 fonts, with any number of variations. The extension also provides support for variable fonts and correctly outputs the @font-face rules for them.

To use this feature, go to WordPress Dashboard → Blocksy → Extensions and activate the Custom Fonts extension.

Uploading the fonts is as easy as clicking on Settings button and following the instructions on the screen.

This extension also is integrated with these tools:

  • Stackable Blocks
  • Elementor
  • Kadence Blocks

Dynamically enqueued fonts

Since Blocksy Companion Pro 1.7.55, this extension 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 the client’s site 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.

The dynamic fonts will be displayed as such in the extension UI (no editing allowed)

Not the solution you are looking for?

Please check other articles or open a support ticket.