Typography

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.

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.

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, check our open-source section for typography where we explain how to use Orbit with Roboto.

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 .

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

import React from "react"
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 useId={React.useId} theme={{orbit: customTokens}}>
  <App />
</OrbitProvider>

See Getting started for designers for more details.