---
description: >-
  How to create and edit text format and fonts from various font libraries in
  Setka
---

# Text formats and fonts

## Managing fonts <a href="#h_1f204683-4813-4bbf-becb-6bc228d42cb3" id="h_1f204683-4813-4bbf-becb-6bc228d42cb3"></a>

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

{% hint style="info" %}
**Note:** custom fonts are not available in the free version of Setka Editor.
{% endhint %}

To add new fonts, open any text format from the list on 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.

![Screenshot of Setka Content Design System Manager interface with a pop-up form to find and add fonts from Google Fonts, Adobe Fonts or to upload a custom font](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQniHCcLcwIHSAr9KKI%2F-MQnxhIh5LwXLTBZeGoX%2FManage-Fonts-Google-Fonts-Content-Design-System-Manager.png?alt=media\&token=81e9b331-a923-4379-8839-92a4e5bb8c89)

### Adding fonts from Google Fonts <a href="#connecting_google_fonts" id="connecting_google_fonts"></a>

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 the necessary languages and click **Save**.

![Screenshot of Setka Content Design System Manager interface with IBM Plex Mono font selected and check boxes with supported languages and availiable styles of the font](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQniHCcLcwIHSAr9KKI%2F-MQnyWywuxnXfA4bl2fc%2FAvailable-Languages-Checkbox-Google-Fonts-Setting-Setka-Content-Design-System-Manager.png?alt=media\&token=e575c172-e013-43fc-bd32-fcbf07825cb1)

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

### Adding fonts from Adobe Fonts <a href="#h_84b9ea37-940d-4d43-b5d3-c814644fe7bb" id="h_84b9ea37-940d-4d43-b5d3-c814644fe7bb"></a>

To add new fonts:

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

2\. Enter your Adobe Fonts API Token.

![Screenshot of Setka Content Design System Manager interface with an API token to use Adobe fonts added in the field](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQniHCcLcwIHSAr9KKI%2F-MQnyqkdTawcXKLieoke%2FManage-Fonts-Adobe-Fonts-Setka-Content-Design-System-Manager.png?alt=media\&token=fd888b6e-fec6-4998-9b76-2389994bb310)

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

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

{% hint style="info" %}
**Important note:** Setka Editor styles do not support the Adobe Fonts' [Dynamic subsetting](https://helpx.adobe.com/fonts/using/dynamic-subsetting.html) option.
{% endhint %}

#### Getting an Adobe Fonts API Token <a href="#how_do_i_find_out_my_typekit_api_key" id="how_do_i_find_out_my_typekit_api_key"></a>

To get an API Token:

1\. [Log into your Adobe Fonts account](https://fonts.adobe.com/) and click on the avatar in the top right corner. Select **API Tokens** in the menu:

![Screenshot of Adobe Fonts interface with "API Tokens" link](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQniHCcLcwIHSAr9KKI%2F-MQnzAQ9IqeSc5UWGxLG%2FAdobe-Fonts-API-Token-2.png?alt=media\&token=f132491b-e86e-45c9-be17-61fdc673941f)

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

![Screenshot of Adobe Fonts interface with API Tokens](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQniHCcLcwIHSAr9KKI%2F-MQnzFbSAgfdvX3998vi%2FAdobe-Fonts-API-Token.png?alt=media\&token=572cb247-e094-45a0-8247-d2417622caec)

### Uploading custom fonts <a href="#how_to_add_custom_fonts" id="how_to_add_custom_fonts"></a>

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 afterward. Don't forget to click **Save** to see your fonts in the **Font family** dropdown list inside a text format. &#x20;

![Screenshot of Setka Content Design System Manager interface with a "manage Fonts" pop-up screen with "Upload Font" option selected](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQniHCcLcwIHSAr9KKI%2F-MQnzMpae0AkqjO1bynw%2FManage-Fonts-Custom-Fonts-Upload-Setka-Content-Design-System-Manager.png?alt=media\&token=c266135d-c71a-49b8-b195-8004121b67da)

### Deleting fonts  <a href="#h_ced12e4a-d94f-4fb9-86d9-37537f07b157" id="h_ced12e4a-d94f-4fb9-86d9-37537f07b157"></a>

Go to **Manage fonts**. You will see badges of uploaded fonts in the **Google Fonts** and **Upload fonts** tabs. Hover the mouse on one of them and click on the 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.&#x20;

![Screenshot of Setka Content Design System Manager interface with "Manage Fonts" pop-up window and "Google Fonts" option selected and icon to delete one of the fonts highlighted](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQniHCcLcwIHSAr9KKI%2F-MQnzffU6s_zr3Arqv-4%2FDeleting-Fonts-Setka-Content-Design-System-Manager-Google-Fonts.png?alt=media\&token=d3a8a204-ee80-4382-a702-78f906245ae4)

#### Deleting Adobe's fonts <a href="#changes_in_typekit" id="changes_in_typekit"></a>

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 <a href="#h_ea3d210c-3086-45e4-907f-9c6a7e60fe2b" id="h_ea3d210c-3086-45e4-907f-9c6a7e60fe2b"></a>

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

![Screenshot of Setka Content Design System Manager interface with Text Formats options highlighted](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQniHCcLcwIHSAr9KKI%2F-MQnzoQoPHVnIT6HDsfN%2FText-Format-Settings-Style-Setka-Content-Design-System-Manager.png?alt=media\&token=fba86f4f-1a61-4632-9090-45648c6bb096)

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

*   Paragraph — simple text. Uses the&#x20;

    &#x20;tag in an article HTML code.
*   Extra Large Header, Large Header, Medium Header, Small Header — headers of different sizes. Uses tags from

    &#x20;**to respectively, in an article HTML code.**
*   Small Text — caption text. Uses the&#x20;

    &#x20;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 <a href="#how_to_add_text_formats" id="how_to_add_text_formats"></a>

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

#### Font size

To change font size, go to **Text formats** **> \[Select text format] >** **Size**. Font size is set in pixels (px).

#### Font weight <a href="#how_to_increase_or_decrease_the_font_weight" id="how_to_increase_or_decrease_the_font_weight"></a>

To change font weight, go to **Text formats** **> \[Select text format] >** **Weight**. Where 400 is a normal weight, and 700 is a bold text.

#### Line height <a href="#how_to_adjust_the_line_height" id="how_to_adjust_the_line_height"></a>

To change font weight, go to **Text formats** **> \[Select text format] >** **Line height**. The line height is set as a percentage (%) of the font height.

{% embed url="https://drive.google.com/file/d/1-3npqnhGlVQjd1syBBqEny0YZimg02jE/view?usp=sharing" %}
Video tutorial on how to adjust line height in Setka Content Design System Manager
{% endembed %}

#### Reordering text formats <a href="#h_a05c7498-ff33-47c4-9f70-54a91f7e9f90" id="h_a05c7498-ff33-47c4-9f70-54a91f7e9f90"></a>

Sometimes reordering text formats is 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:

![Screenshot of Setka Content Design System Manager interface with various text formats and "Small Header" highlighted](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQniHCcLcwIHSAr9KKI%2F-MQo-2C39MYRQ48tiOEp%2FReordering-Text-Styles-Setka-Content-Design-System-Manager.png?alt=media\&token=5fbe561d-dae1-4285-a4a8-989b0ea41984)

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

![Screenshot of Setka Editor interface with Text Formats dropdown in Upper Toolbar](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQniHCcLcwIHSAr9KKI%2F-MQo-Q0_1qlDFkM8HADF%2FText-Formats-Dropdown-Upper-Toolbar-Setka-Editor.png?alt=media\&token=dc1edef7-60ec-43cc-a1fa-348270bf166d)

#### Custom bold and italic <a href="#how_to_choose_a_special_format_for_bold_and_italic_text" id="how_to_choose_a_special_format_for_bold_and_italic_text"></a>

Sometimes it’s not enough 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 or italic gives more freedom to create beautiful and finely readable content.

![Screenshot of an article with an example of sylized bold text format](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQniHCcLcwIHSAr9KKI%2F-MQo-mMfixzfVRk9wW-Y%2FArticle-with-Custom-Bold-Text-Style.png?alt=media\&token=767d2330-347d-4558-b869-1032708cbafd)

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

![Screenshot of Setka Content Design System Manager interface with "Advanced bold & italic" settings options highlighted](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MQniHCcLcwIHSAr9KKI%2F-MQo-tYkVyycRppU82pA%2FAdvaced-Bold-Italic-Settings-Setka-Content-Design-System-Manager.png?alt=media\&token=81c13853-b85c-4591-9146-d4ba1b258a03)

#### Custom settings for mobile devices <a href="#how_to_choose_a_special_text_format_for_tablets_and_smartphones_separately" id="how_to_choose_a_special_text_format_for_tablets_and_smartphones_separately"></a>

Content Design System Manager (CDSM) provides style previews for different device types. To switch between them, use the **Desktop** / **Tablet** / **Mobile** buttons at the top.

Text formats can also be customized for mobile devices. E.g., if the 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** **> \[Select text format] >** **Screen size** -> **Tablet / Mobile**.

2\. Activate **Custom appearance for mobile screen** or **Custom appearance for a 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:

{% embed url="https://drive.google.com/file/d/1-3i2hJXNHdybur4JpuxNiIAFkTK5gvlE/view?usp=sharing" %}
Video tutorial on how to choose text formats for tablets and smartphones separately&#x20;
{% endembed %}

{% hint style="info" %}
Setka Editor posts use 3 to switch layouts from desktop to mobile:

* Mobile: 0-767px. The layout is fully customizable via CDSM and the [post editor itself](../setka-post-editor/responsive-layout-for-mobile-screens).
* Tablet: 768-991px. Only text formats can be customized via CDSM. The layout stays the same as the desktop version.
* Desktop: 992px and over.
{% endhint %}

## Additional settings <a href="#h_18fc60d8-78dc-4501-a36b-24c235c70ce5" id="h_18fc60d8-78dc-4501-a36b-24c235c70ce5"></a>

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

### Links <a href="#links_decoration" id="links_decoration"></a>

To set appearance for links, go to **Text formats** **>** **Links**.&#x20;

Links can be:

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

{% embed url="https://drive.google.com/file/d/1-3hZ3B-rV9x6FR-qo2k7Tdsp7Xt5bOVj/view?usp=sharing" %}
Video tutorial on how to set appearance for links in Setka Content Design System Manager&#x20;
{% endembed %}

### Captions for images and embeds <a href="#h_2a0cc215-34d4-400d-a78a-fa21f6d1483e" id="h_2a0cc215-34d4-400d-a78a-fa21f6d1483e"></a>

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.
