Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Change site title typeface

  1. ricksmithphotography
    Member

    I'm a total newbie to CSS and coding, so I'm feeling very dense right now. All I want to do is change the site title from its original font to Adobe Garamond Pro so that it matches my regular website, and control the font size and letterspacing. I paid for the custom design upgrade and signed up with Typekit, but don't understand where I was supposed to paste those lines of Javascript, or what Selectors are, or anything else. Is there a very plain and clear step-by-step somewhere for this? All the instruction I've found seems to assume coding experience. Please help!!!

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

  2. airodyssey
    Member

    Hi. Is this what you are looking for?
    http://en.support.wordpress.com/custom-design/custom-fonts/
    (It's part of the Custom Design upgrade)

  3. ricksmithphotography
    Member

    Hi there, thanks so much for the reply. I've saved my Typekit ID in the right place. I seem to be making my way there, but the big question remains, how do I use the "selectors"? This seems to be the key. All I want to do at this point is change the site title from its original font to Adobe Garamond Pro and control the font size and letterspacing. Thanks so much!

  4. ricksmithphotography
    Member

    Also, I don't know what/where this means (this is the message I get in a pop up window when I'm on the Typekit Editor page and I click on "embed code")....

    Javascript code for Rick Smith Photography Blog

    Copy the code below, and paste it into the pages on ricksmithphotography.wordpress.com/ where the fonts and settings for your Rick Smith Photography Blog kit will be used. Make sure it goes into the <head> tag.

  5. thesacredpath
    Member

    Once the new Custom Design upgrade was introduced, which include Typekit and Custom CSS together, then old way of doing Typekit fonts here at wordpress.com went out the window. You no longer work through the Typekit side of things at all. It is all handled through The Fonts tab in the Custom Design section.

  6. designsimply
    Staff

    You don't need to copy the Typekit javascript in to your blog because that part is done for you on WordPress.com when you enter your Typekit ID into the custom fonts advanced mode. It looks like you have already done that part.

    To use Adobe Garamond Pro on your blog right now, first you need to identify exactly what text you would like to change, then figure out the selector for that text, and enter the proper selector into the editor on the Typekit.com website. For example, the font for post text is often set in the "body" tag so you could try that as a selector to start. Then if it changes too much, you can try a more specific selector.

    To control the font size and letterspacing, you can use the Appearance → Custom Design → CSS tab. For example, to change the paragraphs inside any posts to be twice as large and have a very large letterspacing in the Chateau theme, you could enter something like this: 

    div.post-entry p {
font-size: 200%;
letter-spacing:8px;
}

    Make sure to adjust the numbers to your liking.

  7. thesacredpath
    Member

    I found this for reference: http://en.support.wordpress.com/custom-design/custom-fonts/#advanced-mode .

  8. designsimply
    Staff

    This might help too. http://help.typekit.com/customer/portal/articles/6840-Using-Typekit-with-WordPress-com#advanced-mode

  9. ricksmithphotography
    Member

    Thanks again for the responses. I've seen the links you both sent me, but again, they don't get specific enough to help me wade through this. I'm on the Fonts tab in the custom design section, and my kit ID is entered there, and my new typekit font family is listed there, but that's it... there doesn't seem to be anything else to do there or anything to control or change.

    So I'm going to the CSS tab and trying to figure out if that's where I need to be. I tried entering this code from the Typekit Editor page:

    h1 {
    font-family: adobe-garamond-pro;
    }

    ... and then hit preview to see if I've done something, but get a new window that says "Failure" at the top and the only thing that appears in the window is a small line which reads "do you really want to do this?"

    So the answer to that appears to be NO, I guess not.

    I found this other post, again talking about the "selectors" which seems to be getting close to what I may need to be doing:

    http://getook.wordpress.com/2010/01/04/typekit-guide-change-your-fonts/

    I've tried entering ".title" there and seem to have created a new "selector" so I then hit publish, but nothing happened with my blog. I resaved the kit ID, thinking that might help... no change. It seemed from the link above that I might need to create a "h1" or "h2" selector on the Typekit editor page, but for some reason those won't even create.

    I'm thinking the answer must be in entering the right thing on the CSS tab page, but I don't know what that is. Again, all I'm trying to do is change the site title font, and its size and spacing, nothing else. No other changes anywhere.

    Thanks again for your efforts to help me...this is so frustrating!

  10. ricksmithphotography
    Member

    Okay, I've managed to get some results by entering this code on the CSS tab page:

    h1 {
    font-family: adobe-garamond-pro,sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 50%;
    letter-spacing:8px;
    }

    ... The font has changed now to the desired new font, and the letter spacing has opened up, although I'm still unable to change the size. Whatever percentage I put in doesn't seem to matter. I also tried to put in an exact pixel value, no change. And I put in a simple numerical value, too.

    Somehow now I'm close... if you have ideas on how to set the size I will be ecstatic!

    Thank you........

  11. ricksmithphotography
    Member

    I've tried designating the "font-size:" as: %, em, px, pt, numerical value, smaller, etc,

    Nothing I do changes the size. I re-save my kit ID. I clear my cache. Nothing changes.

    What am I missing???

  12. designsimply
    Staff

    In this specific case, you have set the font size for h1 to be 50% size, but there is a more specific rule in the Chateau theme CSS that sets the font size to 3em for links, or a tags, inside h1 headings. So, you have to match the specificity. Try using this to change the font size instead: 

    h1 a {
    font-style: normal;
    font-weight: 400;
    font-size: 50%;
    letter-spacing:8px;
}

  13. ricksmithphotography
    Member

    Wow, thank you so much! That's doing the trick. I would have never been able to come up with that. Now, for further refinement, these changes are also affecting my post titles, not just the main site title. How do I separate the two, so that the post titles are unaffected?

    Also, I would like my site tagline to be on a second line by itself, not start immediately after the site title and then break into a second line because of length. Any ideas there?

    Thank you for the continuing help!!!

  14. designsimply
    Staff

    Note that to set the font family for all users, you'll probably want to make sure you have it setup through Typekit.com properly and not through the CSS editor. When you setup fonts through CSS only, the way it works is for the browser to use the fonts you list in the CSS *if* those fonts are installed on the visitor's computer. So, if I didn't have Adobe Garamond Pro installed and you set that font in CSS and not Typekit.com, then I wouldn't be able to see it.

    It always helps to have a very specific idea of what text you're trying to change. Sounds like you want to change the main site title text "RICK SMITH PHOTOGRAPHY" to use Adobe Garamond Pro. To do that, you should go to Typekit.com and enter #site-title for the selector.

    To find that selector, I looked at the page source code. I see this html: 

    <hgroup>
    <h1 id="site-title"><a href="http://ricksmithphotography.wordpress.com/" title="RICK SMITH PHOTOGRAPHY" rel="home">RICK SMITH PHOTOGRAPHY</a></h1>
    <h2 id="site-description">~ portraiture & environments</h2>
</hgroup>

    See how it says h1 id="site-title"? That means you can use #site-title as a selector for that specific part of the html.

  15. ricksmithphotography
    Member

    Okay, here's where I am. The only selectors I have in the Typekit are "#site-title" and ".tk-adobe-garamond-pro"

    The code I have in the CSS Editor on WordPress is this:

    h1 a {
    font-style: normal;
    font-weight: 400;
    font-size: 70%;
    letter-spacing:8px;
    }

    The issues I now have are the same as above in my previous post:

    These changes are also somehow affecting my post titles, not just the main site title. How do I separate the two, so that the post titles are unaffected?

    Also, I would like my site tagline to be on a second line by itself, not start immediately after the site title and then break into a second line because of length. Any ideas there?

    Thanks again!

  16. designsimply
    Staff

    The styles in the Chateau theme itself sets the following font stack which affects post titles: 

    #main-title,
.post-title h1,
.post-title h2,
.post-date,
.post-extras strong,
.post-entry h3,
.post-entry blockquote,
.post-entry 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 change that, you should either duplicate that code block in your Appearance → Custom Design → CSS page or you should use the Typekit.com editor directly to change the font to something else (i.e. using a selector such as ".post-title h1" which is listed in the code block above).

  17. ricksmithphotography
    Member

    Excellent, thank you!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags