MintRender
Sign inStart free
All docs pages

Text, fonts and languages

Text layers use any of the 1,938 families in the Google Fonts catalogue, fit their box with shrink or grow, and fall back to Google's Noto fonts for characters the font does not have. Text is drawn as outlines, so it looks the same in every format.

Fit text in its box

fitWhat happens
noneThe text keeps size. Lines past maxLines are cut, and the last line ends with …
shrinkThe text takes the largest whole size from size down to minSize that fits the box and maxLines. If it still does not fit at minSize, the last line that fits ends with …
growThe text takes the largest whole size from size up to maxSize that still fits the box. Short text gets bigger.
  • minSize defaults to a quarter of size, at least 4. maxSize defaults to the box height, at most 1,000.
  • Lines break where Unicode allows a break. Thai, Lao, Khmer and Myanmar text, which has no spaces, breaks between words. Emoji and accents stay with their letter.
  • A line is size × lineHeight tall. valign places the block in the box: top, middle or bottom.
  • uppercase draws capitals. The data keeps its case.
  • For a title, use fit: "shrink" with a minSize and maxLines. Long titles then get smaller, and very long ones end with …
{ "id": "title", "type": "text", "x": 80, "y": 120, "w": 1040, "h": 260,  "text": "Default title", "font": "Inter", "weight": 700, "size": 72,  "fit": "shrink", "minSize": 36, "maxLines": 3, "lineHeight": 1.1,  "color": "#ffffff", "param": "title" }

Bold, italic and colour

With "markup": true on the layer, the text can hold a small markup. It is off by default, so data with * in it stays as typed.

WriteGives
**bold**Bold: weight 700, or the layer's weight when it is heavier.
*italic*Italic.
{color:#ef4444}red{/}A colour for part of the text.
\*A * as typed. A backslash keeps the next character.

A style the family does not have takes its nearest weight.

Fonts

  • Name any family of the Google Fonts catalogue in font, like "Inter" or "DM Serif Display". Case does not matter. Font uploads are not supported.
  • weight is 100 to 900 in steps of 100, and the family must have it. A missing weight is a 400 that lists the family's styles.
  • italic: true uses the family's italic. A family without one is slanted by 12 degrees.
  • The first render that uses a font style fetches it from Google once. After that we keep that exact file, so the same template gives the same text later.
  • fonts on the scene, like ["Inter:400,700i"], loads styles ahead. It is optional: every font a layer names is loaded anyway.

The 20 most used families, with their styles (i is italic):

FamilyStyles
Roboto100, 100i, 200, 200i, 300, 300i, 400, 400i, 500, 500i, 600, 600i, 700, 700i, 800, 800i, 900, 900i
Google Sans400, 400i, 500, 500i, 600, 600i, 700, 700i
Open Sans300, 300i, 400, 400i, 500, 500i, 600, 600i, 700, 700i, 800, 800i
Inter100, 100i, 200, 200i, 300, 300i, 400, 400i, 500, 500i, 600, 600i, 700, 700i, 800, 800i, 900, 900i
Montserrat100, 100i, 200, 200i, 300, 300i, 400, 400i, 500, 500i, 600, 600i, 700, 700i, 800, 800i, 900, 900i
Poppins100, 100i, 200, 200i, 300, 300i, 400, 400i, 500, 500i, 600, 600i, 700, 700i, 800, 800i, 900, 900i
DM Sans100, 100i, 200, 200i, 300, 300i, 400, 400i, 500, 500i, 600, 600i, 700, 700i, 800, 800i, 900, 900i
Lato100, 100i, 300, 300i, 400, 400i, 700, 700i, 900, 900i
Noto Sans JP100, 200, 300, 400, 500, 600, 700, 800, 900
Nunito200, 200i, 300, 300i, 400, 400i, 500, 500i, 600, 600i, 700, 700i, 800, 800i, 900, 900i
Roboto Mono100, 100i, 200, 200i, 300, 300i, 400, 400i, 500, 500i, 600, 600i, 700, 700i
Arimo400, 400i, 500, 500i, 600, 600i, 700, 700i
Nunito Sans200, 200i, 300, 300i, 400, 400i, 500, 500i, 600, 600i, 700, 700i, 800, 800i, 900, 900i
Roboto Condensed100, 100i, 200, 200i, 300, 300i, 400, 400i, 500, 500i, 600, 600i, 700, 700i, 800, 800i, 900, 900i
Rubik300, 300i, 400, 400i, 500, 500i, 600, 600i, 700, 700i, 800, 800i, 900, 900i
Noto Sans KR100, 200, 300, 400, 500, 600, 700, 800, 900
Dancing Script400, 500, 600, 700
Figtree300, 300i, 400, 400i, 500, 500i, 600, 600i, 700, 700i, 800, 800i, 900, 900i
Roboto Slab100, 200, 300, 400, 500, 600, 700, 800, 900
Cairo200, 300, 400, 500, 600, 700, 800, 900

Missing characters

For each character, the engine takes the first font that has it, in this order:

  1. The layer's font.

  2. The families in fallbackFonts, in order (at most 4).

  3. The Noto font for the character's script: Noto Sans for Latin, Greek and Cyrillic; Noto Sans JP for Japanese kana; Noto Sans KR for Hangul; for Chinese characters Noto Sans JP when the text has kana, Noto Sans KR when it has Hangul, else Noto Sans SC; "Noto Sans" and the script name for other scripts, when Google has it.

One render may use at most one Chinese, Japanese or Korean font, because these fonts are 5 to 16 MB each. A render that needs two answers 400 and names them.

Languages and scripts

Right-to-left scripts (Arabic, Hebrew) are ordered with the Unicode bidirectional algorithm, and mixed lines work. HarfBuzz shapes complex scripts such as Arabic, Devanagari and Thai, so letters join and marks sit in the right place. The table counts the catalogue's families for some scripts:

ScriptFamilies
Latin1,818
Latin extended1,515
Vietnamese515
Cyrillic296
Greek120
Arabic53
Hebrew62
Devanagari63
Bengali11
Tamil17
Thai34
Khmer28
Japanese68
Korean38
Chinese (simplified)10
Chinese (traditional)16

In a PDF, a hidden text layer makes the text selectable and searchable for the scripts that the PDF library can write. The visible text is always the exact outlines.

Emoji

Emoji are drawn as Twemoji pictures (v17.0.3), sized to the line. They need no emoji font. In a PDF they are pictures and have no text form.

Seen MintRender used for content that breaks our terms? Report it. Questions about the API: support@mintrender.com, with the request id.