{"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":"2025-02-06T17:30:59","modified_gmt":"2025-02-06T15:30:59","slug":"custom-fonts","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/custom-fonts\/","title":{"rendered":"Custom Fonts"},"content":{"rendered":"\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>The&nbsp;<strong>Custom Fonts<\/strong>&nbsp;extension allows you to upload and use your own fonts across your WordPress website, seamlessly integrating them with both Blocksy and compatible page builders. This feature gives you complete typography control, ensuring a truly unique design.<\/p>\n\n\n\n<p>The extension supports\u00a0<strong>TTF<\/strong>\u00a0and\u00a0<strong>WOFF2<\/strong>\u00a0font formats and works effortlessly with popular page builders like\u00a0<strong>Gutenberg, Elementor, and Brizy<\/strong>. Whether you\u2019re using\u00a0<strong>standard <\/strong>or<strong> variable fonts<\/strong>, you have the flexibility to fine-tune your typography for the best performance and appearance.<\/p>\n\n\n\n<p>With\u00a0<strong>Blocksy 2<\/strong>, we\u2019ve also introduced support for the\u00a0<a href=\"https:\/\/modernfontstacks.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Modern Font Stacks<\/a>\u00a0library, allowing you to leverage system fonts for better performance and consistency across different devices.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Configuring a Font<\/h2>\n\n\n\n<p>Adding a custom font to your website is quick and effortless. Simply click the&nbsp;<strong>\u201cAdd Fonts\u201d<\/strong>&nbsp;button in the extension settings, follow the upload prompts, and your new font will be ready to use.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"2056\" style=\"aspect-ratio: 3456 \/ 2056;\" width=\"3456\" controls 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 simple font and its variants.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Simple Fonts<\/h3>\n\n\n\n<p>For traditional font files, you can upload separate files for different&nbsp;<strong>weights<\/strong>&nbsp;(from 100 to 900) and&nbsp;<strong>styles<\/strong>&nbsp;(regular and italic). This allows you to define specific versions of the font for various text elements throughout your site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Variable Fonts<\/h3>\n\n\n\n<p>Variable fonts simplify font management by containing all weight and style variations within a&nbsp;<strong>single file<\/strong>. Instead of uploading multiple versions, you only need two files:&nbsp;<strong>one for standard text<\/strong>&nbsp;and&nbsp;<strong>one for the italicised version<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Modern Font Stacks<\/h3>\n\n\n\n<p>With\u00a0<a href=\"https:\/\/modernfontstacks.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Modern Font Stacks<\/a>, you can take advantage of\u00a0<strong>pre-installed system fonts<\/strong>\u00a0that dynamically load based on the user\u2019s device and operating system. This approach ensures optimal performance while maintaining a polished, professional look.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Customiser Support<\/h2>\n\n\n\n<p>Once your fonts are uploaded and configured, they will seamlessly integrate with the&nbsp;<strong>Customiser<\/strong>, appearing anywhere font selection is available. Custom fonts are easily identifiable by a small&nbsp;<strong>\u201cC\u201d icon<\/strong>&nbsp;at the bottom of the font list, ensuring quick and easy access whenever you need them.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69ed2d665fb5a&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69ed2d665fb5a\" class=\"wp-block-image size-full 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/01\/Screenshot-2025-02-06-at-17.11.34.png\" alt=\"\" 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\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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 support throughout the Customiser.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Page Builder Support<\/h2>\n\n\n\n<p>Blocksy\u2019s&nbsp;<strong>Custom Fonts<\/strong>&nbsp;extension is fully compatible with a range of popular page builders, including&nbsp;<strong>Elementor, Brizy, and Gutenberg-based plugins<\/strong>&nbsp;like&nbsp;<strong>Stackable<\/strong>&nbsp;and&nbsp;<strong>Greenshift<\/strong>. Once a font is uploaded, it will automatically appear in the font selection controls of these builders, giving you even more flexibility and control over your website\u2019s typography.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69ed2d6660241&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69ed2d6660241\" class=\"wp-block-image size-full 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/01\/Screenshot-2025-02-06-at-16.55.31.png\" alt=\"\" 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\taria-label=\"Enlarge\"\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.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\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\">Greenshift plugin custom font support.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Modern Font Stacks Anecdote<\/h2>\n\n\n\n<p>When a&nbsp;<strong>Modern Font Stack<\/strong>&nbsp;is selected, the fonts will automatically become available throughout the&nbsp;<strong>Customizer<\/strong>&nbsp;and the&nbsp;<strong>Gutenberg editor<\/strong>. There\u2019s no need for additional configuration\u2014simply enable the stack, and the system will handle the rest, ensuring a seamless and optimized typography experience.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"3455\" height=\"2159\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/01\/Screenshot-2025-02-06-at-16.58.42.png\" alt=\"\" class=\"wp-image-12587\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The&nbsp;Custom Fonts&nbsp;extension allows you to upload and use your own fonts across your WordPress website, seamlessly integrating them with both Blocksy and compatible page builders. This feature gives you complete typography control, ensuring a truly unique design. The extension supports\u00a0TTF\u00a0and\u00a0WOFF2\u00a0font formats and works effortlessly with popular page builders like\u00a0Gutenberg, Elementor, and Brizy. Whether you\u2019re using\u00a0standard [&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"],"blocksy_meta":{"post_title_panel":"","has_hero_section":"default","8476f6fb9d65be4d1bd9442b44166065":"","hero_section":"type-1","hero_elements":[{"id":"custom_title","enabled":true,"heading_tag":"h1","title":"Home"},{"id":"custom_description","enabled":true,"description_visibility":{"desktop":true,"tablet":true,"mobile":false}},{"id":"custom_meta","enabled":true,"meta_elements":[{"id":"author","enabled":true,"label":"By","has_author_avatar":"yes","avatar_size":25},{"id":"post_date","enabled":true,"label":"On","date_format_source":"default","date_format":"M j, Y"},{"id":"categories","enabled":true,"label":"In","style":"simple"},{"id":"comments","enabled":true}],"page_meta_elements":{"joined":true,"articles_count":true,"comments":true}},{"id":"breadcrumbs","enabled":false}],"e39d7ad7fd0510f28a161b2155eed404":"","hero_alignment1":"left","hero_margin":{"desktop":50,"tablet":30,"mobile":30},"hero_alignment2":"center","hero_vertical_alignment":"center","4770f21ee6083d3b9f36b04d9a753738":"","hero_structure":"narrow","56cae2396d2192694b62639830786b34":"","page_title_bg_type":"featured_image","custom_hero_background":{"attachment_id":null},"parallax":{"desktop":false,"tablet":false,"mobile":false},"df34f5ce174c95c3b8eba3b3e0143962":"","hero_height":"250px","pageTitleFont":{"family":"Default","variation":"Default","size":{"desktop":"32px","tablet":"30px","mobile":"25px"},"line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"pageTitleFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageMetaFont":{"family":"Default","variation":"n6","size":"12px","line-height":"1.3","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"uppercase","text-decoration":"CT_CSS_SKIP_RULE"},"pageMetaFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageExcerptFont":{"family":"Default","variation":"Default","size":"CT_CSS_SKIP_RULE","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"pageExcerptColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"breadcrumbsFont":{"family":"Default","variation":"n6","size":"12px","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"uppercase","text-decoration":"CT_CSS_SKIP_RULE"},"breadcrumbsFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"initial":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageTitleOverlay":{"default":{"color":"CT_CSS_SKIP_RULE"}},"pageTitleBackground":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"no-repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"#EDEFF2"}}},"0453f84e47db532ef1374d4414ca8c50":"","page_structure_type":"default","content_style":"inherit","vertical_spacing_source":"inherit","content_area_spacing":"both","background":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"no-repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"CT_CSS_SKIP_RULE"}}},"content_background":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"no-repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"#ffffff"}}},"content_boxed_shadow":{"inherit":false,"blur":18,"spread":-6,"v_offset":12,"h_offset":0,"inset":false,"enable":true,"color":{"color":"rgba(34, 56, 101, 0.04)"}},"boxed_content_spacing":{"desktop":{"top":"40px","bottom":"40px","left":"40px","right":"40px","linked":true},"tablet":{"top":"35px","bottom":"35px","left":"35px","right":"35px","linked":true},"mobile":{"top":"20px","bottom":"20px","left":"20px","right":"20px","linked":true}},"content_boxed_radius":{"top":"3px","bottom":"3px","left":"3px","right":"3px","linked":true},"bf0bfeeb658e9b5e45085553db1fd453":"","disable_featured_image":"no","disable_share_box":"no","disable_author_box":"no","disable_posts_navigation":"no","0d5ff3473f7f002b04e3c5cdaafea42f":"","disable_related_posts":"no","disable_header":"no","disable_footer":"no","docs_item_badge":"PRO","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"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":14,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/1705\/revisions"}],"predecessor-version":[{"id":12597,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/1705\/revisions\/12597"}],"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}]}}