CSS and Changing Fonts ?

  • Unknown's avatar

    I have some experience with HTML but none with CSS. I opened my Twenty Eleven Theme CSS and was surprised to see 2700 lines of code.
    If I want to change my Font do I edit the CSS or do I add lines to it?
    If I am to edit, where do I edit ?
    If I am to add lines to it where should I add them ?
    Thank you.
    FDLeyda

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

  • Unknown's avatar

    When you alter a theme’s stylesheet, you only need to put in the Editor the modification/additions to the CSS, not the entire thing. Read this for more info:
    http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/

    Take advantage of your browser’s developer tools. Under Firefox, install Firebug. For Internet Explorer, install the Developer Toolbar.

    Using Typekit with WordPress.com > http://help.typekit.com/customer/portal/articles/6840-Using-Typekit-with-WordPress-com

    I don’t help with CSS so you will have to wait for another Volunteer or Staff to help you.

  • Unknown's avatar

    I just purchased the 2011 and though I have enough css knowledge to get around (or so I thought) cannot seem to locate the code that controls font sizes. The visual editor does not allow changes (which is one of the reasons I bought the upgrade). Where is the general content (as in the text part of a page) controlled from and how can I disable it so i have some control over the font size?

    Thanks

  • Unknown's avatar

    The font size for the post and page content is here:

    .entry {
    font-size: 1.3em;
    }
  • Unknown's avatar

    Thanks but that does not seem to affect anything. 1. Could not find that anywhere (at least in that exact format) in the existing style sheet and 2. When I plugged that in and played with the ems, no changes ensued.

    Any other ideas out there?

    BTW I have been able to change other things so I am aware of how to go about it…

  • Unknown's avatar

    Is this the site you are talking about, http://flann4.wordpress.com/ ? It worked fine for me when I did a change using Firebug directly on your site.

    Did you put the above, and ONLY the above into the CSS edit window? Do you have the Custom Design upgrade?

  • Unknown's avatar

    No, the site is
    https://lookingforawriter.wordpress.com/
    and yes have the upgrade.

    Its the 2011 theme. Love the theme but hate the locked spacing and font sizing.

    Appreciate you taking the time!

  • Unknown's avatar

    Ah, that will require different code. Please always include a link to the site you are talking about, especially if that is not the site linked to your username. CSS is theme specific so we need to see the actual site.

    Nice header image by the way. I really like that. Did you create or paint that?

    .entry-content, .entry-summary {
    font-size: 100%;
    }

    Add the above to your CSS and then change the percentage font size as required.

  • Unknown's avatar

    Great start…that gives me a place to look…that makes everything in the body larger but still wanted to make the uls larger but can probably figure that out now..

    Thanks re the image….it is a photograph….unmanipulated…

  • Unknown's avatar

    With 2011, the fonts sizes are all declared for the specific elements/divs. My suggestion is to copy the entire original stylesheet out and into a plain text file and the you can search for “font-size:” and then transfer only those selectors over and into the css edit window and only the font-size declaration and then adjust the font size for each.

    Many themes declare a base font size in “body” and you can just bump that up and it will typically make all the fonts in the theme larger, but not in 2011.

  • Unknown's avatar

    Actually, I take that back. The following will adjust most all fonts in the theme, but it will have some side effects that you will then have to take care of. My suggestion is to do what I mention above. It will be less work in the end than adjusting the below.

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-size: 100%;
    }
  • Unknown's avatar

    Thanks again…really appreciate the help.

  • The topic ‘CSS and Changing Fonts ?’ is closed to new replies.