Documentation

Everything you need to get started with Blocksy Theme and Companion

Typography

The global typography options can be found in CustomizerGeneral OptionsTypography. Here you will find options to alter the font settings for specific areas of the theme.

Base Font – this is the general typography option that will change the entire typography on your website. You can edit the typography options for an individual element/part from their appropriate options located in the Design tab.

Each typography option provides the following customizations:

Font Size – sets the text font size, available units – px, em, rem, pt and vw (more info).

Line Height – sets the text line height, available units – no unit, px, em, pt and % (more info).

Letter Spacing – sets the spacing between words letters, available units – only em (more info).

Text Transform – available options – Capitalize and UPPERCASE (more info).

Text Decoration – available options – line through and underline (more info).

Font Family – chose from a large variety of system fonts and google fonts.

Font Weight – set the font weight based on font family options.

Google Fonts

Blocksy plays well with Google Fonts, we have implemented a huge list of 900+ fonts in order to help you to enhance your website and stand out from the crowd.

You will find also in the Typography panel a list of Google Fonts subsets that could be customized to meet your needs.

Custom Web Fonts

If you want to use a web font that is not listed in our System Fonts, then follow these steps to include it in your theme:

  1. Make sure you have installed and activated the Child Theme (more info here).
  2. Copy the folder/folders that contains the web font inside the Child theme.
  3. Copy the font author’s CSS, and paste it inside the style.css of the child theme, it should look similar to this one:
@font-face{
	font-family: 'MyWebFont';
	src: url('folder/WebFont.eot');
	src: url('folder/WebFont.eot?#iefix') format('embedded-opentype'),
	url('folder/WebFont.woff') format('woff'),
	url('folder/WebFont.ttf') format('truetype'),
	url('folder/WebFont.svg#webfont') format('svg');
}

Now you have to apply the newly added font to a specific element like this:

#my-element {
	font-family: 'MyWebFont';
	font-size: 17px;
}
Not the solution you are looking for?

Please check other articles or open a support ticket.