{"id":1705,"date":"2021-01-29T02:00:06","date_gmt":"2021-01-29T00:00:06","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=1705"},"modified":"2026-10-08T11:49:49","modified_gmt":"2026-10-08T08:49:49","slug":"custom-fonts","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/custom-fonts\/","title":{"rendered":"Custom Fonts"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-video\"><video height=\"2056\" style=\"aspect-ratio: 3456 \/ 2056;\" width=\"3456\" autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/01\/Screen-Recording-2025-02-06-at-16.22.04.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Activating the Custom Fonts extension.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Custom Fonts<\/strong> extension lets you upload your own font files and use them throughout Blocksy&#8217;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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The extension supports <strong>TTF<\/strong> and <strong>WOFF2<\/strong> files and stores them locally on your website, avoiding the need to load those fonts from an external provider.<\/p>\n\n\n\n<div class=\"wp-block-group has-palette-color-8-color has-palette-color-1-background-color has-text-color has-background is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"is-style-info coblocks-alert-paragraph wp-block-paragraph\"><strong>Blocksy Pro required<\/strong><br>The Custom Fonts extension requires Blocksy Companion Pro to be installed and active.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To activate and configure the Custom Fonts extension:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to <strong>WordPress Dashboard \u2192 Blocksy \u2192 Extensions<\/strong>.<\/li>\n\n\n\n<li>Locate and activate the <strong>Custom Fonts<\/strong> extension.<\/li>\n\n\n\n<li>Open the extension&#8217;s settings and select <strong>Add Fonts<\/strong>.<\/li>\n\n\n\n<li>Choose whether you are adding a standard font, variable font or Modern Font Stack.<\/li>\n\n\n\n<li>Configure the required files, weights and styles, then save your changes.<\/li>\n<\/ol>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Configuring Fonts<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"2056\" style=\"aspect-ratio: 3456 \/ 2056;\" width=\"3456\" autoplay controls loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/01\/Screen-Recording-2025-02-06-at-16.43.20.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Adding a standard font and its variations.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Standard Fonts<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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 <strong>100<\/strong> to <strong>900<\/strong>, together with regular and italic variants where required.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Variable Fonts<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Variable fonts can contain a range of font weights inside a single file, reducing the need to upload a separate file for every variation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Preloading Fonts<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<div class=\"wp-block-group has-palette-color-8-color has-palette-color-1-background-color has-text-color has-background is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"is-style-info coblocks-alert-paragraph wp-block-paragraph\"><strong>Preload selectively<\/strong><br>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.<\/p>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Modern Font Stacks<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The extension also integrates with <a href=\"https:\/\/modernfontstacks.com\/\" target=\"_blank\" rel=\"nofollow noreferrer noopener\"><strong>Modern Font Stacks<\/strong><\/a>, providing curated system-font combinations without requiring you to upload any font files.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Each stack uses fonts that are commonly available on modern operating systems and automatically falls back through the configured list depending on the visitor&#8217;s device. Because the fonts are supplied by the operating system, no separate web font download is required.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Using Custom Fonts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Once a font has been configured, it becomes available throughout Blocksy&#8217;s font selectors wherever typography options are supported.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Custom Fonts are identified by a small <strong>C<\/strong> icon in the font selector, making them easy to distinguish from system fonts, Google Fonts, Adobe Fonts and locally downloaded Google Fonts.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ada003a0f136&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ada003a0f136\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2056\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/01\/Screenshot-2025-02-06-at-17.11.34.png\" alt=\"Custom Fonts displayed in the Blocksy font selector\" class=\"wp-image-12589\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Custom Fonts available throughout Blocksy&#8217;s typography controls.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can use them from <strong>Customiser \u2192 Typography<\/strong> and from other Blocksy controls that provide a font-family selector.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Third-Party Integrations<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Blocksy integrates Custom Fonts with several supported page builders and block plugins. This includes integrations with <strong>Elementor<\/strong>, <strong>Brizy<\/strong>, <strong>Stackable<\/strong> and <strong>Greenshift<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When supported by the integration, fonts configured through Blocksy become available directly inside the plugin&#8217;s typography controls without needing to upload the same files again.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ada003a104e4&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ada003a104e4\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2056\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/01\/Screenshot-2025-02-06-at-16.55.31.png\" alt=\"Blocksy Custom Font available inside Greenshift typography controls\" class=\"wp-image-12583\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Using a Blocksy Custom Font with Greenshift.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Using Modern Font Stacks<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After adding a Modern Font Stack, it becomes available alongside your other font choices throughout the Customiser and supported WordPress block-editor typography controls.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ada003a11017&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ada003a11017\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3455\" height=\"2159\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/01\/Screenshot-2025-02-06-at-16.58.42.png\" alt=\"Modern Font Stack configuration in the Blocksy Custom Fonts extension\" class=\"wp-image-12587\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Configuring a Modern Font Stack.<\/figcaption><\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Custom Fonts extension lets you upload your own font files and use them throughout Blocksy&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[116],"class_list":["post-1705","documentation","type-documentation","status-publish","hentry","doc_categories-extensions"],"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/1705","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=1705"}],"version-history":[{"count":16,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/1705\/revisions"}],"predecessor-version":[{"id":15297,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/1705\/revisions\/15297"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=1705"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=1705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}