Categories
Advanced Tutorials

Using Fonts in Crayta

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:

FONTNAMEEXAMPLEFONTFILE
AssetThis image has an empty alt attribute; its file name is 55cda967-asset.pngAsset-Regular.ttf
AudiowideThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngAudiowide-Regular.ttf
BangersThis image has an empty alt attribute; its file name is ddfe4ce5-bangers.pngBangers-Regular.ttf, Bangers.ttf
BarlowThis image has an empty alt attribute; its file name is 83ac5b92-barlow.pngBarlow-Black.ttf, Barlow-BlackItalic.ttf, Barlow-Medium.ttf, BarlowCondensed-Regular.ttf
BarrioThis image has an empty alt attribute; its file name is ddfe4ce5-bangers.pngBarrio-Regular.ttf
BevanThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngBevan-Regular.ttf
BungeeThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngBungee-Regular.ttf
CabinSketchThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngCabinSketch-Regular.ttf, CabinSketch-Bold.ttf
CaesarDressingThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngCaesarDressing-Regular.ttf
ConcertOneThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngConcertOne-Regular.ttf
DokdoThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngDokdo-Regular.ttf
DrSugiyamaThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngDrSugiyama-Regular.ttf
EaterThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngEater-Regular.ttf
EwertThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngEwert-Regular.ttf
FontdinerSwankyThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngFontdinerSwanky-Regular.ttf
FrijoleThis image has an empty alt attribute; its file name is 65b178cc-frijole.pngFrijole-Regular.ttf
GloriaHallelujahThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngGloriaHallelujah-Regular.ttf
GraduateThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngGraduate-Regular.ttf
GrenzeGotischThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngGrenzeGotisch-Regular.ttf, GrenzeGotisch-Medium.ttf, GrenzeGotisch-Light.ttf, GrenzeGotisch-Bold.ttf, GrenzeGotisch-Black.ttf
GriffyThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngGriffy-Regular.ttf
JollyLodgerThis image has an empty alt attribute; its file name is 52a8c68a-jolly-lodger.pngJollyLodger-Regular.ttf
LancelotThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngLancelot-Regular.ttf
LilitaOneThis image has an empty alt attribute; its file name is ab3136b1-lilita-one.pngLilitaOne-Regular.ttf
LimelightThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngLimelight-Regular.ttf
LobsterTwoThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngLobsterTwo-Regular.ttf, LobsterTwo-Bold.ttf
LuckiestGuyThis image has an empty alt attribute; its file name is ed56a699-luckiest-guy.pngLuckiestGuy-Regular.ttf
MaidenOrangeThis image has an empty alt attribute; its file name is 01166fa2-maiden-orange.pngMaidenOrange-Regular.ttf
MerriweatherThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngMerriweather-Regular.ttf, Merriweather-Light.ttf, Merriweather-Bold.ttf, Merriweather-Black.ttf
MontserratThis image has an empty alt attribute; its file name is 61f0d21d-montserrat.pngMontserrat-Bold.ttf, Montserrat-BoldItalic.ttf, Montserrat-Light.ttf, Montserrat-LightItalic.ttf, Montserrat-Regular.ttf
MetamorphousThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngMetamorphous-Regular.ttf
MountainsofChristmasThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngMountainsofChristmas-Regular.ttf, MountainsofChristmas-Bold.ttf
NeuchaThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngNeucha-Regular.ttf
NotoSansThis image has an empty alt attribute; its file name is ba8416ad-noto-san.pngNotoSans-Regular.ttf
OrbitronThis image has an empty alt attribute; its file name is c0ad4f8b-orbitron.pngOrbitron-Black.ttf, Orbitron-Bold.ttf, Orbitron-Medium.ttf, Orbitron-Regular.ttf
OxygenThis image has an empty alt attribute; its file name is 3da27160-oxygen.pngOxygen-Regular.ttf
PirataOneThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngPirataOne-Regular.ttf
PressStart2PThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngPressStart2P-Regular.ttf
PTSansThis image has an empty alt attribute; its file name is 73f6d6f1-pt-sans.pngPTSans-Regular.ttf
RibeyeMarrowThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngRibeyeMarrow-Regular.ttf
RalewayThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngRaleway-Regular.ttf, Raleway-Medium.ttf, Raleway-Light.ttf, Raleway-Bold.ttf, Raleway-Black.ttf
RobotoMonoThis image has an empty alt attribute; its file name is 58f335fb-roboto-mono.pngRobotoMono-Regular.ttf
RockSaltThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngRockSalt-Regular.ttf
RyeThis image has an empty alt attribute; its file name is b119ef14-rye.pngRye-Regular.ttf
SancreekThis image has an empty alt attribute; its file name is 7ca4963e-sancreek.pngSancreek-Regular.ttf
SedgwickAveDisplayThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngSedgwickAveDisplay-Regular.ttf
SevillanaThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngSevillana-Regular.ttf
SpaceMonoThis image has an empty alt attribute; its file name is e727ac72-space-mono.pngSpaceMono-Regular.ttf
SpecialEliteThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngSpecialElite-Regular.ttf
SpicyRiceThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngSpicyRice-Regular.ttf
StaatlichesThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngStaatliches-Regular.ttf
TekoThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngTeko-Regular.ttf, Teko-Medium.ttf, Teko-Light.ttf, Teko-Bold.ttf
TurretRoadThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngTurretRoad-Regular.ttf, TurretRoad-Medium.ttf, TurretRoad-Light.ttf, TurretRoad-Bold.ttf
VT323This image has an empty alt attribute; its file name is 64f6434d-bevan.pngVT323-Regular.ttf
WalterTurncoatThis image has an empty alt attribute; its file name is 64f6434d-bevan.pngWalterTurncoat-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: