Mystique and WP-Syntax Incompatibility

If you use Mystique theme and WP-Syntax plugin (the syntax highligher) together, you will notice that, your code snippets will use Mystique’s fonts instead of monospace for colored words. When reading codes, monospace fonts like Courier fell much better, because they are easier to read.

Mystique’s style.css file defines default fonts with “*”, so every element on your site which does not have font information will use Mystique’s default fonts. WP-Syntax uses span elements for colors, and these elements do not have their font attributes defined.

In order to solve this problem, you have to add the following to wp-syntax.css file of the plugin:

.wp_syntax span {
  font-family: Courier, "Courier New", monospace;
}

This way, WP-Syntax will use the correct fonts for every span element, rendering colored words with correct fonts.

8 thoughts on “Mystique and WP-Syntax Incompatibility”

  1. Great, I also have this problem. At first I tried to change the “*” to “html,body,h1,h2,h3,h4,h5,h6,p,br,form,input,button,textarea,select,fieldset,blockquote,ul,ol,li,dl,dt,dd,pre” in Mystique’s style.css. Then I found this post and felt that this solution is better. Thank you for sharing.

  2. Will this work with Google Fonts? I have noticed that when I try to apply Google Fonts to my titles it only applies to certain ones in my mystique theme.

  3. Thanks much! I actually use Mystique and decided to try and
    fix this issue on my site today. I was shocked when my Google
    search of: “WP-Syntax courier” brought this page up! Just glad I
    didn’t have to do too much troubleshooting on this. ~Greg

Leave a Comment

Your email address will not be published. Required fields are marked *