Style Manager Text Formatting and adding new fonts

Text Formatting and adding new fonts

There are 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 the image caption style 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 select the option you need.

 

How to add new fonts?

When adding new fonts to the post style you can choose from Google Fonts library or Typekit.

In order to add new fonts from the Google Fonts library choose 'Add font'  and select font name in the search field.

 

Screen_Shot_2017-04-28_at_16.19.56.png

 

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. 

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.

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.

 

Where can I see the added fonts?

The new font will be displayed in the Font Family section.

 

Connecting fonts from Adobe Typekit

To add new fonts, click Manage fonts. You will see the Google Fonts, Typekit and Upload Fonts tabs.

After selecting Typekit, enter your Typekit API Key.

 

typekit_token.png

 

After entering the Typekit API Key, all the Typekits will be synchronized with the Setka Editor. Select the desired kit. Each style connects with one Typekit only, but it can have as many fonts as you like.

Fonts will appear in your drop-down menu. If you are using Google Fonts and Typekit at the same time, you will have 3 font groups for an easier navigation if they have the same name.

 

How do I find out my Typekit API Key?

This key can be obtained in your account at typekit.com: go to the account settings and then to the API Access. Click Manage button where you can generate a new API Key or find out your current one.

 

typekit_api_key.png

 

Changes in Typekit

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

If you've made changes to the Typekit (for example, added new fonts) and want to update Style Manager, click on the Sync kits button next to your Typekit name. After this you can go to Add Typekit fonts and select a new Typekit.

If new font was added to the Typekit, it will appear in the font list.

If you delete fonts from your Typekit, it will be immediately disconnected from WordPress and from Setka Editor preview (this is a specific Typekit feature). Font will be deleted from the fonts list in the Style Manager after you click the Sync button. The deleted font will disappear from the list, and you will be notified when using the style to which the Typekit with the removed font is connected.

 

 

How to preview Typekit fonts in the post preview?

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

 

typekit_settings.png

 

In case there are more than 10 domains added to your kit then you will have to delete one to make space for editor.setka.io domain.

 

Connecting Google Fonts

To add new fonts, click Manage fonts, you will see Google Fonts, Typekit and Upload Fonts tabs.

After selecting Google Fonts, enter the name of the desired font in the search bar and then select it.

 

 

How to add custom fonts?

To add custom fonts click Manage fonts button. Upload files in the Upload fonts tab (they must be in the WOFF format). After that you can rename the files. To add files to the drop-down menu for selecting fonts, click the Save button 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 appeared window in the tabs of Google Fonts and Upload Fonts you will see badges of downloaded fonts. If you hover on them, you will see a cross. Click on it to remove any unnecessary fonts.
Each badge shows how many text formats use the selected font so that you do not accidentally delete the 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 types of text.

 

How to increase or decrease the font weight?

In order to change the font weight, for example, in regular text, click Text Formats > Paragraph > Weight. 400 – regular weight, 700 – bold text.

 

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). Moreover, you can configure link styles by making them uppercase (Letter Case> uppercase) or by changing the letter spacing. 

 

 

How to choose a special text format 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 > Styles for Tablet.

In order to set a special text format for smartphones, click Text Format > Paragraph/Small text/Large Header/ Medium Header/ Small Header > Styles for 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/Small text/Large Header/ Medium Header/ Small Header/ Small text > Custom appearance for Bold text.

In order to use custom fonts for italic text, click Text Format > Paragraph/Small text/Large Header/ Medium Header/ Small Header/ Small text > 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).