Conflict with website theme font

Hi Brian,
yes, you are right. Your theme is forcing that font (“Passion One”) for all headings.

Luckily, there is a pretty easy solution! All you need to do is add some custom CSS to your site.

h2.hdq_results_title, h3.hdq_question_heading {
    font-family: "Open Sans", sans-serif;
    text-transform: initial;
}

The easiest way to add that code to your site is to log in and go to Appearance -> Customize. From there click on the “additional CSS” tab and you can paste in the above code.

Explaining the code:

The first line h2.hdq_results_title, h3.hdq_question_heading is the “selector”. In this case, we are selecting all question headings as well as the heading “Results” once a quiz has been completed.

The second line sets the font to “Open Sans” which is the other main font your site is using for the body content.

The third line text-transform: initial; stops your site from forcing the titles to be uppercase. If you want it to be uppercase then you can omit that line.

And that’s it!

Just a quick update:
taking another quick glance at the current quiz you have, I’d also recommend adding the following rule: font-size: 1em;. This will make the question title’s a far more reasonable font size on your site. Feel free to play around with that number to get your desired look (think of it as 1em as 100% size, 1.2em as 120% size, 2em as 200% etc)

I was just about to ask about that. Where do I put that code?

Full example code would look like

h2.hdq_results_title, h3.hdq_question_heading {
    font-family: "Open Sans", sans-serif;
    text-transform: initial;
    font-size: 1.5em;
}

This depends on your theme, but the vast majority of themes are compatible with the WordPress customize feature. This can be accessed by logging into your site and going to Appearance -> Customize. Once here, select “Additional CSS” where you can paste in the above code.

If your site does not have this feature (or the code doesn’t make any changes), then you’ll have to edit your theme’s style sheet to add the code (your theme will have a file called style.css where you can edit that file and add the code to the very end of the file.

Looks good and final thing (unless you’re really bored) I always have questions ??

I’m assuming the font can be changed from open sans. I tried it with Times New Roman and it did work. But what is the default font you use for the questions? I think the answers in my quiz are the same as your default question font.

• This reply was modified 2 years, 3 months ago by Brian.