Question

I’ve been using the following jquery plugin to set my font sizes based on the width of the container divs: http://www.zachleat.com/web/bigtext-makes-text-big/ I have been able to get it working with different fonts when I define the fonts in the css as

.bigtext{
    font-family:Arial
}

see http://jsfiddle.net/pF5bQ/3/

however, if I define the css with a parent class

.theme .bigtext{
    font-family:Arial
}

It sets the font too big.

see http://jsfiddle.net/pF5bQ/4/

The app I’m working on features various themes that use different fonts so I need to be able to define different styles for the bigtext based on the parent class.

Any ideas?

Answer 1

Not a ‘true’ solution but the work around I ended up discovering was that if I applied my theme class to the same div as the big text, I’d get the desired result.

.theme.bigtext{
    font-family:Arial
}

It feels really hack-y because in the project I’m working on, I need to do the class switching and what not in javascript, but it gets the job done.

http://jsfiddle.net/pF5bQ/7/