How can I customize my quiz fonts?

At Riddle, we believe it should be easy to customize your quiz fonts so any interactive content you make blends seamlessly into your site’s look and feel.

That’s why we give you lots of options to find the perfect quiz fonts – including Google Fonts, Adobe TypeKit (now called Adobe Fonts), and more.

Riddle 2.0: changing your quiz font

Our latest version of our online quiz maker makes it easier than ever to customize your quiz fonts.

You can choose from our 35 hand-selected fonts (all plans) or add your own (Business/Enterprise) using:

1. Google Fonts
2. Adobe Fonts / Typekit
3. Upload your own

Let’s get started.

Riddle 2.0: Using our pre-selected fonts in your quiz

You’ll need to go the design step when creating or editing a riddle then:

• Click on the ‘Palette’ tab.
• Create or customize a palette.
• Click on ‘Font’ and choose one of our 35 fonts.

Riddle 2.0: Using your own font in your quiz

If you’ve decided to use your own font, here are our handy options:

• Adobe Fonts / Typekit
• Google Fonts
• Use your own (or have Riddle host your font file)

Using your Adobe Fonts or Typekit font with Riddle

Adobe Fonts is a fantastic resource for any web designer featuring thousands of fonts.

Best of all?

It’s free as part with their Creative Cloud plans – including software for Photoshop, Illustrator, and other iconic software.

They’ve also made it easy for non-techies to use.

Assuming you have a paid subscription to Adobe and have added some fonts to a web project in Adobe Fonts, here’s how you do it:

1. Edit your riddle, then customize a palette in the design step.
2. Under ‘Font’, choose ‘Use your own font’.
3. For ‘Font provider’, select ‘Adobe Font/Typekit’.
4. Paste your Adobe Fonts project ID into ‘Project ID’.
   • It will look something like ‘vxgJFgt’.
5. Add font-family names into ‘Body’, ‘Button’, and the other fields.
   • In our example, we used ‘marging-mvb, sans-serif’ and ‘highgate, sans-serif’.

Your riddle quiz preview will automatically update. You’ll quickly see the change from your uploaded fonts – so you can edit or tweak further.

Video: How to use your Adobe Fonts or Typekit font in your Riddle quiz

Sometimes, it’s better to just show with a quick help video.

Here’s our video explainer walks you through the whole process, from creating a web project to adding your Typekit font to any of your riddles:

Upload your own .woff2 font file (or have Riddle host it)

Do you have a proprietary font file or one that is not on the big font marketplaces?

You can use that with Riddle directly.

You’ll need:

• The font file in .woff2 format
• The URL where your .woff2 font file is stored on your server
• Or (highly recommended), let Riddle serve your font.
  • Just ask us on support chat for help.

Either way, once you have a URL for your font:

• Edit your riddle, then customize a palette in the design step.
• Choose ‘Use your own font’ for ‘Font’.
• Then pick ‘ *Use your own font* ‘ for ‘Font provider’.
• Add the font family name & the URL for your font
• You can also specify different fonts for body, button, choices, & header.

We recommend having your .woff2 font served from Riddle. This prevent some browsers from raising errors about cross-origin resources.

It makes things much simpler having both your quiz created and font stored on Riddle then embedded on your site.

That can make some browsers scratch their (metaphoric) heads sometimes – causing security warnings.

Riddle 1.0: customize your quiz fonts

If you’re still creating or editing quizzes with our original quiz builder, you can upload your fonts as well.

We’ve included the steps and a walkthrough video below.

Choose from 35 quiz fonts (all plans)

• Create or edit your quiz
• Click on the ‘Customize’ step
• In the ‘Style’ tab, select the ‘Font’ option – and choose any of our 35 fonts for your quiz.

Are you concerned about data privacy – such as the EU’s GDPR?

So are we.

We use Google’s fonts – but self-host them on our servers. That means your quizzes won’t include any tracker from Google (learn more about our GDPR-compliant online quiz maker).

Custom quiz fonts (Business/Enterprise plans):

Want to use your own quiz fonts? As part of our Team plan, you can use any font – to perfectly match your site’s styling.

Choose from Adobe TypeKit, Google Fonts, or your own private font. Click here to read our blog post about custom fonts.

We just updated our Google Font feature as well – you used to have to go to Google Fonts and find the right name for your font.

Now, it’s much easier – just click Google Fonts under the ‘Font provider’ options, then click ‘Families’ to choose your font from the dropdown list. Easy-peasy.

Video overview: choosing quiz fonts with Riddle 1.0

Want a quick video rundown about all the options about quiz fonts with our online quiz creator?

Our co-founder Mike whipped up this quick walkthrough of Riddle 1.0 to help out:

*********************

Video transcript

(We try to always add transcripts of our help videos. They help the members of our quiz maker community who might be using screen readers or text-to-speech devices. After all, we designed Riddle as an accessible online quiz creator – it’s only fair that our blog is accessible as well.)

Hi there, my name is Mike and I’m one of the co-founders here at Riddle.

In this quick help video, I’m going to show you how you can customize your online quiz fonts with Riddle’s quiz maker. It’s super easy. What you want to do is once you have created your online quiz, personality test or poll, you’ll go to the customize step.

Now, there are two ways to do it. One way is to use our selection of, I think, 30 or so standard fonts. They work for most users and this will work for our Basic or Pro quiz maker plans.

However, if you just need that extra bit of customization, you can also select our custom quiz fonts option. And in that case, we give you loads of choices.

You can use Adobe Typekit, Google Fonts, Fontdeck, Fonts.com, and you can also just upload your own font. In this case, you could send the WOFF2 font to us. Just let us know on support and we’ll just upload it to our server and then give you a custom URL.

The best part about this method? Your font will live on Riddle’s servers and being served in Riddle’s quizzes. A lot of browsers like that a bit better for security reasons.

However, the Adobe Typekit and the other options work really well as well. You just link to the various quiz fonts.

You can see here we have lots of different options, and in this blog post, you can find out really specific details on how to do that.

OK? Any questions on how to change your fonts?

Please let us know. You can use our support chat down here.

(And if you’ve heard any of these help videos that I’ve done, you’ll know that I’m going to say this.)

We are super fast to respond. And we everyone from our CEO Boris on down, we all race each other to respond. And that means you’ll get an answer in under two minutes.

All right. That’s quiz fonts with Riddle. Any questions? Just let us know. Thanks so much!