Using the navigation sidebar on the left you relocate to, among others, the Preview Page.
The main purpose of this page is to see how bigger chunks of text look like with desired fonts.
In addition to selecting fonts for each section, here you'll also be able to adjust some other text settings, such as text size, line height and padding.
Looking at the controls sidebar on the left, you might be wondering - what do Font A: and Font B: stand for? Good question. You can select up to two fonts from your library here, so that when you select a specific text section, you won't have to look through the entire font list again to quickly apply the pre-selected fonts. We named them "Font A" and "Font B". To use these, just click "Use Font A" or "Use Font B" to quickly apply either to the selected text section. Please keep in mind that a button will only be visible if the respective font is selected beforehand.
NOTE: as an alternative, you can also set Font A and B from the Family page or the font list in the main page. To do this, simply right-click the desired font and select either "Use as Preview Font A" or "Use as Preview Font B". Please remember that if you have fonts grouped into families in that list, this action will use the displayed font only.
Below you will find a dropdown font list that enables you to set a custom font, resetting any of the A and B fonts you currently have selected for the text section. After selecting a custom font you will see a new "Reset custom font" icon to the right, which, well, resets the custom font.
Font size and line height, when set without selecting a text section here, will apply to the entire text page. Selecting a section before adjusting font size and line height will make the changes apply only to this particular section, relative to the general style values.
Variable font properties, if available, can be set after selecting a text section.
Padding settings are also only displayed for the current text section. They can be adjusted in each of the four individual directions (top, right, bottom, left) by clicking the respective number around the square in the left sidebar and dragging it to the left (decrease) or to the right (increase). You can also double-click any of the numbers and input the value manually.
Lastly, the controls sidebar includes a CSS export button and preview. Find out more at Awesome page.