WordPress.com

1. stefmorgan
   Member
   Apr 25, 2012, 1:08 AM

   I have made a lot of changes to Chateau and am pleased with what I have, except for the legacy Garamond Italic post (page) headings that are very, very big and look wrong with the body text-- and they're on the top of every page, of course, in a very big box of their own. I found that I can change the post-title text color in this piece of code from the original:

   .post-title h2 {
   border-bottom:1px solid #ddd;
   color:#006699;
   font-size:1em;
   font-style:none;
   font-weight:normal;
   padding:6px 0 16px 24.5%;
   }
   I have also changed or tried to override "Garamond" wherever I see it in Chateau's original CSS, but nothing I have done has changed that font or its size in the page titles. I know next to nothing about CSS/Html, but some things I've done have worked very well-- not this though. I would really like those page titles to be in the same font as the body text, which I changed to Arial, and only about three times as big as the current body text size, but in Bold. I would also need to change the size of the page title division, which ought to be smaller, and that would happen somewhere else, I think. Hope you can help me work this out!

   The blog I need help with is uvakkavo.org.

2. timethief
   Member
   Apr 25, 2012, 4:27 AM

   Hi there,
   Forum search results (hope they help)
   http://en.forums.wordpress.com/topic/how-to-change-post-title-font-size-in-chateau?replies=7#post-701722
   http://en.forums.wordpress.com/topic/change-site-title-typeface?replies=17#post-677367

3. designsimply
   Staff
   Apr 25, 2012, 1:06 PM

   One way to find out what current settings such as title fonts are being set is by checking the original theme stylesheet using the Appearance → Custom Design → CSS → "View the original stylesheet" link.

   Here is the link:
   https://s-ssl.wordpress.com/wp-content/themes/pub/chateau/style.css?m=1324084786g&minify=false

   If you search for "Garamond" in that file, you'll see this block:

   #main-title,
   .post-title h1,
   .post-title h2,
   .post-date,
   .post-extras strong,
   .post-entry h3,
   .post-entry blockquote,
   .post-entry cite,
   .comment-text h3,
   .comment-text blockquote,
   .comment-text cite,
   .more-posts .page-title,
   .more-posts .notice,
   #more-posts-inner h1,
   #more-posts-inner article span,
   #comments h3,
   #respond h3,
   #upper-footer-widgets .widget_text,
   #error404 {
   	font-family: "Adobe Garamond Pro", Garamond, Palatino, "Palatino Linotype", Times, "Times New Roman", Georgia, serif;
   }

   To just change out the font for the post titles to Arial, you can pick out just the selectors for titles like this:

   .post-title h1,
   .post-title h2 {
   	font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif;
   }

   To learn more about how font stacks work, check out this article:
   http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

   If you want you can leave in the whole selector list and it will change any instances that were using Garamond fonts to the font-family fonts you set.

   You also said you want a smaller font in bold. You can add CSS rules to the post titles to change the font size, style, and weight like this:

   .post-title h1,
   .post-title h2 {
   	font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif;
   	font-weight: bold;
   	font-style: normal;
   	font-size: 100%;
   }

4. stefmorgan
   Member
   Apr 25, 2012, 2:10 PM

   This is great, I tried the code given in post-701722 and it works! Titles are still in Garamond apparently, but much neater. I'll live with this a while and change to Arial if I feel the need. Thanks timethief and designsimply!

5. designsimply
   Staff
   Apr 25, 2012, 5:31 PM

   I looked at your Appearance → Custom Design → CSS page and I can't find any place you set the "font-family" rule at all for ".post-title h1" or ".post-title h2". Are you sure you added the CSS I recommended and that you saved the changes?

6. stefmorgan
   Member
   Apr 25, 2012, 5:57 PM

   I didn't use your code yet to change the font family, but will if I want to change post titles to Arial. I already did that for the body text, somewhere up in my own CSS Stylesheet Edit page, to override the original code, as I understand it does-- that worked fine but only for body. This changing the size only looks good so far. Thank you!

7. designsimply
   Staff
   Apr 25, 2012, 6:01 PM

   Ah, I see. I thought you were trying to change the post titles to Arial and you tried to update it but it didn't work for you. If you're just changing other font properties, that makes sense and you should be good to go. Cheers. :)

Topic Closed

This topic has been closed to new replies.