Style Manager Text formats and font management

Text formats and font management

Table of contents

Managing fonts

Adding fonts from Google Fonts

Adding fonts from Adobe Fonts

Getting an Adobe Fonts API Token

Uploading custom fonts

Deleting fonts

Deleting Adobe's fonts

Editing text formats

Adding a text format

Font size

Font weight

Line height

Reordering text formats

Custom bold and italic

Custom settings for mobile devices

Additional decoration settings

Links

Captions for images and embeds

 

Managing fonts

Before editing text formats, you will need to determine the set of fonts used. Style Manager supports fonts from Google Fonts, Adobe Fonts, and your own fonts in WOFF format.

Note: custom fonts are not available in the free version of Setka Editor.

To add new fonts, open any text format from the list in the left and go to Manage Fonts. Then select fonts from Google Fonts, Adobe Fonts, or upload your own font. New font will appear in the Font family dropdown, inside the text format.

Screen_Shot_2017-04-28_at_16.19.56.png

 

Adding fonts from Google Fonts

To add new fonts:

1. Go to Manage Fonts and then into the Google Fonts tab.

2. Enter the font name in the search bar and select it:

 

3. Select desired languages and click Save.

______________2020-04-21___16.37.42_result.png

 

4. Font will appear in the Font family dropdown, inside the text format.

 

Adding fonts from Adobe Fonts

To add new fonts:

1. Go to Manage Fonts and then into the Adobe Fonts tab.

2. Enter your Adobe Fonts API Token.

Screen_Shot_2018-12-14_at_15.05.23.png

 

3. Adobe Fonts web projects will sync with Setka Editor. Click Sync projects to update project list manually. Select the desired web project. Only one web project can be connected with one style, but there are no restrictions on a number of fonts in this web project.

4. Fonts will appear in the Font family dropdown, inside the text format. You will see several groups of fonts if Google Fonts and Adobe Fonts are used simultaneously – to determine the source of the font if names are the same.

Important note: Setka Editor styles do not support the Adobe Fonts' Dynamic subsetting option.

 

Getting an Adobe Fonts API Token

To get an API Token:

1. Log into your Adobe Fonts account and click on the avatar in the top right corner. Select API Tokens in the the menu:

Screen_Shot_2018-12-14_at_14.49.12.png

 

2. Click Make me a new API token or copy the existing one:

mceclip0.png

 

Uploading custom fonts

To add custom fonts, go to Manage fonts, then to the Upload fonts tab. Upload your fonts in the WOFF format. Files can be renamed afterwards. Don't forget to click Save to see your fonts in the Font family dropdown list inside a text format.  

Screen_Shot_2017-04-28_at_16.20.06.png

 

Deleting fonts 

Go to Manage fonts. You will see badges of uploaded fonts in Google Fonts and Upload Fonts tabs. Hover the mouse on one of them and click on cross in the top right corner.

Each badge shows the number of text formats the font is used in. Make sure that you are not deleting the font in use. 

Screen_Shot_2017-04-28_at_16.25.09.png

 

Deleting Adobe's fonts

If you delete a font from an Adobe Fonts web project, it will  automatically disconnect from your site and Setka Editor preview.

 

Editing text formats

Use the Text formats menu in the left to configure desired formats and fonts.

 

When creating a style from scratch, some default text formats will be available:

  • Paragraph  simple text. Uses the <p> tag in an article HTML code.
  • Extra Large Header, Large Header, Medium Header, Small Header  headers of different sizes. Uses tags from <h1> to <h4> respectively, in an article HTML code.
  • Small Text  caption text. Uses the <p> tag in an article HTML code.

Image captions can also be configured. One of the existing text formats is selectable for them. Captions use the Small Text by default.

 

Adding a text format

Click Add text format to create the new one. Configure the following:

 

Font size

To change font size, go to Text formats ->[Format] -> Size. Font size is set in pixels (px).

 

Font weight

To change font weight, go to Text formats ->[Format] -> Weight. Where 400 is a normal weight and 700 is a bold text.

 

Line height

To change font weight, go to Text formats ->[Format] -> Line height. The line height is set as a percentage (%) of the font height.

 

Reordering text formats

Sometimes reordering text formats id required. E.g., if you've created some custom formats and need them to be on top of the list.

Each text format except "Paragraph" can be dragged up or down, changing the order this way:

Screen_Shot_2019-12-27_at_12.22.12.png

Rearranged text formats will appear in the editor after saving the style:

mceclip0.png

 

Custom bold and italic

Sometimes it’s not enough just to highlight the text as bold or italic. You can use custom styles for bold and italic in such cases. This is a classic typography technique from books, magazines and newspapers.

Stylized bold and italic give more freedom to create beautiful and finely readable content.

 

 

To configure custom formatting for bold and italic, go to Text formats -> [Format] -> Advanced bold & italic. Activate the Custom appearance for Bold text or Custom appearance for Italic text item respectively:

Screen_Shot_2017-04-28_at_16.34.54.png

  

Custom settings for mobile devices

Style Manager provides style previews for different device types. To switch between them, use Desktop Tablet Mobile buttons at the top.

Text formats can also be customized for mobile devices. E.g., if font looks too large on a smartphone, it can be downscaled or even changed for another one.

To set font settings for smartphones and tablets:

1. Go to Text formats -> [Format] -> Screen size -> Tablet / Mobile.

2. Activate Custom appearance for mobile screen or Custom appearance for tablet screen, respectively.

3. Styles for smartphones and tablets will be the same as in the Desktop section. But any of their parameters can be fine-tuned:

 

Additional decoration settings

You can additionally configure the appearance for links and image captions.

To set appearance for links, go to Text formats -> Linkslinks can be:

  • Underlined (Underline style).
  • Written in uppercase (Letter Case).
  • Highlighted by increased letter spacing ().

 

Captions for images and embeds

To set captions appearance for images and embeds, go to Text formats -> Image captions. Captions are written in one of the already configured text formats.