Want to create a quiz, list, or poll that’s a perfect match to your site? You can now use our custom fonts feature as part of our Enterprise plan, to use any font from Google, Adobe Typekit, Fonts.com and Fontdeck.
Now you use your site’s fonts in your Riddles – for a seamless user experience.
Custom fonts: Google Fonts and Adobe Typekit:
- On the customize screen of your Riddle, go to the Font Dropdown and select “Custom”.
- This will open a new selection menu where you can choose your font provider.
Custom fonts: via Google Fonts
To quickly check out this new tool, it is easiest to start with 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.
Custom fonts: via Adobe TypeKit
- To use Typekit, go TypeKit.com – and pick a font and click ‘Add to kit’
- Then select the font variant you want to use – and click ‘Create a kit’
- Name your kit (ie. Mike’s site) and add the domain where your quiz with this font will be used.
- Click ‘continue’ – then ‘Publish’
- Close this window and go to the browser tab with TypeKit open.
- Click on ‘View all kits’
- Click on ‘Using fonts in CSS’
- Right – almost there, now you just need to get that Kit ID and font name from your Typekit.
- Paste the Typekit ID in that field in Riddle, then paste the font name in each of the ‘Font override’ fields – and you’re all set. 🙂
Custom fonts: via your hosted font
Have you own custom font? You can easily link to it – so any time you create a quiz, it will display in your font.
- Select ‘custom’ from the main font menu
- Then choose ‘custom’ from font provider
- You can add the URL where you are hosting your font. (Please note: all links must be https:// to function correctly.)
- Fonts should be saved as .woff (not .ttf and .eot)
- Type the font family name in the ‘families’ section
- Add the font name in the ‘font override’ section
- If you’re not sure, here’s a sample URL: https://www.yoururl/sites/all/themes/fonts/dinnext/DINNextW01Medium.woff
- URLs vary, but in this case, ‘dinnext’ is the font family name, and ‘DINNextW01Medium’ is the font name.
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 firstname.lastname@example.org.
We race each other to read and respond to every message – often in under five minutes.