As you develop your game, you might find that you want to alter the fonts used within the UI to complement the style or theme of your game.
This can be done by referencing supported fonts (see below for the list) in the CSS portion of your UI widget:
Font Import Code
@font-face { font-family: FONTNAME; src: url('https://content.crayta.com/fonts/FONTFILE'); font-weight: 400; /* 400 = Regular, 500 = Medium, 600 = Semi-bold, 700 = bold */ } h1 { font-family: FONTNAME; }
The supported fonts are:
FONTNAME | EXAMPLE | FONTFILE |
Asset | ![]() | Asset-Regular.ttf |
Audiowide | ![]() | Audiowide-Regular.ttf |
Bangers | ![]() | Bangers-Regular.ttf , Bangers.ttf |
Barlow | ![]() | Barlow-Black.ttf , Barlow-BlackItalic.ttf , Barlow-Medium.ttf , BarlowCondensed-Regular.ttf |
Barrio | ![]() | Barrio-Regular.ttf |
Bevan | ![]() | Bevan-Regular.ttf |
Bungee | ![]() | Bungee-Regular.ttf |
CabinSketch | ![]() | CabinSketch-Regular.ttf , CabinSketch-Bold.ttf |
CaesarDressing | ![]() | CaesarDressing-Regular.ttf |
ConcertOne | ![]() | ConcertOne-Regular.ttf |
Dharma Gothic E | ![]() | DharmaGothicE-Regular.otf |
Dokdo | ![]() | Dokdo-Regular.ttf |
DrSugiyama | ![]() | DrSugiyama-Regular.ttf |
Eater | ![]() | Eater-Regular.ttf |
Ewert | ![]() | Ewert-Regular.ttf |
FontdinerSwanky | ![]() | FontdinerSwanky-Regular.ttf |
Frijole | ![]() | Frijole-Regular.ttf |
GloriaHallelujah | ![]() | GloriaHallelujah-Regular.ttf |
Graduate | ![]() | Graduate-Regular.ttf |
GrenzeGotisch | ![]() | GrenzeGotisch-Regular.ttf , GrenzeGotisch-Medium.ttf , GrenzeGotisch-Light.ttf , GrenzeGotisch-Bold.ttf , GrenzeGotisch-Black.ttf |
Griffy | ![]() | Griffy-Regular.ttf |
Industry | ![]() | Industry-Bold.otf , Industry-Book.otf , Industry-Medium.otf |
JollyLodger | ![]() | JollyLodger-Regular.ttf |
Lancelot | ![]() | Lancelot-Regular.ttf |
LilitaOne | ![]() | LilitaOne-Regular.ttf |
Limelight | ![]() | Limelight-Regular.ttf |
LobsterTwo | ![]() | LobsterTwo-Regular.ttf , LobsterTwo-Bold.ttf |
LuckiestGuy | ![]() |
|
MaidenOrange | ![]() | MaidenOrange-Regular.ttf |
Merriweather | ![]() | Merriweather-Regular.ttf , Merriweather-Light.ttf , Merriweather-Bold.ttf , Merriweather-Black.ttf |
Montserrat | ![]() | Montserrat-Bold.ttf , Montserrat-BoldItalic.ttf , Montserrat-Light.ttf , Montserrat-LightItalic.ttf , Montserrat-Regular.ttf |
Metamorphous | ![]() | Metamorphous-Regular.ttf |
MountainsofChristmas | ![]() | MountainsofChristmas-Regular.ttf , MountainsofChristmas-Bold.ttf |
Neucha | ![]() | Neucha-Regular.ttf |
NotoSans | ![]() | NotoSans-Regular.ttf |
Orbitron | ![]() | Orbitron-Black.ttf , Orbitron-Bold.ttf , Orbitron-Medium.ttf , Orbitron-Regular.ttf |
Oxygen | ![]() | Oxygen-Regular.ttf |
PirataOne | ![]() | PirataOne-Regular.ttf |
PressStart2P | ![]() | PressStart2P-Regular.ttf |
PTSans | ![]() | PTSans-Regular.ttf |
RibeyeMarrow | ![]() | RibeyeMarrow-Regular.ttf |
Raleway | ![]() | Raleway-Regular.ttf , Raleway-Medium.ttf , Raleway-Light.ttf , Raleway-Bold.ttf , Raleway-Black.ttf |
RobotoMono | ![]() | RobotoMono-Regular.ttf |
RockSalt | ![]() | RockSalt-Regular.ttf |
Rye | ![]() | Rye-Regular.ttf |
Sancreek | ![]() | Sancreek-Regular.ttf |
SedgwickAveDisplay | ![]() | SedgwickAveDisplay-Regular.ttf |
Sevillana | ![]() | Sevillana-Regular.ttf |
SpaceMono | ![]() | SpaceMono-Regular.ttf |
SpecialElite | ![]() | SpecialElite-Regular.ttf |
SpicyRice | ![]() | SpicyRice-Regular.ttf |
Staatliches | ![]() | Staatliches-Regular.ttf |
Teko | ![]() | Teko-Regular.ttf , Teko-Medium.ttf , Teko-Light.ttf , Teko-Bold.ttf |
TurretRoad | ![]() | TurretRoad-Regular.ttf , TurretRoad-Medium.ttf , TurretRoad-Light.ttf , TurretRoad-Bold.ttf |
VT323 | ![]() | VT323-Regular.ttf |
WalterTurncoat | ![]() | WalterTurncoat-Regular.ttf |
Icon Fonts
Crayta also supports the use of icon fonts Font Awesome and Material Icons, via the use of ligatures (code points).
Font Awesome
Step 1 – Include the Font Awesome font in your widget, and assign it to a class
@font-face { font-family: 'Font Awesome'; src: url('https://content.crayta.com/fonts/FontAwesome5-Solid.ttf'); } .fa { font-family: 'Font Awesome'; }
Step 2 – Go to https://fontawesome.com/cheatsheet/free/solid to see the available icons
Step 3 – Copy the code point to the right of the icon you want

Step 4 – Add the code point to a span
tag with the class .fa
, wrapping it with &#x
and ;
,
e.g.: &#x
f520
;
<span class="fa"></span>
The icon should then appear in your widget:

Material Icons
Step 1 – Include the Material Icons font in your widget, and assign it to a class
@font-face { font-family: 'Material Icons'; src: url('https://content.crayta.com/fonts/MaterialIcons-Regular.otf'); } .material-icons { font-family: 'Material Icons'; }
Step 2 – Go to https://fonts.google.com/icons to see the available icons
Step 3 – Click the icon you wish to use

Step 4 – Copy the code point from the right-hand drawer

Step 5 – Add the code point to a span
tag with the class you used above, wrapping it with &#x
and ;
,
e.g.: &#x
e87c
;
<span class="material-icons"></span>
The icon should then appear in your widget:
