Blocksy’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 → Typography.
Quick Look
Granular Controls
Typography Targets
Blocksy provides separate typography controls for the most common text elements used throughout your website:
- Base Font – defines the primary typography used for body text and other elements that inherit the site’s default font.
- Heading 1 – 6 – lets you configure each heading level independently from the Base Font.
- Buttons – controls the default typography used by supported buttons.
- Blockquote – controls the typography used by blockquote content.
- Preformatted – defines the font used for preformatted and code-style content.
- Fallback Font Family – specifies the system font family that should be used if the selected primary font cannot be loaded or displayed.
Typography Settings
Each supported typography target exposes a set of controls for defining its appearance:
- Font Family – choose from available system fonts, Google Fonts and any additional font sources provided by Blocksy extensions.
- Font Weight – select the weight used by the chosen font where supported.
- Font Size – defines the size of the text. Supported units include
px,em,rem,ptandvw. - Line Height – controls the vertical distance between lines of text. Values can be unitless or use supported units such as
px,em,ptand%. - Letter Spacing – adjusts the spacing between individual characters.
- Text Transform – applies supported capitalisation options such as Capitalise or UPPERCASE.
- Text Decoration – applies supported decorations such as underline or line-through.
Font Sources
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.
- S – a system font provided by the visitor’s operating system.
- G – a Google Font loaded remotely from Google’s servers.
- A – an Adobe Font provided through the Blocksy Pro Adobe Fonts integration.
- L – a Google Font downloaded and served locally through the Local Google Fonts extension.
- C – a font added through the Blocksy Pro Custom Fonts extension.
Google Fonts & Privacy
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’s servers when visitors load your website.
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 Local Google Fonts extension.
Using Local Google Fonts
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.
Blocksy Pro Font Options
Blocksy Pro provides additional extensions for expanding the fonts available throughout the Typography system.
Local Google Fonts
The Local Google Fonts extension lets you download selected Google Fonts and serve them directly from your website.
You can choose which weights and styles are stored locally and optionally preload selected font files. Locally hosted Google Fonts are identified by the L icon inside Blocksy’s font selector.
Custom Fonts
The Custom Fonts extension lets you upload your own font files and make them available throughout Blocksy’s typography controls.
The extension supports standard and variable fonts, including TTF and WOFF2 files. Uploaded fonts are identified by the C icon in the font selector.
Adobe Fonts
The Adobe Fonts extension connects Blocksy with an Adobe Fonts project using its Project ID.
Once connected, fonts from the selected Adobe project become available inside Blocksy’s font selectors and are identified by the A icon.