# Fonts (/syntax/fonts)



Discover how to register, configure, and use different font engines in your LVGL UI designs through XML configuration.

Overview [#overview]

In XML, fonts are considered external resources. A target font engine
needs to be selected and named in order to be referenced in XML files
later.

Registering Fonts [#registering-fonts]

In order to use fonts in the Editor add your TTF files in the `fonts` folder of your project, and list specific fonts you need in an `<fonts>` block in `globals.xml`.

Right now the 3 Font engines are supported:

1. `<bin>` - Convert the glyphs (characters) to bitmaps in requested size. Each font with a different size will take space. A `range` and a list of `symbols` can be also specified
2. `<tiny_ttf>` - Parse the TTF files and render the bitmaps at runtime in the required size. Works on MCUs too.
3. `<freetype>` - Also renders from TTF files but it's design for MPUs

As Data [#as-data]

The Editor can convert the TTF files to C array that can be compiled into the firmware. To use the fonts as C array set `as_file="false"`.

For example:

```xml title="xml" lineNumbers=1
<globals>
 <fonts>
   <bin as_file="false" name="medium" src_path="path/to/file.ttf" range="0x20-0x7f" symbols="°" size="24"/>

   <tiny_ttf as_file="false" name="big" src_path="path/to/file.ttf" size="48"/>
 </fonts>
</globals>
```

As File [#as-file]

Fonts used directly from a TTF file can be listed in the `fonts`
section of `globals.xml`.

`as_file` must be set to `true` to indicate that the font is treated as
a file.

For example:

```xml title="xml" lineNumbers=1
<globals>
 <fonts>
   <bin as_file="true" name="medium" src="path/to/file.ttf" range="0x20-0x7f" symbols="°" size="24"/>

   <tiny_ttf as_file="true" name="big" src_path="path/to/file.ttf" range="0x20-0x7f" size="48"/>
 </fonts>
</globals>
```

Usage in XML [#usage-in-xml]

Once a font is registered, it can be referenced by its name in styles or
even `api` properties:

```xml title="xml" lineNumbers=1
<component>
 <api>
    <prop name="title_font" type="font" default="my_font_32"/>
 </api>

 <styles>
    <style name="subtitle" text_font="my_font_24"/>
 </styles>

 <view flex_flow="column">
    <lv_label style_text_font="$title_font" text="Title"/>
    <lv_label text="I'm the subtitle">
       <style name="subtitle"/>
    </lv_label>
 </view>
```

Font Engines [#font-engines]

Learn more about the features and config option of each Font engine.

`bin` [#bin]

Binary fonts can either reference:

1. A ".bin" font file created by LVGL's Font converter from a TTF
   file (when `as_file="true"`). The font will be loaded by
   `lv_binfont_create`.
2. An `lv_font_t` pointer compiled
   into the firmware (`as_file="false"`).

`bin` fonts require these properties:

* **`name`** — The name to reference the font later
* **`src_path`** — Path to the font file
* **`size`** — Font size in px (e.g., "12")
* **`bpp`** — Bits-per-pixel: 1, 2, 4, or 8
* **`as_file`** — `true` if the font is a ".bin" file, `false` if it is an lv\_font\_t in C

If `as_file` is:

* `false`: It generates a C file with the `lv_font_t` structs.
* `true`: It generates a ".bin" file.

Binary fonts also support selecting a subset of characters:

* **`range`** — For example, `"0x30-0x39 0x100-0x200"` to specify Unicode ranges to include. The default is `"0x20-0x7F"` to cover the ASCII range.
* **`symbols`** — List of extra characters to add, e.g., `"°ÁŐÚ"`. Can be used together with `range`. Default is empty (no extras).

`tiny_ttf` [#tiny_ttf]

TinyTTF fonts use the [tiny\_ttf](https://lvgl.io/docs/open/libs/font_support/tiny_ttf) engine to load TTF files directly or from data.

Required properties:

* **`name`** — The name to reference the font later
* **`src_path`** — Path to the font file
* **`size`** — Font size in px (e.g., "12")
* **`as_file`** — `true` or `false`

If `as_file` is:

* `false`: A C file with raw TTF file data is also generated.
* `true`: Nothing else is generated, as the TTF file will be used directly.

`<freetype>` [#freetype]

FreeType fonts use the [freetype](https://lvgl.io/docs/open/libs/font_support/freetype) engine to load TTF files directly. Loading from data is not supported, so `as_file` is always considered `true`.

Required properties:

* **`name`** — The name to reference the font later
* **`src_path`** — Path to the font file
* **`size`** — Font size in px (e.g., "12")