2010 theme, custom font/custom css issue with widget titles

  • Author
  • #889585

    I have the custom package. I am trying to make the sidebar widget titles normal weight, not bold. In the CSS, I found:
    .widget-title {

    so I put this into the custom CSS:
    .widget-title {

    I did not have the “!important” at first, but since it didn’t seem to work I added it.

    Now I see the correct font size and weight in the custom font preview, but not in the custom CSS preview, or in normal viewing. What’s going on?

    The blog I need help with is touchofjoyministries.wordpress.com.



    Where is your blog so we can see?


    Sorry – it showed when I wrote the post. I thought it would be visible or accessible.



    So, any ideas why the custom font preview pane honors css affecting the sidebar widgets, but no other view (css preview page, edit page preview, page after publishing) does? Or how I can do something else to achieve the same effect?

    I’d like to get this working.


    It can get tricky when using custom fonts as the settings for those can sometimes override your custom CSS and you have to get out the hammer (figuratively speaking). Change your widget title rule to the below and it will override the font stuff.

    .wf-active .widget-title {
    font-size: 16px;
    font-weight: normal !important;

    Do note that the font you have chosen does have a wide stroke, so it is still quite heavy.


    Thanks for the response. I cut and paste your css to replace that section of mine. The result is the same.

    View in custom font preview
    View of resulting page

    You can see the same result live by going to the site.


    Please note that the custom font preview pane is actually the one, the only one, displaying what I am asking for in the css.


    I’m not sure why the Appearance → Custom Design → Fonts page shows the titles with a normal font weight while viewing the blog itself shows the same titles as bold. I’ll look into that.

    In the mean time, you could try manually changing out the font as well. It seemed to do the trick in my tests:

    .widget-title {
    	font-family: "Trebuchet MS", "Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif !important;
    	font-size: 16px;
    	font-weight: normal;

    Thank you, I will try that.

    Let me add for your info:
    – 2010 theme and the Recent Post, Archives, and Categories widgets.

    – In the custom font panel, changing headings from “bold” to “normal” also does not change the widget title from bold to normal (except in the font view pane, just like the css case). This surprised me.

    – In the custom font panel, adjusting the size of headings does change the size of the widget title, just like changing the css does.


    Small update: I did test this on another blog using Twenty Ten, and the controls on the Appearance → Custom Design → Fonts page work normally—I can change styles for sidebar headings from normal to bold and back. I’m still not sure why they’re not working on your blog, but I suspect it’s because of some setting or HTML that’s specific to your blog because I am unable to reproduce the problem in a test on another blog.


    All righty, here’s what’s happening. On the Appearance → Custom Design → Fonts page, all of the styles for the fonts you select are loaded at once to make it possible to do fast previews of different types of font styles. However, when you view the front page, only the font style you actually selected on the Fonts page is loaded. That means that if you select “FF Meta” with Style = Bold then only the bold option for that font is available on the front end. This explains the behavior you reported and also explains why the Fonts page looks just a bit different when combined with your custom CSS.

    The best workaround is to override widget headings with a different font so you can have access to the not-bold version of it. The example I posted previously should do the trick, or you can use the following example to set the widget headings back to theme’s original font settings. Either one should work.

    .widget-title {
    	font: normal 16px "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif !important;

The topic ‘2010 theme, custom font/custom css issue with widget titles’ is closed to new replies.