Typography is critical for communicating the hierarchy of content.

We use Circular Pro as the main typography supported by Orbit. Circular Pro is the only typeface for western texts and Lato is used for some eastern languages, with a fallback to system fonts.

Circular Pro in Kiwi.com projects

We have Circular Pro licensed for Kiwi.com domain, so there is nothing stopping our designers from working with Circular Pro with all our platforms.

Circular Pro in non-Kiwi.com projects

You can, of course, use Circular Pro typography with Orbit in any project. Just be sure that you have the right license for your project. If you can’t or don’t want to use Circular Pro in your project, heck our open-source section for typography where we explain how to use Orbit with Roboto.

Using Orbit with Circular Pro

In an ideal world, it should be that easy as changing the value of the fontFamily design token and everything would work automatically. It’s actually not much harder, just a few more steps .

In React components

1. Insert font files into the page

<link rel="stylesheet" href="//images.kiwi.com/fonts/circular-pro/style.min.css" />

2. Change theme object

import getTokens from "@kiwicom/orbit-components/lib/getTokens"
import OrbitProvider from "@kiwicom/orbit-components/lib/OrbitProvider"
const customTokens = getTokens({
base: {
fontFamily: `"Circular Pro", -apple-system, ".SFNSText-Regular", "San Francisco",
"Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;`
<OrbitProvider theme={{orbit: customTokens}}>
<App />

In Figma

See Getting started for designers for more details.