Want your Riddle quiz, list, or poll to be a perfect match to your site?

As part of our Enterprise plan, Riddle now offers support for unlimited Google Fonts and Adobe Typekit Fonts, as well as Fonts.com and Fontdeck.

Now you can have your Riddles use the same font as your site – for a seamless user experience.

How to use the custom font option with Google Fonts and Adobe Typekit:

Riddle_with_Google_Fonts

  1. On the customize screen of your Riddle, go to the Font Dropdown and select “Custom”.
  2. This will open a new selection menu where you can choose your font provider.

Google Fonts

To quickly check out this new tool, it is easiest to start with Google Fonts.

Baloo Paaji - Google Fonts

  • Go to https://fonts.google.com/ and pick a font you love
  • To test the integration works for you, we recommend you pick one that is clearly distinguishable from your normal fonts (like our Baloo Paaji).
  • Once you found a font, click on the “Select this font” button.
  • At the bottom of your screen, a black bar will appear saying “1 Family Selected”.
  • Click on that bar to enlarge it.
  • In that window you will see a section called “Specify in CSS”. Copy the font family name from that box (in this case: Baloo Paaji) and paste that into the Riddle Font dialog box into the Families input box and also into the Body (all text) input box.
  • You can either use that font for all your text and leave the word “inherit” in the other input boxes or you can choose a custom font for headings, buttons and answers.

Adobe Typekit

Using Adobe Typekit is fairly similar. (Adobe Type Kit is awesome, but it’s a paid service, so you can only use this if you are a Typekit customer.)Adobe_Type_Kit_CSSname

  • To use Typekit, you need to create a kit and copy the kit ID from your Typekit.
  • Paste the Typekit ID in that field in Riddle.
  • Now you can assign a font from your kit to the various text sections.
  • Helpful hint – you’ll need to make sure you are using the correct family name.
  • You can get that name by editing your Typekit and clicking on the “Using fonts in CSS” text link.
  • This will bring up a window showing you the CSS Family name for that specific font. (In our example screenshot it’s ‘adobe-caslon-pro’.)
  • Paste that family name in each of the fields in the grey font customization box.
  • Note: ┬ámake sure your Typekit is published before you try this.

We’re big font geeks so if you need further help with Typekit, Google Fonts or any other Riddle-related question, please drop us a line at hello@riddle.com.

We read and respond to every message – often in under five minutes.