Classic Quiz Widget - Advanced Typography Customization

Advanced Typography Customization Through Theme Options

The Custom Font Family theme option provides control over the typography in your Classic Quiz widget across all templates (Standard, Split, and Overlay). Unlike Color Schemes which vary by template and require dedicated articles for each template type, Custom Font Family works largely the same across all three templates. This is why this guide covers all template types in a single article.

Custom Font Family also supports both light and dark modes, each with their own primary and secondary font settings.

📖 Article Structure

This guide is organized into several sections to help you understand and configure Custom Font Family effectively:

⚙️ How Do I Access and Configure Custom Font Family Settings? - Step-by-step instructions for accessing Custom Font Family in our Storybook
📖 What Text Elements do the Custom Font Family Settings Control? - Overview of primary and secondary font settings
Font Settings Across Templates - Detailed explanations with visual examples for Standard, Split, and Overlay templates

⚙️ How Do I Access and Configure Custom Font Family Settings?

Currently, Custom Font Family settings can be configured through our Storybook interface. In the future, these settings will be available directly in the Management Portal, and this guide will be updated to reflect that change.

Steps to Access Custom Font Family in Our Storybook:

Open Storybook - Navigate to our Widgets Storybook
Select ClassicQuizPlay - In the left sidebar under "COMPONENTS", click on "ClassicQuizPlay"
Choose a Quiz Story - From the list of quiz stories, select either:
- "🔧 Client Classic Quiz (Live Data)" - If you want to test with real, live data from your quiz
- Any other hardcoded story - If you want to experiment and play around with the settings using pre-defined quiz data (no API credentials needed - just jump in and start customizing!)
View the Controls Panel - At the bottom of the screen, you'll see the "Controls" tab with various options
Expand themeOptions - Find and click on "themeOptions" to expand the advanced theme options
Open customFontFamily - Click on "customFontFamily" to expand it, then open either "light" or "dark" depending on which mode you want to customize
Configure Font Settings - You'll see two options: "primary" and "secondary". Enter your desired font family names
Preview Changes Live - Your font changes appear instantly in the quiz preview above

💡 New to Storybook stories? Learn more about the Classic Quiz Storybook stories and how to use them in our Introduction to Classic Quiz Storybook guide.

📖 What Text Elements do the Custom Font Family Settings Control?

Custom Font Family uses a simple, structured system organized under customFontFamily for light and dark modes. Within each mode (light/dark), there are two font settings:

primary - Controls the font of key text elements throughout the quiz
secondary - Controls the font of secondary text elements and labels

Important: Unlike Color Schemes which have template-specific behaviors, the primary and secondary font settings work largely the same and control the same UI elements across all three templates (Standard, Split, and Overlay). This makes it easy to maintain consistent typography regardless of which template you're using.

Font Settings Across Templates

Standard Template - Detailed Breakdown

The following section explains what text elements each font setting controls in the Standard template. These same elements are controlled by the primary and secondary fonts across all templates.

𓂃🖊 primary: What Does It Control? How Do I Set It?

(Default font: "Ubuntu, sans-serif")

How to set it: Enter your desired font family name in the primary field.

The primary font controls the font of key text elements throughout the quiz.

On the Quiz Screen:

Quiz title - The main title of your quiz (e.g., "Bulgarian Football Legends: How Well Do You Know Dimitar Berbatov?")
Question text - The question text displayed to users (e.g., "When was Dimitar Berbatov born?")
Answer options text - The text displayed in answer options (e.g., "30 January 1981")
Next Question button text - The text displayed on the primary call-to-action button

1) Quiz screen with default primary font (Ubuntu, sans-serif) and 2) Quiz screen testing with custom primary font (Edwardian Script ITC, cursive) to demonstrate which UI elements are controlled by the primary font setting

On the Results Screen:

Results and Answers tab labels - The "RESULTS" and "ANSWERS" text labels
Dynamic message text - The personalized message based on user performance (e.g., "Amazing! You answered all questions correctly!")
Thank you message - The "Thank you for participating!" text
Final Result text - the '4/5' , '5/5' final result text
Play Again button text - The text displayed on the "Play Again" button
Share Result button text - The text displayed on the "Share Result" button

On the Answers Screen:

Question text - The question text displayed in the answers tab (e.g., "When was Dimitar Berbatov born?")
Results and Answers tab labels - The "RESULTS" and "ANSWERS" text labels

𓂃🖊 secondary: What Does It Control? How Do I Set It?

(Default font: "Roboto, sans-serif")

How to set it: Enter your desired font family name in the secondary field. This is typically set to a complementary font that works well with your primary font choice.

The secondary font controls secondary text elements and labels throughout the quiz.

On the Quiz Screen:

Quiz label - The small "QUIZ" label text displayed at the top of the quiz

On the Answers Screen:

Question number labels - The "QUESTION 1", "QUESTION 2", "QUESTION 3" labels
Your answer text - The "Your answer:" label for both correct and incorrect answers
Explanation text - The question explanation text (e.g., "Dimitar Ivanov Berbatov was born on 30 January 1981 in Blagoevgrad to Ivan Berbatov and Margarita Berbatova.")

Split Template - Detailed Breakdown

The Split template divides your content into distinct left and right panels, with the image positioned on the left and quiz content on the right. The primary and secondary font settings control exactly the same UI text elements as in the Standard template.

Key differences: In the Split template:

The "QUIZ" label (controlled by secondary font) appears in the top-left of the left image panel, whereas in Standard it appears at the top of the quiz card
The quiz title (controlled by primary font) also appears in the left image panel, whereas in Standard it appears at the top of the quiz card

Note: For the Split template examples below, we'll show screenshots using custom test fonts to clearly demonstrate which UI elements are affected:

Primary font: "Edwardian Script ITC, cursive"
Secondary font: "Brush Script MT, cursive"

𓂃🖊 Split Template Examples: Primary Font

Quiz screen showing primary-controlled elements - quiz title in the left quiz panel + question counter, text, answer options, and Next Question button text in the Right quiz panel

Results screen showing primary-controlled elements - quiz title, tab labels, dynamic results message and score, thank you text, and action buttons text

Answers screen showing primary elements in "Edwardian Script ITC, cursive" (tab labels, question text)

𓂃🖊 Split Template Examples: Secondary Font

Split template quiz screen showing secondary-controlled text elements in "Brush Script MT, cursive" - the QUIZ label in the top-left of the left image panel

Split template answers screen showing secondary-controlled elements in "Brush Script MT, cursive" - question number labels (QUESTION 1, QUESTION 2, QUESTION 3), "Your answer" labels, and answers explanation text

Overlay Template - Detailed Breakdown

The Overlay template presents quiz content in an overlay format. The primary and secondary font settings control exactly the same UI elements as in the Standard and Split templates.

Note: For the Overlay template examples below, we'll show screenshots using custom test fonts to clearly demonstrate which UI elements are affected:

Primary font: "Edwardian Script ITC, cursive"
Secondary font: "Brush Script MT, cursive"

𓂃🖊 Overlay Template Examples: Primary Font

Overlay template quiz screen showing primary-controlled elements in "Edwardian Script ITC, cursive" - quiz title, question counter & text, answer options, and 'Next Question' button text

Overlay template results screen showing primary-controlled elements in "Edwardian Script ITC, cursive" - tab labels, dynamic message text "Great job! You achieved:", thank you text "Thank you for participating!", final result (4/5), 'Play Again' button text and 'Share Result' button text

Overlay template answers screen showing primary-controlled elements in "Edwardian Script ITC, cursive" - tab labels and question text for all questions (e.g., "When was Dimitar Berbatov born?")

𓂃🖊 Overlay Template Examples: Secondary Font

Overlay template quiz screen showing secondary-controlled elements in "Brush Script MT, cursive" - the QUIZ label at the top-left

Overlay template answers screen showing secondary-controlled elements in "Brush Script MT, cursive" - question number labels (QUESTION 1, QUESTION 2, QUESTION 3), "Your answer" labels, "Correct answer" labels, and answers explanation text

Further Reading

𓂃🖊 Theme Options Documentation

Classic Quiz Widget - Advanced Customization with Theme Options - Complete guide to all available theme options and customization features

📚 Widget FAQs

📚 Main Widget Documentation