{"id":879,"date":"2019-10-22T11:46:32","date_gmt":"2019-10-22T11:46:32","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=879"},"modified":"2026-09-02T11:08:37","modified_gmt":"2026-09-02T08:08:37","slug":"typography","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/general-options\/typography\/","title":{"rendered":"Typography"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Blocksy&#8217;s <strong>Typography<\/strong> options let you define the default fonts and text styling used throughout your website. You can configure body text, individual heading levels, buttons, blockquotes, preformatted content and fallback fonts from one central panel.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To access these options, navigate to <strong>Customiser \u2192 Typography<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quick Look<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2019\/10\/Screen-Recording-2021-09-03-at-14.07.51.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">An overview of the Typography options in the Customiser.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Granular Controls<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Typography Targets<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Blocksy provides separate typography controls for the most common text elements used throughout your website:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Base Font<\/strong> &#8211; defines the primary typography used for body text and other elements that inherit the site&#8217;s default font.<\/li>\n\n\n\n<li><strong>Heading 1 &#8211; 6<\/strong> &#8211; lets you configure each heading level independently from the Base Font.<\/li>\n\n\n\n<li><strong>Buttons<\/strong> &#8211; controls the default typography used by supported buttons.<\/li>\n\n\n\n<li><strong>Blockquote<\/strong> &#8211; controls the typography used by blockquote content.<\/li>\n\n\n\n<li><strong>Preformatted<\/strong> &#8211; defines the font used for preformatted and code-style content.<\/li>\n\n\n\n<li><strong>Fallback Font Family<\/strong> &#8211; specifies the system font family that should be used if the selected primary font cannot be loaded or displayed.<\/li>\n<\/ul>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6aa3f838d37e0&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6aa3f838d37e0\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img decoding=\"async\" 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\/2019\/10\/font-options-expanded-scaled.jpg\" alt=\"Expanded typography controls in Blocksy\" class=\"wp-image-5401\" \/><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\">Expanded typography controls for an individual text element.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Typography Settings<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Each supported typography target exposes a set of controls for defining its appearance:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Font Family<\/strong> &#8211; choose from available system fonts, Google Fonts and any additional font sources provided by Blocksy extensions.<\/li>\n\n\n\n<li><strong>Font Weight<\/strong> &#8211; select the weight used by the chosen font where supported.<\/li>\n\n\n\n<li><strong>Font Size<\/strong> &#8211; defines the size of the text. Supported units include <code>px<\/code>, <code>em<\/code>, <code>rem<\/code>, <code>pt<\/code> and <code>vw<\/code>.<\/li>\n\n\n\n<li><strong>Line Height<\/strong> &#8211; controls the vertical distance between lines of text. Values can be unitless or use supported units such as <code>px<\/code>, <code>em<\/code>, <code>pt<\/code> and <code>%<\/code>.<\/li>\n\n\n\n<li><strong>Letter Spacing<\/strong> &#8211; adjusts the spacing between individual characters.<\/li>\n\n\n\n<li><strong>Text Transform<\/strong> &#8211; applies supported capitalisation options such as Capitalise or UPPERCASE.<\/li>\n\n\n\n<li><strong>Text Decoration<\/strong> &#8211; applies supported decorations such as underline or line-through.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Font Sources<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Blocksy identifies fonts in the selector according to where they are loaded from. A small letter next to each font makes it easier to distinguish between system, remote and locally hosted sources.<\/p>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-top is-layout-flex wp-container-core-columns-is-layout-995f960e wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6aa3f838d47b8&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6aa3f838d47b8\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img decoding=\"async\" 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\/2019\/10\/Screenshot-2022-10-21-at-15.52.00.png\" alt=\"Font source indicators in the Blocksy font selector\" class=\"wp-image-6245\" \/><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\">Font source indicators in the Typography selector.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<ul class=\"wp-block-list\">\n<li><strong>S<\/strong> &#8211; a system font provided by the visitor&#8217;s operating system.<\/li>\n\n\n\n<li><strong>G<\/strong> &#8211; a Google Font loaded remotely from Google&#8217;s servers.<\/li>\n\n\n\n<li><strong>A<\/strong> &#8211; an Adobe Font provided through the Blocksy Pro Adobe Fonts integration.<\/li>\n\n\n\n<li><strong>L<\/strong> &#8211; a Google Font downloaded and served locally through the Local Google Fonts extension.<\/li>\n\n\n\n<li><strong>C<\/strong> &#8211; a font added through the Blocksy Pro Custom Fonts extension.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Google Fonts &amp; Privacy<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Blocksy provides direct access to Google Fonts from the Typography font selector. When a remote Google Font is selected, the required font files are requested from Google&#8217;s servers when visitors load your website.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6aa3f838d60b8&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6aa3f838d60b8\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img decoding=\"async\" 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\/2019\/10\/Screenshot-2022-10-21-at-15.48.19.png\" alt=\"Privacy notice shown when selecting a remote Google Font in Blocksy\" class=\"wp-image-6244\" \/><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\">Blocksy identifies when a selected Google Font will be loaded remotely.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Depending on the privacy requirements that apply to your website and its visitors, loading fonts from a third-party service may require additional consideration. If you prefer to avoid remote Google Fonts requests, Blocksy Pro provides the <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/local-google-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Local Google Fonts<\/strong><\/a> extension.<\/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>Using Local Google Fonts<\/strong><br>Once the Local Google Fonts extension is activated and synchronised, remote Google Fonts are removed from the Customiser font list. The fonts you download through the extension are served directly from your own web server instead.<\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Blocksy Pro Font Options<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Blocksy Pro provides additional extensions for expanding the fonts available throughout the Typography system.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Local Google Fonts<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/local-google-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Local Google Fonts<\/strong><\/a> extension lets you download selected Google Fonts and serve them directly from your website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can choose which weights and styles are stored locally and optionally preload selected font files. Locally hosted Google Fonts are identified by the <strong>L<\/strong> icon inside Blocksy&#8217;s font selector.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Custom Fonts<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/custom-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Custom Fonts<\/strong><\/a> extension lets you upload your own font files and make them available throughout Blocksy&#8217;s typography controls.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The extension supports standard and variable fonts, including <strong>TTF<\/strong> and <strong>WOFF2<\/strong> files. Uploaded fonts are identified by the <strong>C<\/strong> icon in the font selector.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adobe Fonts<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/adobe-typekit-fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Adobe Fonts<\/strong><\/a> extension connects Blocksy with an Adobe Fonts project using its Project ID.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once connected, fonts from the selected Adobe project become available inside Blocksy&#8217;s font selectors and are identified by the <strong>A<\/strong> icon.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Blocksy&#8217;s Typography options let you define the default fonts and text styling used throughout your website. You can configure body text, individual heading levels, buttons, blockquotes, preformatted content and fallback fonts from one central panel. To access these options, navigate to Customiser \u2192 Typography. Quick Look Granular Controls Typography Targets Blocksy provides separate typography controls [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[113],"class_list":["post-879","documentation","type-documentation","status-publish","hentry","doc_categories-general-options"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/879","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=879"}],"version-history":[{"count":5,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/879\/revisions"}],"predecessor-version":[{"id":15145,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/879\/revisions\/15145"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=879"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=879"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}