Using the font that you want

  • Unknown's avatar

    I’ve upgraded using the “Custom Design” upgrade, I’d like to change the font to Georgia, but going to Appearance->Custom Design, then Font only gives a very limited selection of fonts. Do you need to switch to advanced to use any other font? Are only fonts from typkit allowed? typkit does not appear to offer Georgia but I see wordpress blogs using it. Any tips or links to helpful documentation would be appreciated.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    For the theme you are using, virtually every font for the theme is set in the main body rule. Add this to your custom CSS to make Georgia your preferred font. You will notice additional fonts declared (called a font stack) and that is in case the users computer does not have Georgia installed, it will then use Times New Roman, and then if that isn’t available, Times, and if that isn’t available, it will use the browsers standard “serif” font.

    body {
    font-family: Georgia,"Times New Roman",Times,serif;
    }

    Font sizes are set in various more specific rules. If you want to change any font sizes after the font family change, just let us know which ones.

  • Unknown's avatar

    Here’s a good article I like to link to which may also help:
    http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

  • Unknown's avatar

    Thanks for the responses…I’m curious why you’d need a typkit account to modify the css…are there any docs on that?

  • Unknown's avatar

    You can change the fonts to anything you wish in the CSS (if you have the custom design upgrade), but if the user’s computer does not have that font installed on it they will not see it and the browser will substitute something else. Typekit is an online font repository which means the browsers can pull fonts from it to use in displaying your web page. Without a Typekit account, you cannot access Typekit’s fonts. When you get the custom design upgrade and go to use a Typekit font, a code is put into the header of your site telling the browser where to go to get the fonts, and it also contains a code so that Typekit’s servers know you are authorized to be pulling fonts from there.

  • Unknown's avatar

    Ah, I think was a little confused, I was under the impression that to even edit your CSS you needed a typkit account, I think because I was using the font tab to get to CSS editing rather than just the CSS tab. I’m going to do some reading and playing around with CSS now, many thanks for the help.

  • Unknown's avatar
  • Unknown's avatar

    So I’d like to change the font size and line-height of the text in the body of the posts, I’ve read this:

    http://codex.wordpress.org/Playing_With_Fonts

    But can’t seem to find which selector I should change, I’ve tried a number of them with no luck.

  • Unknown's avatar

    Don’t read WordPress.org instructions. They do not apply to your blog.

  • Unknown's avatar

    So I’d like to change the font size and line-height of the text in the body of the posts,

    Here are some examples to get you started. To change the base content font size in the Blogum theme, add this to your Appearance → Custom Design → CSS editor:

    .post-content p,
    .post-content li,
    .post-content dd,
    .post-content dt,
    .post-content pre,
    .post-content address,
    .post-content div,
    .post-content kbd,
    .post-content tt,
    .post-content var {
    	font-size: 1em;
    	line-height: 2;
    }

    This will cover most things in the right sidebar:

    .widget-body,
    .widget-body p,
    .widget-body li {
    	font-size: 1em;
    }

    This will cover the post title and meta to the left of posts:

    .post-meta h1 {
    	font-size: 1.5em;
    }
    .post-date,
    .post-categories,
    .comments-link,
    .post-edit {
    	font-size: 24px;
    }

    I exaggerated the sizes quite a bit so you can see what’s changing as you add in the examples. You should adjust the numbers to a size you like.

    It’s still possible there are specific rules used by the theme to set specific font sizes in various places, search this CSS file for “font-size” to find all of them:
    https://s1.wp.com/wp-content/themes/pub/blogum/style.css?m=1340765927g&minify=false

  • Unknown's avatar

    Very helpful, thank you, I’ve been able to change the font size to what I like.

  • The topic ‘Using the font that you want’ is closed to new replies.