Playable gives you access to all Google fonts via the Google Fonts API. If you do not want to use fonts hosted by Google, you can download the font and upload it as a custom font. Get more information in the section on uploading a custom font.

Instead of editing your text in the frontend editor, you can set up font styles in the backend. This can save time in the long run as you only have to edit the text in one place to affect the entire campaign.

Font styles can be set up on individual campaigns under Layout > Font Styles or under global layout under Account Settings > Appearance.

Under font styles, you can define different text elements:

Remember to create mobile versions of your font styles by toggling between desktop and mobile settings.

If nothing is selected, this will use your default font from the Layout tab

Leave this blank for a default line height (which is 120% of the font size in pixels). You can enter your own line height in pixels here.

This is the thickness of the text.

As a general rule, a weight of 300 is ‘light’, 400 is 'regular' and 700 is ‘bold’.

You can apply the following styles:

The default font styles for desktop and mobile can be seen below (click to enlarge). You can override these defaults to match your brand guidelines.

In games such as Quiz and Personality Test, the question text is H3 by default and the answer text is H4 by default.

For this reason, you may need to set smaller sizes for these elements than you usually would. Use the sizes below as a starting point, if you are not sure where to begin.

If you want to use your own font, you can upload it as a custom font under Account Settings > Appearance > Custom font

Click "upload custom font" to add your font files in TTF, WOFF, WOFF2, or SVG format. If you don't have your font file in the correct format, you can use Transfonter to convert it: https://transfonter.org/

You will upload all font styles and weights at the same time.

When you're done, you will be able to see that your font has uploaded correctly by clicking Modify next to the font. Here you can find the font face code, which lets you see what weights and styles are supported.

When using your custom font on your campaign, if you experience issues with the way it is displaying, it is often an issue with the font face code. Try deleting your custom font and re-uploading it.

Once you have added a custom font, you will be able to select it from the font-type drop-down when building your campaigns or adjusting your global layout settings.