Riddle’s online quiz maker includes over 30 fonts for all plans, but if you want to fully match your site’s look and feel, add 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.
Using Google Fonts
This is the easiest option to use custom fonts with Riddle’s quiz builder.
Google Fonts offers 1291 fonts, with many free options that are similar to popular paid fonts. For example, ‘Arimo’ is a very close match to Microsoft’s ‘Arial’ font – but without the need to pay Microsoft’s expensive licensing fee.
To get started using Google Fonts in your online quiz:
- Go to ‘Customize’ when editing your quiz.
- Select ‘Custom’ from the font list
- Then ‘Google Fonts’ as your ‘Font provider’
- Just click in to ‘Families’ and search the dropdown list to find your font.
You can either:
- Set one Google Font for all your text – leave the word ‘inherit’ in all other input boxes.
- Use different Google Fonts for different text types – pick a different font for your headings, buttons, and quiz 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 fonts.com
Fonts.com offers a wide variety of paid webfonts. Unfortunately they do not have any free fonts for you to try out their service.
To use their fonts follow these steps, assuming that you have an account with fonts.com
- Create a new web font project from this URL: https://www.fonts.com/web-fonts/projects
- Name your project and open it
- First add fonts to the project either by purchasing them or by adding them from your purchased items
- Next set up domains for the font project. Please add the site where you will embed the Riddle as well as riddle.com to the domain list
- Publish your project by clicking on “Publishing Options” and choose the JS option.
You now need to grab the project ID from the Javascript code. The Project ID is the character string in that line of code before the .js suffix
Now add this to the custom font setting on Riddle and type the name of your font.
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:
<pre class="wp-block-code"><code>@font-face {
font-family:"MyCustomFontFamilyName";
src:url("MyCustomFontFile.woff") format("woff");
}</code></pre>- 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.
- IMPT: Most servers will prevent a font hosted on your servers to be accessed by a Riddle coming from riddle.com. Just email us or ask us on chat – 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
- If the same URL refers to multiple fonts, just separate them with a comma (no spaces) – for example, “DRPublik-Black,DRPublik-BlackItalic” for these two fonts.
- 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.
