# Typography

Typography settings in Formsort give you full control over how text appears in your flows—from base font size to specific fonts and styling for individual text elements like headings and body text.

### Font selection

You can add and manage fonts in your flow via **Theme → Typography → Add font family...**. Formsort supports the following font sources:

* **Google Fonts** (available out of the box)
* **Adobe Fonts**
* **Self-hosted web fonts (e.g., via S3)**

{% hint style="warning" %}
Make sure you have the legal right to use any uploaded font. Per our Terms and Conditions, Formsort will comply with takedown requests from copyright holders.
{% endhint %}

<figure><img src="https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJPnL__mOdr_mLZ8nwf%2Fuploads%2FVexBUOsD1w2L39Z8mwac%2Fimage.png?alt=media&#x26;token=82a52697-ee66-4d31-a8c1-3fd7a1a23285" alt=""><figcaption><p>Typography menu</p></figcaption></figure>

#### Markdown Styling Support

Once a font is added, you can assign it to the typographic elements found in the chart below. You can use Markdown syntax within any text field in your flow. Typography settings allow you to style each tag individually (e.g., `**bold**`, `_italic_`, etc.).

| Category | Description    | Markdown syntax                   |
| -------- | -------------- | --------------------------------- |
| H1       | Heading 1      | #                                 |
| H2       | Heading 2      | ##                                |
| H3       | Heading 3      | ###                               |
| H4       | Heading 4      | ####                              |
| H5       | Heading 5      | #####                             |
| H6       | Heading 6      | ######                            |
| P        | Paragraph      |                                   |
| A        | Hyperlink text | `[Formsort](http://formsort.com)` |
| INPUT    | Input items    |                                   |
| LI       | List items     |                                   |

***

### Uploading custom fonts to Formsort

You can also upload font files directly to Formsort:

1. Navigate to **Theme → Typography → Add font family... → Custom Fonts**

<div align="left"><figure><img src="https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJPnL__mOdr_mLZ8nwf%2Fuploads%2FNbDaH0KaSQxIbxyVqRhr%2Fimage.png?alt=media&#x26;token=8ffc989c-3fb3-4f85-86f3-d001f206555b" alt="" width="563"><figcaption></figcaption></figure></div>

2. Enter the **font family name**
3. Upload the **font files**

<div align="left"><img src="https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJPnL__mOdr_mLZ8nwf%2Fuploads%2FQdPDyfGLiSCjRqdJOGDi%2Fupload_font_file.png?alt=media&#x26;token=1ca8ecd4-c5a2-434d-a5fa-6649dd70bf04" alt="Upload font file" width="375"></div>

4. Map the **font weights** (e.g., Regular, Bold, Light)

{% hint style="success" %}
You can upload multiple font files at once.\
Fonts are stored in your client S3 bucket (no configuration required) and pulled from there automatically.&#x20;
{% endhint %}

***

### Adobe Fonts&#x20;

To use Adobe Fonts in your Formsort flow:

1. **Create or log in** to your Adobe Fonts account.
2. **Search** for a font and click **Add to web project**.

<div align="left"><img src="https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJPnL__mOdr_mLZ8nwf%2F-MZOh8vwHa8s52CFX3uj%2F-MZOiYZogj1nKT1s0GFX%2Fimage.png?alt=media&#x26;token=2da31b68-fecd-48d2-b211-ecbd40ef93bc" alt="Adobe Fonts&#x27; Web Project editor" width="375"></div>

3. In the dialog, **create or select a web project**.
4. Click **Edit Web Project** and note the:
   * **Project ID**
   * **Font-family name**
   * **Weights** you want to use

<div align="left"><img src="https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJPnL__mOdr_mLZ8nwf%2F-MZOh8vwHa8s52CFX3uj%2F-MZOjXUkFba4pDMM7Lm-%2Fimage.png?alt=media&#x26;token=d0266cb7-5eaf-4fd9-8dea-c1be0a88d747" alt="Relevant information within the Edit Web Project view" width="563"></div>

3. In Formsort, go to **Theme → Typography → Add font family... → Adobe Fonts**.

<div align="left"><figure><img src="https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJPnL__mOdr_mLZ8nwf%2Fuploads%2FuqGy2TS4J4250j1CIAsj%2Fimage.png?alt=media&#x26;token=907ce7a8-519e-4f25-a4ec-90c57979e783" alt="" width="563"><figcaption></figcaption></figure></div>

4. Enter the required values.

<div align="left"><figure><img src="https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJPnL__mOdr_mLZ8nwf%2Fuploads%2FdkZjkAHgJYEOYkgp2BCh%2Fimage.png?alt=media&#x26;token=112e3a7f-5b8a-40b1-9b7e-4ffdd4630c3b" alt="" width="329"><figcaption></figcaption></figure></div>

***

### Hosting Custom Fonts

If you have font files that you are already hosting somewhere else (like Amazon S3), you can use them in your flows.

#### CORS Configuration for S3

Here’s a sample CORS policy compatible with Formsort:

```markup
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>https://flow.formsort.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
    <CORSRule>
    <AllowedOrigin>https://studio.formsort.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
  <CORSRule>
    <AllowedOrigin>https://{{YOUR_DOMAIN_HOSTING_FORMSORT}}.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>
```

To test your CORS setup:

```bash
curl -H "Origin: https://flow.formsort.com" -s -D - -o /dev/null  https://{YOUR_BUCKET}.amazonaws.com/{YOUR_PATH}.otf | grep Access-Control-Allow-Origin
```

Expected output:

```
Access-Control-Allow-Origin: https://flow.formsort.com
```