Customize your quiz with Google fonts

Custom CSS enables you to update the fonts on your quiz to match your site or the theme of your test. With FlexiQuiz CSS editor, you can apply one over one thousand fonts from the Google family to your quizzes.

Fonts are an essential part of styling your quiz. The font needs to be readable and can bring the test to life. A font can make your exam look professional, and lead generation quizzes look attractive, enabling you to create that wow factor.

FlexiQuiz allows you to change most of the text on your quiz pages, such as the questions, answer options, results page labels, and more. However, it’s currently impossible to change the font on navigation buttons or many test-taker messages.

Custom CSS is available for Enterprise customers.

In this guide, I’ll show you how to style your text using Google fonts.

How to add a Google font to your quiz

Stage one: Choose your new quiz font

  1. Pick your ideal font from over a thousand choices at fonts.google.com.
  2. Once you’ve found the font you like, press on the font box.Google fonts page showing how to pick font
  3. Choose the font style and press +Select this style.Arrow to select style button
  4. On the Use on the web section, select the radio button for @import
  5. Copy the text that is within the (style) tags.Note! You don’t need to copy the style and /style tags because we’re not linking with HTML.Arrow to import button and style text
  6. Copy the text for CSS rules to specific families. Important! Do not include the last semi-colon.CSS rules text example

Stage two: Add your new font to your quiz

  1. Return to flexiquiz.com, choose an existing quiz or create a new online test.
  2. Go to the Configure screen and select Theme from the left-hand menu.
  3. Scroll down the page to Custom CSS box
  4. Paste the @import text into the CSS box.Custom CSS box on FlexiQuiz site
  5. Add the following lines below your existing @import text in the FlexiQuiz CSS box
    .surveyEditorQuestion div {YOUR FONT TEXT HERE !important;}.scPage span, .scPage p {YOUR FONT TEXT HERE !important;}.scContentContainer label.col-sm-4 {YOUR FONT TEXT HERE !important;}
  6. Paste the CSS rules to specific families text (that you copied from Google fonts) in the highlighted space.

The image below shows how the final text should look in your CSS box. This text in blue depends on your chosen font – this is the information that is copied and pasted from Google fonts.

Example of CSS code to change your quiz fonts

The new font is automatically applied to the text on your quiz.

To view the test press preview on the top right.

Top tip! You can also change the color and size of the fonts from the Theme screen.

Relevant help guides:

How to add a background image to your quiz.

Adding background colors to your quiz.

Upgrading to Enterprise.

Blog: Seven ways to style your quiz.

Back