> For the complete documentation index, see [llms.txt](https://docs.theseaai.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.theseaai.com/tools/text/typefaces.md).

# Typefaces

{% hint style="danger" %}
**Text** is a beta feature and may not function as expected.

Currently, you can only create text in the Text Layout task. Using it in other tasks may produce flattened and unpredictable results.This feature will progressively be available across all tasks.
{% endhint %}

***

## System Fonts

**Choose from pre-loaded fonts that support both Western and CJK characters.**

All system fonts are licensed for commercial use (OFL/Apache licenses). You can safely use them in client work and commercial projects.

* Noto Sans CJK (Universal Sans)
* Noto Serif CJK (Universal Serif)
* M PLUS 1p (Friendly Sans)
* M PLUS Rounded 1c (Soft Rounded)
* Kosugi Maru (Monoline Rounded)
* Kiwi Maru (Friendly Serif)
* Nanum Gothic (Modern Sans)

If you work with Chinese, Japanese, or Korean text, use fonts that explicitly support CJK characters. System fonts like Noto Sans CJK and Noto Serif CJK provide comprehensive coverage. Western-only fonts may display missing character boxes (□) for CJK text.

### How to Use a System Font

{% stepper %}
{% step %}

#### Select "Text" Tool or Existing Text Layer 

* In the bottom toolbar, select the <i class="fa-text" style="color:$primary;">:text:</i> <kbd><mark style="color:$primary;">**Text**<mark style="color:$primary;"></kbd> tool.
* Select existing text layers:
  * Single-click on any text layer to select.
  * Hold Shift and click to select multiple text layers.
    {% endstep %}

{% step %}

#### Select the Typeface Selector

In the top bar, select the Typeface selector.

This opens the typeface panel.
{% endstep %}

{% step %}

#### Select “All”

In the typeface panel, select the <kbd><mark style="color:$primary;">**All**<mark style="color:$primary;"></kbd> tab.

The list displays each typeface name in its actual style.
{% endstep %}

{% step %}

#### Select a Typeface

Select the desired typeface from the list.

The selected typeface will be applied directly to the active text layer.
{% endstep %}
{% endstepper %}

***

## Custom Fonts

{% hint style="danger" %}
**Font Licensing**

For custom fonts, ensure you have the appropriate license and file format for your intended use. Uploading a font to Beachside does not grant commercial rights beyond the permissions defined in your font license.
{% endhint %}

Upload your own typefaces to maintain brand consistency across all layouts. Beachside supports only Web Open Font Format (**.WOFF** and **.WOFF2**)

### How to Upload and Use a Custom Font

{% stepper %}
{% step %}

#### Select "Text" Tool or Existing Text Layer&#x20;

* In the bottom toolbar, select the <i class="fa-text" style="color:$primary;">:text:</i> <kbd><mark style="color:$primary;">**Text**<mark style="color:$primary;"></kbd> tool.
* Select existing text layers:
  * Single-click on any text layer to select.
  * Hold Shift and click to select multiple text layers.
    {% endstep %}

{% step %}

#### Select the Typeface Selector

In the top bar, select the Typeface selector.

This opens the typeface panel.
{% endstep %}

{% step %}

#### Select “Upload”

In the typeface panel, select the <kbd><mark style="color:$primary;">**Upload**<mark style="color:$primary;"></kbd> tab.
{% endstep %}

{% step %}

#### Select “Upload Font”

Select <kbd><mark style="color:$primary;">**Upload Font**<mark style="color:$primary;"></kbd>, then choose a font file from your computer.

The uploaded font will appear in your custom font list.

{% hint style="danger" %}
Beachside supports only Web Open Font Format (**.WOFF** and **.WOFF2**)
{% endhint %}
{% endstep %}

{% step %}

#### Select the Custom Typeface

Select the custom typeface from the list.

The selected typeface will be applied directly to the active text layer.
{% endstep %}
{% endstepper %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.theseaai.com/tools/text/typefaces.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.