Style Manager Text Formatting and adding new fonts

Text Formatting and adding new fonts

The Style Manager includes several text types: regular text (Paragraph), text for captions (Small text) and various headers: Large Header, Medium Header, Small Header. You can also set up image caption styles using one of the existing styles: for example, Paragraph.

 

 

How to add text formats?

To add text formats click the Add Text Format button and specify its properties.

 

How to add new fonts?*

When adding new fonts to the Post Style you can choose from Google Fonts library or Typekit*.

*Typekit and custom fonts are available on Pro plans.

Choose a font from preselected Google Fonts and standard fonts under Font Family. If you have both Google and Typekit fonts there will be 2 groups of fonts displayed.

 

Screen_Shot_2017-04-28_at_16.19.56.png

 

To add new fonts from the Google Fonts library, click Manage Fonts. Browse the Google Fonts library via the link (which will appear in separate tab). Enter the name of the desired font into the search field of Manage Fonts and click save. These fonts are then added to your fonts lists.

 

 

If you would like to add a font from Typekit, you will need to enter your Typekit API Key. You can find your API Key in your Typekit account settings in the API Access section. Click Manage button and you will be able to either generate a new API Key or find an existing one. 

 

typekit_api_key.png

 

Once you've entered your API Key your Typekit will sync with Setka Editor. Select the desired kit. Each Post Style can only have one kit connected, but it can have as many fonts as you want.

 

typekit_token.png

 

Fonts will be displayed in the drop-down menu. If you have both Google and Typekit fonts there will be 2 groups of fonts displayed. 

  

Changes in Typekit

If you have made changes in your Typekit (added new fonts), go to the account settings, click Sync kits next to the Typekit API Key. After these steps all the changes will be updated in Setka Editor. You can then add new fonts in Style Manager and select your new Typekit.

When new fonts are added to the Typekit, they will appear in the font list.

If you delete fonts from your Typekit, they will be immediately disconnected from WordPress and Setka Editor preview (this is a specific Typekit feature). These fonts will be deleted from the fonts list in the Style Manager after you click Sync.

 

 

How to preview Typekit fonts in the post preview?

You have to make sure that editor.setka.io domain name is added to your Typekit settings.

 

typekit_settings.png

 

If there are more than 10 domain names added to your kit,  you will have to delete one to make space for editor.setka.io domain.

  

How to add custom fonts?*

*Available on Pro plans.

To add custom fonts click Manage fonts. Upload files in the Upload fonts tab (they must be in WOFF format) and rename them. To add files to the drop-down menu for selecting fonts, click Save in the pop-up window.

 

Screen_Shot_2017-04-28_at_16.20.06.png

 

How to delete the fonts I don’t need?

Click Manage fonts. In the next window, your active fonts are shown.

Hover over the font you no longer want and click the cross.

Each font shows the number of formats it is used in so that you do not accidentally delete desired fonts.

 

Screen_Shot_2017-04-28_at_16.25.09.png

 

How to change the font size? 

In order to change the font size, for example, in regular text, click Text Formats > Paragraph > Size. You can specify the font size in pixels (px). You can do the same with other text formats.

 

How to change weight of font?

In order to change the font weight, for example, in regular text, click Text Formats > Paragraph > Weight. 400 – regular weight, 700 – bold text. You can do the same with other text formats.

 

How to adjust the line height?

In order to change the line height, for example, in regular text, click Text Formats > Paragraph > Line height. You can specify the line height in percent (%).

 

 

What are the format options for links?

Links can be underlined (Format > underline) or not underlined (Format > none). You can configure link styles by making them uppercase (Letter Case> uppercase) or by changing the letter spacing in pixels (px).

 

 

How to set a special text formats for tablets and smartphones separately?

You can view styles for various devices. The view buttons are in the upper part of the screen.

In order to set a special text format for tablets, click Text Format > Paragraph/Small text/Large Header/ Medium Header/ Small Header > Screen size: Tablet.

In order to set a special text format for smartphones, click Text Format > Paragraph/Small text/Large Header/ Medium Header/ Small Header > Screen size: Mobile.

 

  

How to choose a special format for bold and italic text?

You can use custom fonts for bold and italic styles. In order to edit fonts for bold text, click Text Format > Paragraph/Large Header/ Medium Header/ Small Header/ Small text/Accented text > Advanced bold & italic > Custom appearance for Bold text.

In order to use custom fonts for italic text, click Text Format > Paragraph/Large Header/ Medium Header/ Small Header/ Small text/Accented text > Advanced bold & italic > Custom appearance for Italic text.

 

Screen_Shot_2017-04-28_at_16.34.54.png

 

How to choose a format for image captions and embeds?

Captions for images and embeds are displayed in one of the configured styles (Text Format > Paragraph/ Large Header/ Medium Header/ Small Header/ Small text). You can select color for captions (Text Format > Color).