Using custom fonts in narrat

You probably want to use custom fonts in your games. This is easy to do in Narrat, because Narrat uses web technology and can be customised with CSS.

For custom fonts, you will need to load a web font (see below). For basic built-in fonts, you can use the default fonts available in CSS.

TIP

Narrat now has a font sets feature which lets players choose their preferred font in the system menu. If you just want to use custom fonts in a simple way that lets players pick between multiple fonts, it's probably better to start here.

For more advanced usage and adding more granular custom fonts, read on.

How to use a font in CSS

Generally, in CSS, to use a font you simply need to specify its name in a CSS class (in src/css/main.css):

body {
  font-family: 'My-Font';
}

WARNING

You can't just use any font you have on your PC though, you need to install web fonts in your game to use specific custom fonts. See below

About web fonts

The first thing you should know is that websites use web fonts, which are not exactly the same thing as normal fonts. On your PC, you can install fonts, but on the web, fonts need to work on every computer, so they are loaded from the internet.

So, to use a custom font in your narrat game, you need to make it load a web font.

TIP

There are a few default fonts considered safe to use on every website.

How to install a web font in a narrat game

Because a narrat game is simply a web page, you can install a web font the same way you would on any website. This generally involves copy-pasting a bit of html and CSS in your website to make sure the font is loaded and available for use.

In our case, here's how to do it. Imagine you have a font file ready to use. You simply need to add a @font-face directive in your CSS.

For this example, I will use the Agdasima font from Google Fonts.

Find a web font and add the files to your game

Place the font you want to use somewhere in the public directory so it's accessible. In our case, it will be in the public/fonts/Agdasima folder.

Load the font in your CSS

In your src/css/main.css file, add the following @font-face directive for each variant of your font (in my case, one regular and one bold one)

/* Regular font */
@font-face {
  font-family: 'Agdasima';
  font-style: normal;
  font-weight: normal;
  src: url('./fonts/Agdasima/Agdasima-Regular.ttf') format('woff2');
}
/* Bold font */
@font-face {
  font-family: 'Agdasima';
  font-style: normal;
  font-weight: bold;
  src: url('./fonts/Agdasima/Agdasima-Bold.ttf') format('woff2');
}

Actually use the font in parts of your game

If you want to override the default font (used pretty much everywhere), you can change the --font-family css variable which narrat uses.

#narrat-app {
  /* Customise CSS variables here. They will override the existing narrat ones. You can also add your own variables */
  --bg-color: #131720;
  --text-color: #d9e1f2;
  --primary: hsl(255, 30%, 55%);
  --focus: hsl(210, 90%, 50%);
  --secondary: #42b983;
  --font-family: 'Agdasima', sans-serif; // [!code ++]
}

If you want to use the font in one specific place, you can use it like any other font in CSS. For example, applying it to the .title css class will change the font of most titles and modal headers.

.title {
  font-family: 'Agdasima';
}

Finding fonts to use

There is a great video guide on how to find fonts for your game, as well as licensing considerations: