Change widget heading font

  • Author
  • #547136


    Hey lovely experts,

    I have been working on the blog for a while now and could resolve more or less everything, that needed to be done. But I´ve come across a few problems, when touching the custom CSS. First of all I lost the round edges at the Sidebar widgest from the MistyLooks theme, which I can live without (although I would like to get them back :). Then the headings of the widgets changed, the first one is fine, the others are unfortunately with serifs. I installed typekit fonts, but can not change the headings whatsoever. I also tried to insert font family: arial, tahoma, sansa serif in the css where it says sidebar etc, but that didn´t change anything either. So that´s my main concern right now, to change that.

    Furthermore, I also lost the shadows behind pictures, which are usually in MistyLooks and the line under the heading of a post.

    If anyone can give me a hint how to fix those bugs, I appreciate it a lot! I read several threads and tried out quite a few things, but can´t seem to change anything at all of these above problems.

    Thanx a lot in advance!

    Best A

    The blog I need help with is


    I expect you pasted the entire stylesheet into the CSS edit window. What happens in that case, is that your CSS changes, and all that is in the CSS edit window is saved in a different location from the original, and that breaks all the relative URLs in the stylesheet.

    At wordpress.COM, you need to do things differently. You need to put ONLY the specific selectors and the specific declarations you are changing into the CSS edit window. That way all the existing relative URLs will not be broken.

    For the sidebar titles, this is the class that need to have the font applied to it at typekit.

    li.sidebox h2



    Thread moved to CSS forum. -slik



    Try the code below but as has been already stated if you’ve copied over the entire existing stylesheet this might cause problems and you should be able to add the typekit fonts directly from their website with the selector mentioned above:

    .sidebox {-moz-border-radius:5px; border-radius:5px;}
    .sidebox h2 {font-family:"vera-sans-1","vera-sans-2",sans-serif;}
    img {-moz-box-shadow:0 0 3px #888; -webkit-box-shadow:0 0 3px #888; box-shadow:0 0 3px #888;}



    thanx for all you kind replies! I pasted the code from above in the stylesheet, but that didn´t change anything so far. In typekit fonts I have put li.sidebox h2 (as well as h3, h4 etc) in there already, with no success.

    And yes, unfortunately I pasted the stylesheet into the window :(. That´s where my bugs come from, but I´m willing to fix them whatsoever now.

    I´ll check the CSS forum now, to see if there are more hints.

    Thanx a lot so far!





    now I got it! Thanx to thesacredpath, the li.sidebox and then h3, h4, h5 did it. I had li.sidebox and h2, h3 h4 etc entered seperately in typekit fonts. but the clue was to enter it together.

    Thanx again! A

The topic ‘Change widget heading font’ is closed to new replies.