{"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":"2024-01-09T17:46:08","modified_gmt":"2024-01-09T15:46:08","slug":"typography","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/general-options\/typography\/","title":{"rendered":"Typography"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">Quick Look<\/h3>\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\"><\/video><figcaption class=\"wp-element-caption\">Typography Options in action<\/figcaption><\/figure>\n\n\n\n<p>We&#8217;ve made changing the fonts throughout your website super simple and to the point. You can find all the relevant options to control the typography of your website inside our <strong>Customiser -&gt; Typography<\/strong> section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Typography Options<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Base Font<\/strong> &#8211; this is the general typography option that will change the primary font on your website<\/li>\n\n\n\n<li><strong>Heading 1 &#8211; 6<\/strong> &#8211; this option will let you stylise all your headings separately from the base text<\/li>\n\n\n\n<li><strong>Buttons <\/strong>&#8211; this option will let you change up the font of your buttons<\/li>\n\n\n\n<li><strong>Blockquote <\/strong>&#8211; easily adjust the font choice for the quote Gutenberg block<\/li>\n\n\n\n<li><strong>Preformatted<\/strong> &#8211; this choice will let you select the font used for displaying blocks of code<\/li>\n\n\n\n<li><strong>Fallback Font Family <\/strong>&#8211; in case the selected fonts cannot be displayed by the browser, this will let you specify which default system font should be used instead<\/li>\n<\/ul>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a038c5e4df3c&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a038c5e4df3c\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2019\/10\/font-options-expanded-scaled.jpg\" alt=\"\" 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\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\">Expanded font options<\/figcaption><\/figure>\n\n\n\n<p>Each typography option provides the following customisation options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Font Size<\/strong> &#8211; sets the text font size. Available units &#8211; <strong>px<\/strong>, <strong>em<\/strong>, <strong>rem<\/strong>, <strong>pt<\/strong> &amp; <strong>vw<\/strong><\/li>\n\n\n\n<li><strong>Line Height<\/strong> &#8211; sets the text spacing in between the lines. Available units &#8211; <strong>no unit<\/strong>, <strong>px<\/strong>, <strong>em<\/strong>, <strong>pt<\/strong> &amp; <strong>%<\/strong><\/li>\n\n\n\n<li><strong>Letter Spacing<\/strong> &#8211; sets the spacing between the word letters. Available units &#8211; <strong>em<\/strong><\/li>\n\n\n\n<li><strong>Text Transform<\/strong> &#8211; lets you easily set the font to <strong>Capitalise<\/strong> and <strong>UPPERCASE<\/strong><\/li>\n\n\n\n<li><strong>Text Decoration<\/strong> &#8211; sets the text decoration option. Available choices &#8211;<strong> line through<\/strong> and <strong>underline<\/strong><\/li>\n\n\n\n<li><strong>Font Family<\/strong> &#8211; choose from a large variety of default system fonts or Google Fonts.<\/li>\n\n\n\n<li><strong>Font Weight<\/strong> &#8211; sets the font weight<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Privacy Update<\/h2>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a038c5e4e96f&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a038c5e4e96f\" 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-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2019\/10\/Screenshot-2022-10-21-at-15.48.19.png\" alt=\"\" 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\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\">Google Fonts Privacy Update Notice<\/figcaption><\/figure>\n\n\n\n<p>Starting with <strong>October 2022<\/strong>, you might be seeing a cautionary message when trying to activate a remote Google Font. This has been implemented in order to comply with the privacy regulations in every country, as many legislations around the globe do not permit loading remote content without the user&#8217;s knowledge and consent.<\/p>\n\n\n\n<p>If you wish to quickly get around these privacy regulations and use Google Fonts on your website, you can easily use our <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/local-google-fonts\/\" data-type=\"URL\" data-id=\"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/local-google-fonts\/\">Local Google Fonts extension<\/a>, that&#8217;s part of <a href=\"https:\/\/creativethemes.com\/blocksy\/premium\/\" data-type=\"URL\" data-id=\"https:\/\/creativethemes.com\/blocksy\/premium\/\">Blocksy Pro<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Font Categorisation<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2019\/10\/Screenshot-2022-10-21-at-15.52.00.png\" alt=\"\" class=\"wp-image-6245\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>You might also see a few new icons near the font titles when you&#8217;re customising your website. These have been added in order for the web designer to see which fonts are loaded from where.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>S<\/strong> &#8211; signifies a system font, which is loaded from the visitor&#8217;s device operating system. This is the most privacy friendly choice that you can make.<\/li>\n\n\n\n<li><strong>G<\/strong> &#8211; signifies a remote Google Font that&#8217;s going to load from Google&#8217;s servers directly.<\/li>\n\n\n\n<li><strong>A<\/strong> &#8211; signifies a remote <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/adobe-typekit-fonts\/\" data-type=\"URL\" data-id=\"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/adobe-typekit-fonts\/\">Adobe Font<\/a> that&#8217;s going to load from Adobe&#8217;s servers directly.<\/li>\n\n\n\n<li><strong>L <\/strong>&#8211; signifies a <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/local-google-fonts\/\" data-type=\"URL\" data-id=\"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/local-google-fonts\/\">locally hosted Google Font<\/a>, which will load directly from your web server.<\/li>\n\n\n\n<li><strong>C <\/strong>&#8211; signifies a font uploaded via our <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/custom-fonts\/\" data-type=\"URL\" data-id=\"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/custom-fonts\/\">Custom Fonts extension<\/a>.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-background is-layout-constrained wp-block-group-is-layout-constrained\" style=\"border-radius:4px;background-color:#ebf2f3\">\n<h5 class=\"wp-block-heading\"><strong>Google Fonts<\/strong><\/h5>\n\n\n\n<p class=\"is-style-info coblocks-alert-paragraph\"><strong>Google Fonts<\/strong> is the primary choice for developers when it comes to customising the typography of their website. That&#8217;s why, with Blocksy, we have decided to bundle in the <strong>whole Google Fonts catalogue<\/strong> for you to use. They are available at the bottom of the fonts list and are subject to the same customisation options available for the system fonts.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-background is-layout-constrained wp-block-group-is-layout-constrained\" style=\"border-radius:4px;background-color:#dcf0f0\">\n<h5 class=\"wp-block-heading\"><strong>Bonus Premium Features<\/strong><\/h5>\n\n\n\n<p>For our <strong>Premium<\/strong> customers, we have also decided to let them upload their own personal library of fonts from their computer, as well as use their <strong>Adobe Fonts<\/strong> collections.<\/p>\n\n\n\n<p class=\"is-style-info coblocks-alert-paragraph\">More information can be found here &#8212; <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/custom-fonts\/\">https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/custom-fonts\/<\/a> &amp; <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/adobe-typekit-fonts\/\">https:\/\/creativethemes.com\/blocksy\/docs\/extensions\/adobe-typekit-fonts\/<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Quick Look We&#8217;ve made changing the fonts throughout your website super simple and to the point. You can find all the relevant options to control the typography of your website inside our Customiser -&gt; Typography section. Typography Options Each typography option provides the following customisation options: Privacy Update Starting with October 2022, you might be [&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":6}},"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":3,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/879\/revisions"}],"predecessor-version":[{"id":9218,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/879\/revisions\/9218"}],"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}]}}