Fonts

The default font for the UI Framework is Rubik. This typeface is versatile, offering a range of weights and styles that can be easily applied to UI elements. You can explore the Rubik font family here: Rubik on Google Fonts.

Default classes and variables

.font-light {
  -unity-font-definition: var(--font-light);
}
.font-light-italic {
  -unity-font-definition: var(--font-light-italic);
}

.font-medium {
  -unity-font-definition: var(--font-medium);
}
.font-medium-italic {
  -unity-font-definition: var(--font-medium-italic);
}

.font-bold {
  -unity-font-definition: var(--font-bold);
}
.font-bold-italic {
  -unity-font-definition: var(--font-bold-italic);
}

.font-black {
  -unity-font-definition: var(--font-black);
}
.font-black-italic {
  -unity-font-definition: var(--font-black-italic);
}

Changing the Default Font

If you'd like to use a custom font instead of Rubik, you can override the default font definitions by setting new font asset paths in the :root CSS block. Here’s how to change the default --font-medium to a new font:

:root {
  --font-medium: url("project://database/Assets/myFont.asset");
}

Font Size

<!-- font size -->
<engine:VisualElement class="text-xs" />

Format: text-{variant}

Class Name
Size

text-xs

12px

text-s

14px

text-m

16px

text-l

18px

text-xl

20px

text-2xl

24px

text-3xl

30px

text-4xl

36px

text-5xl

48px

text-6xl

60px

text-7xl

72px

text-8xl

96px

text-9xl

128px

PreviousLayoutNextCursor

Last updated