{"id":732,"date":"2022-12-07T10:41:24","date_gmt":"2022-12-07T10:41:24","guid":{"rendered":"https:\/\/quiz.seeksolution.in\/help\/?p=732"},"modified":"2022-12-07T10:51:26","modified_gmt":"2022-12-07T10:51:26","slug":"customize-your-quiz-with-google-fonts","status":"publish","type":"post","link":"https:\/\/quiz.seeksolution.in\/help\/?p=732","title":{"rendered":"Customize your quiz with Google fonts"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"732\" class=\"elementor elementor-732\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1d709ae4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1d709ae4\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1e9591b7\" data-id=\"1e9591b7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6bb3193 elementor-widget elementor-widget-heading\" data-id=\"6bb3193\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.11.5 - 14-03-2023 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\"><h1 style=\"margin: 20px 0px 10px; font-size: 36px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; line-height: 1.1; color: rgb(51, 51, 51); white-space: normal;\">Customize your quiz with Google fonts<\/h1><\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1d671baf elementor-widget elementor-widget-text-editor\" data-id=\"1d671baf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.11.5 - 14-03-2023 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#818a91;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#818a91;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<!-- wp:paragraph -->\n<p>Custom CSS enables you to update the fonts on your quiz to match your site or the theme of your test. With&nbsp;<a href=\"https:\/\/www.flexiquiz.com\/\">FlexiQuiz CSS editor<\/a>, you can apply one over one thousand fonts from the Google family to your quizzes.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>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&nbsp;<strong>wow<\/strong>&nbsp;factor.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>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&#8217;s currently impossible to change the font on navigation buttons or many test-taker messages.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Custom CSS is available for Enterprise customers.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In this guide, I&#8217;ll show you how to style your text using Google fonts.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>How to add a Google font to your quiz<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Stage one: Choose your new quiz font<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><!-- wp:list-item -->\n<li>Pick your ideal font from over a thousand choices at&nbsp;<a href=\"https:\/\/fonts.google.com\/\">fonts.google.com<\/a>.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Once you&#8217;ve found the font you like, press on the font box.<img decoding=\"async\" src=\"https:\/\/www.flexiquiz.com\/Uploads\/Guides\/1a4a819b-8640-4446-96a3-3f273cbf322c_8f1525ac-1f6a-480f-bef9-3b6cf190d37c\" alt=\"Google fonts page showing how to pick font\"><\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Choose the font style and press&nbsp;<strong>+Select this style.<\/strong><img decoding=\"async\" src=\"https:\/\/www.flexiquiz.com\/Uploads\/Guides\/1a4a819b-8640-4446-96a3-3f273cbf322c_f11068e7-14c3-4230-972f-beab618c14e5\" alt=\"Arrow to select style button\"><\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>On the&nbsp;<strong>Use on the web<\/strong>&nbsp;section, select the radio button for&nbsp;<strong>@import<\/strong><\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Copy the text that is within the&nbsp;<strong>(style)<\/strong>&nbsp;tags.<strong>Note!<\/strong>&nbsp;You don&#8217;t need to copy the style and \/style tags because we&#8217;re not linking with HTML.<img decoding=\"async\" src=\"https:\/\/www.flexiquiz.com\/Uploads\/Guides\/1a4a819b-8640-4446-96a3-3f273cbf322c_ed048a76-62fc-4ac8-bf97-e4e6b83c8224\" alt=\"Arrow to import button and style text\"><\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Copy the text for CSS rules to specific families.&nbsp;<strong>Important!<\/strong>&nbsp;Do not include the last semi-colon.<img decoding=\"async\" src=\"https:\/\/www.flexiquiz.com\/Uploads\/Guides\/1a4a819b-8640-4446-96a3-3f273cbf322c_cdd9469f-abd0-41a4-b700-b8eb496175fe\" alt=\"CSS rules text example\"><\/li>\n<!-- \/wp:list-item --><\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Stage two: Add your new font to your quiz<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><!-- wp:list-item -->\n<li>Return to flexiquiz.com, choose an existing quiz or create a new online test.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Go to the&nbsp;<strong>Configure<\/strong>&nbsp;screen and select&nbsp;<strong>Theme<\/strong>&nbsp;from the left-hand menu.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Scroll down the page to&nbsp;<strong>Custom CSS box<\/strong><\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Paste the @import text into the CSS box.<img decoding=\"async\" src=\"https:\/\/www.flexiquiz.com\/Uploads\/Guides\/1a4a819b-8640-4446-96a3-3f273cbf322c_921bde22-e39d-4c5b-88b9-8cbbc4be05a6\" alt=\"Custom CSS box on FlexiQuiz site\"><\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Add the following lines below your existing @import text in the FlexiQuiz&nbsp;<strong>CSS box<\/strong><br>.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;}<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Paste the CSS rules to specific families text (that you copied from Google fonts) in the highlighted space.<\/li>\n<!-- \/wp:list-item --><\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>The image below shows how the final text should look in your CSS box. This text in blue depends on your chosen font &#8211; this is the information that is copied and pasted from Google fonts.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image -->\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.flexiquiz.com\/Uploads\/Guides\/1a4a819b-8640-4446-96a3-3f273cbf322c_e11308fc-3d85-4f51-99f7-9c095f28063c\" alt=\"Example of CSS code to change your quiz fonts\"\/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>The new font is automatically applied to the text on your quiz.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>To view the test press&nbsp;<strong>preview<\/strong>&nbsp;on the top right.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Top tip!<\/strong>&nbsp;You can also change the color and size of the fonts from the&nbsp;<strong>Theme<\/strong>&nbsp;screen.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Relevant help guides:<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https:\/\/www.flexiquiz.com\/Help\/configure\/adding-a-background-image\">How to add a background image to your quiz.<\/a><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https:\/\/www.flexiquiz.com\/Help\/configure\/add-background-colors-to-your-quizzes\">Adding background colors to your quiz.<\/a><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a href=\"https:\/\/www.flexiquiz.com\/Home\/Plans\">Upgrading to Enterprise.<\/a><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Blog:<\/strong>&nbsp;<a href=\"https:\/\/www.flexiquiz.com\/blog\/create-a-beautiful-quiz\">Seven ways to style your quiz.<\/a><\/p>\n<!-- \/wp:paragraph -->\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5427d06 elementor-widget elementor-widget-button\" data-id=\"5427d06\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a href=\"https:\/\/quiz.seeksolution.in\/help\/\" class=\"elementor-button-link elementor-button elementor-size-sm\" role=\"button\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Back<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>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&nbsp;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_canvas","format":"standard","meta":{"om_disable_all_campaigns":false,"_mi_skip_tracking":false},"categories":[1],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/quiz.seeksolution.in\/help\/index.php?rest_route=\/wp\/v2\/posts\/732"}],"collection":[{"href":"https:\/\/quiz.seeksolution.in\/help\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quiz.seeksolution.in\/help\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quiz.seeksolution.in\/help\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/quiz.seeksolution.in\/help\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=732"}],"version-history":[{"count":4,"href":"https:\/\/quiz.seeksolution.in\/help\/index.php?rest_route=\/wp\/v2\/posts\/732\/revisions"}],"predecessor-version":[{"id":737,"href":"https:\/\/quiz.seeksolution.in\/help\/index.php?rest_route=\/wp\/v2\/posts\/732\/revisions\/737"}],"wp:attachment":[{"href":"https:\/\/quiz.seeksolution.in\/help\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=732"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quiz.seeksolution.in\/help\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=732"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quiz.seeksolution.in\/help\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}