Using Fonts in Crayta

• Font import code
• Available fonts
• Icon Fonts

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
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
JollyLodger		JollyLodger-Regular.ttf
Lancelot		Lancelot-Regular.ttf
LilitaOne		LilitaOne-Regular.ttf
Limelight		Limelight-Regular.ttf
LobsterTwo		LobsterTwo-Regular.ttf, LobsterTwo-Bold.ttf
LuckiestGuy		LuckiestGuy-Regular.ttf
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">&#xf520;</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">&#xe87c;</span>

The icon should then appear in your widget: