Custom Typefaces

Load the font with @font-face, then name it on the element that holds your content. Framework 3.4 or later.

• typeface puts your font on every framework text class inside the element. It works on any container: the screen, a view, a layout, or a plain wrapper.
• --framework-typeface names the font: one quoted family name, or a comma-separated list for your own fallbacks. Inter Variable and Inter always follow it, and the text stays on them when the variable is not set.

<style>
  @font-face {
    font-family: "Lexend";
    font-weight: 100 900;
    src: url("https://example.com/fonts/lexend.woff2") format("woff2");
  }
</style>

<div class="view view--full typeface" style="--framework-typeface: 'Lexend'">
  <div class="layout layout--col">
    <span class="title">Today at a glance</span>
    <span class="description">Three meetings, one deadline</span>
  </div>
</div>

typography.typeface($family) writes the same font rules into your own selector, with the family built in. Pass one quoted family name, or a comma-separated list.

@use "framework/mixins/typography";

.my-plugin {
    @include typography.typeface("Lexend");
}

A theme sets its font with theme-slots.typeface($family), the same mixin under the theme-slots name. Include it in the theme's layer, and the theme class switches the whole screen to your font.

@use "framework/config/layers";
@use "framework/mixins/theme-slots";

@include layers.order;

@font-face {
    font-family: "Example Sans";
    font-weight: 100 900;
    font-style: normal;
    src: url("./fonts/example-sans.woff2") format("woff2");
}

@layer tn--themes {
    .trmnl .screen--theme-example {
        @include theme-slots.typeface("Example Sans");
    }
}

See Authoring Themes for building and loading a theme.

• A plugin's font, set with the typeface class, wins inside its container.
• A theme's font applies everywhere else on the themed screen.
• Without either, the screen uses the device's built-in fonts.

The stylesheets can load in any order.

• Every text class uses your font: titles, labels, values, descriptions, the title bar, item indexes, and rich text.
• On 1-bit and other low-density screens, your font also replaces the Classic and TRMNL pixel fonts.
• Text sizes, line heights, and Text Scale do not change. On 1-bit and other low-density screens they are the sizes drawn for the pixel fonts.
• A font wider or taller than the built-in ones can wrap or clip differently at those sizes, so preview it on the devices you target.
• A theme's theme-slots.font-weight-shift still moves every weight, as long as your font has the weights to move to.

See Font Family for the built-in fonts and when each device uses them.

• The text classes ask for weights from 200 to 700. A variable font that covers that range matches every one of them.
• With separate files per weight, the browser uses the closest weight you declare. Ship at least a regular (400) and a bold (700).
• In a stylesheet you host, point src at files beside it with relative URLs, so it works on any host.
• Include the font's license with the files, and use WOFF2 where you can.

TRMNLPaint.type() returns your font for any text role, so text you draw yourself matches the screen. Pass an el inside a typeface container to read that container's font.

Read it again after a theme switch, and wait for document.fonts.ready before measuring text. See Painting Typography .

A theme with a custom font ships as a folder: the compiled stylesheet with the font files and their license beside it. See the portable exports on Authoring Themes .