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
Using Adobe Typekit is fairly similar. (Adobe Type Kit is awesome – and they now offer a free service to use one font, so worth checking out.)
- 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 riddle.com AND the domain where your quiz with this font will be used (meaning the site where you will embed your riddle).
- 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.
Here’s how:
- Select ‘custom’ from the main font menu
- Then choose ‘custom’ from font provider
- Make sure you have the CSS file set up on your server to define your custom font. The CSS will look something like this:
@font-face {
font-family:"MyCustomFontFamilyName";
src:url("MyCustomFontFile.woff") format("woff");
}
- Now add the URL to the CSS file where you are hosting your font and the font CSS . (Please note: all links must be https:// to function correctly.) or if your server does not allow cross site access, contact us via chat or hello@riddle.com so we can host your font on the Riddle.com servers for you. Most servers will prevent a font hosted on your servers to be accessed by a Riddle coming from riddle.com. We will happily upload your font file to our CDN and create the necessary font CSS for you.
- 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/fonts/MYFontFamilyName.css (if we host the font for you, we will provide you with this URL)
- URLs vary, but in this case, ‘MYFontFamilyName’ is the font family name, and ‘MYFont’ 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 hello@riddle.com.
We race each other to read and respond to every message – often in under five minutes.
