The Custom Fonts extension lets you upload your own font files and use them throughout Blocksy’s typography system and supported integrations. Both standard and variable fonts are supported, giving you control over the font families, weights and styles used across your website.
The extension supports TTF and WOFF2 files and stores them locally on your website, avoiding the need to load those fonts from an external provider.
Blocksy Pro required
The Custom Fonts extension requires Blocksy Companion Pro to be installed and active.
Getting Started
To activate and configure the Custom Fonts extension:
- Navigate to WordPress Dashboard → Blocksy → Extensions.
- Locate and activate the Custom Fonts extension.
- Open the extension’s settings and select Add Fonts.
- Choose whether you are adding a standard font, variable font or Modern Font Stack.
- Configure the required files, weights and styles, then save your changes.
Configuring Fonts
Standard Fonts
Standard fonts use separate files for the individual font weights and styles you want to make available. For example, you can upload different files for weights ranging from 100 to 900, together with regular and italic variants where required.
You only need to upload the variations that your website actually uses. Keeping the number of font files limited can reduce unnecessary downloads on the front end.
Variable Fonts
Variable fonts can contain a range of font weights inside a single file, reducing the need to upload a separate file for every variation.
Upload the main variable font file for regular text and, when the font provides a separate italic variation, an additional variable file for italic text. Blocksy can then expose the supported weight range through its typography controls.
Preloading Fonts
Selected Custom Font files can be preloaded so the browser begins retrieving them earlier during the initial page load. This can be useful for important fonts that are immediately visible when a page opens.
Preload selectively
Preloading every font variation is usually unnecessary. Prioritise the font files needed for content visible near the top of the page and allow less important variations to load normally.
Modern Font Stacks
The extension also integrates with Modern Font Stacks, providing curated system-font combinations without requiring you to upload any font files.
Each stack uses fonts that are commonly available on modern operating systems and automatically falls back through the configured list depending on the visitor’s device. Because the fonts are supplied by the operating system, no separate web font download is required.
Using Custom Fonts
Once a font has been configured, it becomes available throughout Blocksy’s font selectors wherever typography options are supported.
Custom Fonts are identified by a small C icon in the font selector, making them easy to distinguish from system fonts, Google Fonts, Adobe Fonts and locally downloaded Google Fonts.
You can use them from Customiser → Typography and from other Blocksy controls that provide a font-family selector.
Custom Fonts are also made available inside the WordPress block editor where supported, allowing typography to remain consistent between the editor and the front end.
Third-Party Integrations
Blocksy integrates Custom Fonts with several supported page builders and block plugins. This includes integrations with Elementor, Brizy, Stackable and Greenshift.
When supported by the integration, fonts configured through Blocksy become available directly inside the plugin’s typography controls without needing to upload the same files again.
Using Modern Font Stacks
After adding a Modern Font Stack, it becomes available alongside your other font choices throughout the Customiser and supported WordPress block-editor typography controls.
There are no font files to upload or synchronise. Select the stack in the same way you would choose any other font family and Blocksy will output the corresponding system-font stack on the front end.
