> For the complete documentation index, see [llms.txt](https://docs.scaleflex.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.scaleflex.com/studio/template-builder/building-a-template/fonts.md).

# Fonts

Type is usually the part of a template that carries the brand, so Template Builder lets you bring your own fonts into a project and use them like any other.

### Which fonts are available

The **Font** list on a text layer holds two things: Roboto, which ships with Template Builder, and the fonts you have imported into your project. System fonts are not offered, so a template can only use type the project actually has.

### Importing a font

1. Select a text layer and open the **Font** list.
2. Choose the upload entry at the top of the list. The **Import fonts** window opens.
3. Drop your font files onto it, or click to browse. Only `.ttf` files are accepted; anything else is skipped with a message telling you so.
4. Check each file's detected **Family**, **Weight** and **Style**, and correct them if they are wrong. These are what the font is called and grouped by afterwards.
5. Click the import button. Files that fail stay in the list so you can retry them.

<div align="left"><figure><img src="https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2Fb7gYZZUqo8mzxFp5Y5nC%2F18-import-fonts-two-files.png?alt=media&amp;token=5a4944c1-ac79-417f-8152-df06e5bef834" alt="" width="563"><figcaption></figcaption></figure></div>

### Weights and styles

Each font file is one face. A family with regular, medium and bold weights needs three files, and an italic face is its own file again.

That is why **Weight & style** on a text layer offers a list of faces rather than a bold button: it lists what you have imported for that family. If a weight is missing there, import its file.

{% hint style="info" %}
Give related files the same **Family** name when you import them. That is what groups them into one entry in the **Font** list, with the faces available under **Weight & style**.
{% endhint %}

### When a font is in the project but not in the Font list

The **Font** list only shows fonts it can place precisely: which family each file belongs to, and which weight and style it is. It reads that from how the file is named, and a file that is not named the way it expects is left out of the list without a message.

Fonts imported with the **Import fonts** window are always named correctly, because the window names each file from the **Family**, **Weight** and **Style** you confirmed. The gap is fonts that reached your project some other way, for example added outside Template Builder. Those keep the name they arrived with. The upload succeeds, the file is in the project, and yet the font does not appear in the **Font** list.

If a font you expect is missing, import its file again through **Import fonts**. That gives it the name the list recognizes, and it appears straight away.

### Where imported fonts live

Imported fonts are stored with your project, not with the template. Once imported, a font is available to every template in that project, and to the service that renders your images.

{% hint style="warning" %}
Fonts belong to the project, not to the template. Move a template to another project - by exporting it, or by rebuilding it there - and any font that project has not imported falls back to another face when the image is rendered. Import the fonts first.
{% endhint %}

### Where to go next

* [Text layers](/studio/template-builder/building-a-template/text-layers.md) for the rest of the type controls.
