A new theme & my fonts are jagged! HELP!

I installed a new theme last night at home and was really happy with it. The new theme is called Lush and was originally created by: Marco van Hylckama Vlieg. (say that 5 times real fast, I dare you!) It was ported to WordPress by: Christoph Boecken. I like the theme because it’s got the ultra cool (and useful too) AJAX powered live search at the top, the ability to adjust font sizes from within the homepage (helps for those late at night reads) built in support for widgets and support for some of my more favorite plugins without any modifications from me. The theme is still very new and quickly becoming a huge favorite with the wordpress community. You can find it here: WordPress Theme: Lush.

After uploading the new theme last night and dinking around with it a bit, I was all happy and proud and went to bed excited to show my friends and coworkers in the morning my hot new look. Well there was a problem the text was all jagged and busted. I spent a fair bit of time making sure my drivers were updated on my video card and monitor and it wasn’t any settings in my desktop. I even used Microsoft’s Online ClearType Optimizer (a very cool tool you should check out) to make sure my cleartype settings were tweaked, they were. 

Turns out it was the Font!  Below is what my jaggies looked like:

untitled picture

within the CSS file for the theme the font-family was set and the first 3 entries were: “Lucida Grande”,Lucida,”Lucida Sans”. Turns out I’m missing “Lucida Grande” in my family of fonts. I’m a big fan of Tahoma (which was next on the list so I moved it to the front and suddenly no more Jaggies! Hooray!

But I was still missing Lucida Grande and actually enjoyed it more than Tahoma. So I did a quick google for the font, found it host at gordeonbleu.  I downloaded it from there, extracted to my c:\windows\fonts folder and reloaded my page… No more jaggies HOORAY! and I moved the other Lucida fonts back further in the line of fonts so it would be less likely anyone else would see a busted page.

So if your wordpress site looks jaggied, check your fonts and consider changing to a more common font family.

2 Replies to “A new theme & my fonts are jagged! HELP!”

  1. While that solution will work for viewing your site locally (on that computer only), that doesnt help the rest of us…like me. You should change your CSS file for the theme to reflect as such: font-family: "Lucida Sans Unicode", "Lucida Grande", Tahoma, Verdana, etc etc"

    This will enforce the font Lucida Sans Unicode for all those who do not have Lucida Grande (like most, if not all, standard Windows users) and force Lucida Grande for those on Macintosh.

    Lucida Sans Unicode looks almost identical to Grande, so you get the best of both worlds.

    I am on my Windows machine and it hurts to read your site 🙁

  2. Thanks Evan. I actually had that fixed and then went and updated my copy of the theme and overwrote my changes. I forgot to mention it in the article that it was the more elegant solution and appreciate you pointing that out. Hopefully my blog doesn't hurt your eyes any more. Thanks again for the tip. Jess

Leave a Reply