Fonts — Tomatico UI Style Guide

The fonts

Font	Script	Designer	Licence
Poppins	Latin	Indian Type Foundry, Jonny Pinhorn	SIL Open Font License 1.1
IBM Plex Sans Arabic	Arabic	IBM / Bold Monday	SIL Open Font License 1.1

The Open Font License permits use in products, embedding in apps and self-hosting, at no cost and with no per-seat tracking. Keep the licence file alongside the font files if you redistribute them.

Weights the system uses: 300, 400, 500, 600, 700. No italics — the type scale never calls for one, and each additional face is bandwidth spent on nothing.

Loading from Google Fonts

The quickest option, and what this guide uses. Put it in <head>, before your stylesheet.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap">

Google Fonts

display=swap shows the fallback immediately and swaps when the webfont arrives, so text is never invisible on a slow connection. The two preconnect hints save a round trip.

If a page is English-only, drop the Arabic family from the URL — and vice versa. There is no reason to ship both to a monolingual page.

Self-hosting

Self-host when the product runs on an internal network, when Google Fonts is blocked or slow in the target market, or when a privacy or procurement requirement rules out a third-party request. Serving fonts from your own origin is also faster than a third party on a first visit, because there is one fewer connection to set up.

Download the families from fonts.google.com/specimen/Poppins and fonts.google.com/specimen/IBM+Plex+Sans+Arabic.
Convert to WOFF2. It is the only format worth serving — every browser Tomatico supports reads it, and it is roughly 30% smaller than WOFF.
Subset to the characters you need. A Latin subset of Poppins is a fraction of the full file.
Serve from your own origin with a long cache lifetime.

@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/plex-arabic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Only load the Arabic ranges for this face. */
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face

Declare one @font-face per weight with the real font-weight value. Never let the browser synthesise a bold from a regular — it thickens the strokes unevenly and looks wrong next to the geometric wordmark.

Preload only the one or two faces that appear above the fold:

<link rel="preload" href="/fonts/poppins-400.woff2"
      as="font" type="font/woff2" crossorigin>

Preload

Fallbacks

The stacks are defined as tokens, so the fallback is consistent everywhere:

--tmt-font-latin:  "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
--tmt-font-arabic: "IBM Plex Sans Arabic", "Segoe UI", "Tahoma", system-ui, sans-serif;
--tmt-font-mono:   ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

Font tokens

Tahoma is in the Arabic stack because it ships with Windows and has genuine Arabic coverage — a stack that falls back to a Latin-only face renders Arabic in whatever the system substitutes, which is usually much worse.

Outside the browser

Figma: both families are available in the font picker on the web version; install them locally for the desktop app.
Office and Google Docs: install the desktop fonts, or use the Tomatico letterhead template on the Downloads page, which already carries them.
iOS and Android: bundle the WOFF2 or OTF files in the app. The Open Font License permits embedding.
Email: webfonts are unreliable in email clients. Use the fallback stack and design for it rather than assuming Poppins will arrive.

A note on Galak Pro

Tomatico's earlier branding document specifies Galak Pro for English text. The Brand Guidelines v1.0 supersede that for digital work with Poppins, which is what this system implements — and Poppins has the practical advantages of being free, having full weight coverage, and pairing with a matching Arabic family.

Galak Pro is a commercial licence. If a piece of printed collateral has to match the earlier material exactly, confirm the licence before setting type in it.