Change the font

The font is one of the strongest brand signals in a Riddle. Pick one of the 35 hand-selected fonts, use a Google Font or an Adobe Font / Typekit project, or upload your own font file, so an embedded Riddle reads like a native part of your website. Fonts are set on the palette and apply to every Riddle that uses that palette.

The 35 pre-selected fonts are available on all plans. Google Fonts, Adobe Fonts / Typekit and uploading your own font are available on Business and Enterprise plans.

Use cases:

• Your corporate font in every Riddle: upload your .woff2 file once and every Riddle on that palette uses it.
• A Google Font that matches your website: pick the same family your site already uses, no upload needed.
• Adobe Fonts for licensed typefaces: connect your Adobe Fonts web project with its project ID.
• Different fonts for headings and buttons: use the font overrides for Body, Button, Choice and Header.

Use a pre-selected font

1. Go to the Design section.
2. Click on the three dots next to the palette you want to use and click on CUSTOMIZE or COPY AND EDIT PALETTE.
   Riddle palettes such as Timeless are defaults and you can therefore only copy and edit these palettes.
3. Select the font you want from the dropdown menu.
4. In the pop-up window that appears, tick the Yes, I understand box and click on UPDATE MY PALETTES to confirm that all Riddles using this palette will be updated too.
5. You will see the font applied directly to your Riddle on the screen.

Use an Adobe Font / Typekit

1. Create an Adobe Fonts web project.
2. In Riddle, go to the Design section.
3. Click on the three dots next to the palette you want to use and click on CUSTOMIZE or COPY AND EDIT PALETTE.
   Riddle palettes such as Timeless are defaults and you can therefore only copy and edit these palettes.
4. Click on the arrow on the right of the current font (Inter is the default) and select Use your own font.
5. Go to Font Provider and select Adobe Fonts / Typekit.
6. Go to Project ID and paste the Adobe Fonts project ID in the Write something field. It will look something like 'vxgJFgt'.
7. Go to the Font overrides and enter different fonts in the Write something fields for Body, Button, Choice, and Header (if you want).
8. Click on SAVE PALETTE button.
9. In the pop-up window that appears, tick the Yes, I understand box and click on UPDATE MY PALETTES to confirm that all Riddles using this palette will be updated too.
10. You will see the font applied directly to your Riddle on the screen.

Use a Google Font

1. Go to the Design section.
2. Click on the three dots next to the palette you want to use and click on CUSTOMIZE or COPY AND EDIT PALETTE.
   Riddle Style is the default and you can therefore only copy and edit this palette.
3. Click on the arrow on the right of the current font (Arimo is the default) and select Use your own font.
4. Go to Font Provider and select Google Fonts from the dropdown menu.
5. Go to Font family name and select a name from the dropdown menu.
6. Enter different fonts in the Write something fields for Body, Button, Choice, and Header (if you want). The word inherit indicates that it should be the font from above.
7. Click on SAVE PALETTE.
8. In the pop-up window that appears, tick the Yes, I understand box and click on UPDATE MY PALETTES to confirm that all Riddles using this palette will be updated too.
9. You will see the font applied directly to your Riddle on the screen.

Use your own font

1. Ensure your font file is in .woff2 format.
2. Ask Riddle to serve your font (highly recommended) to prevent some browsers raising errors about cross-origin resources.
   OR
   Have the URL where your .woff2 font file is stored on your server ready.
3. In Riddle, go to the Design section.
4. Click on the three dots next to the palette you want to use and click on CUSTOMIZE or COPY AND EDIT PALETTE.
   Riddle Style is the default and you can therefore only copy and edit this palette.
5. Click on the arrow on the right of the current font (Arimo is the default) and select Use your own font.
6. Go to Font Provider and select Use your own font.
7. Go to Font family name and enter the font family name in the Write something field.
8. Go to URL for hosted font and enter the URL that hosts the font in the Write something field.
9. Go to the Font overrides and enter different fonts in the Write something fields for Body, Button, Choice, and Header (if you want).
10. Click on the blue SAVE PALETTE button.
11. In the pop-up window that appears, tick the Yes, I understand box and click on UPDATE MY PALETTES to confirm that all Riddles using this palette will be updated too.
12. You will see the font applied directly to your Riddle on the screen.

Next steps

• Customize the design – colors, buttons and backgrounds on the palette.
• CSS editor – font sizes, weights and spacing that the palette does not expose.
• White label your Riddle – your own colors, fonts, logo and CSS for a native look.