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-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:

FONTNAMEFONTFILE
This image has an empty alt attribute; its file name is 55cda967-asset.pngAsset-Regular.ttf
This image has an empty alt attribute; its file name is ddfe4ce5-bangers.pngBangers-Regular.ttf, Bangers.ttf
This image has an empty alt attribute; its file name is 83ac5b92-barlow.pngBarlow-Black.ttf, Barlow-BlackItalic.ttf, Barlow-Medium.ttf, BarlowCondensed-Regular.ttf
This image has an empty alt attribute; its file name is 64f6434d-bevan.pngBevan-Regular.ttf
This image has an empty alt attribute; its file name is 65b178cc-frijole.pngFrijole-Regular.ttf
This image has an empty alt attribute; its file name is 52a8c68a-jolly-lodger.pngJollyLodger-Regular.ttf
This image has an empty alt attribute; its file name is ab3136b1-lilita-one.pngLilitaOne-Regular.ttf
This image has an empty alt attribute; its file name is ed56a699-luckiest-guy.pngLuckiestGuy-Regular.ttf
This image has an empty alt attribute; its file name is 01166fa2-maiden-orange.pngMaidenOrange-Regular.ttf
This 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
This image has an empty alt attribute; its file name is ba8416ad-noto-san.pngNotoSans-Regular.ttf
This image has an empty alt attribute; its file name is c0ad4f8b-orbitron.pngOrbitron-Black.ttf, Orbitron-Bold.ttf, Orbitron-Medium.ttf, Orbitron-Regular.ttf
This image has an empty alt attribute; its file name is 3da27160-oxygen.pngOxygen-Regular.ttf
This image has an empty alt attribute; its file name is 73f6d6f1-pt-sans.pngPTSans-Regular.ttf
This image has an empty alt attribute; its file name is 58f335fb-roboto-mono.pngRobotoMono-Regular.ttf
This image has an empty alt attribute; its file name is b119ef14-rye.pngRye-Regular.ttf
This image has an empty alt attribute; its file name is 7ca4963e-sancreek.pngSancreek-Regular.ttf
This image has an empty alt attribute; its file name is e727ac72-space-mono.pngSpaceMono-Regular.ttf