WordPress.com

1. touchofjoyministries
   Member
   May 14, 2012, 2:45 AM

   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 {<br /> font-size:14px;<br /> font-weight:bold;<br /> }
   so I put this into the custom CSS:
   .widget-title {<br /> font-size:16px;<br /> font-weight:normal!important;<br /> }
   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.

2. motre
   Member
   May 14, 2012, 2:52 AM

   Where is your blog so we can see?

3. touchofjoyministries
   Member
   May 14, 2012, 3:04 AM

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

   touchofjoyministries.wordpress.com

4. touchofjoyministries
   Member
   May 15, 2012, 6:34 AM

   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.

5. thesacredpath
   Member
   May 15, 2012, 8:10 AM

   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.

6. touchofjoyministries
   Member
   May 15, 2012, 3:28 PM

   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.

7. touchofjoyministries
   Member
   May 15, 2012, 3:30 PM

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

8. designsimply
   Staff
   May 16, 2012, 2:05 AM

   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;
   }

9. touchofjoyministries
   Member
   May 16, 2012, 2:24 AM

   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.

10. designsimply
    Staff
    May 16, 2012, 4:39 PM

    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.

11. designsimply
    Staff
    May 22, 2012, 1:19 AM

    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;
    }

Topic Closed

This topic has been closed to new replies.