WordPress.org

Ready to get started?Download WordPress

Forums

Complete newbie question - how to edit style.css to change a font? (6 posts)

  1. tannin
    Member
    Posted 4 years ago #

    I am completely new to this (<24 hrs). I am using the Twenty Ten them and want to change the font and color of the heading in the blog. I figured out that I need to edit the style.css file and after much searching here, I found where I get to do it. Now, how do I change it? There's so much code in that file - where do I make the change and how do I know what to change it to ie the syntax/words needed? Sorry for such a basic question. Please feel free to point me to a for dummies article if you know of one.

  2. Jumia
    Member
    Posted 4 years ago #

    1. View the page source (or use firebug)
    2. Find the id of the div containing the heading.
    3. Go to your style.css file and find the #id then between the curly brackets { } change the values of color: and font-family:

    Piece of cake, GL.

  3. Michelle Langston
    Theme Wrangler at Automattic
    Posted 4 years ago #

    Hey, Tannin and welcome to the world of WordPress! :) Well, I would save a backup of your style.css file before editing it. You can do that with FTP.

    Next, to edit your style.css, in the Dashboard find the "appearance" menu on the left. Click on the "Editor" link within that menu.

    When the editor loads, you will will need to make sure you are editing the Twenty-ten theme (check the drop-down menu at the top right to verify).

    Next, you'll see a list of files on the right, scroll down until you see "Stylesheet (style.css)". Click it.

    When that stylehseet loads in the editor, you will need to find the FONTs section in the styleshet. The code looks like this:

    /* =Fonts
    -------------------------------------------------------------- */
    body,
    input,
    textarea,
    .page-title span,
    .pingback a.url {
    	font-family: Georgia, "Bitstream Charter", serif;
    }
    
    h3#comments-title,
    h3#reply-title,
    #access .menu,
    #access div.menu ul,
    #cancel-comment-reply-link,
    .form-allowed-tags,
    #site-info,
    #site-title,
    #wp-calendar,
    .comment-meta,
    .comment-body tr th,
    .comment-body thead th,
    .entry-content label,
    .entry-content tr th,
    .entry-content thead th,
    .entry-meta,
    .entry-title,
    .entry-utility,
    #respond label,
    .navigation,
    .page-title,
    .pingback p,
    .reply,
    .widget-title,
    .wp-caption-text,
    input[type=submit]
    {
    	font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
    }
    pre {
    	font-family: "Courier 10 Pitch", Courier, monospace;
    }
    code {
    	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
    }

    You will need to override the default by declaring a different font value for the site title. Looking at the code, the site title is controlled by the rule: #site-title and #site-info (#site-info is the tagline, the "just another wordpress site" text).

    So go ahead and delete those from the list.

    Then, at the bottom of the FONTS section in the stylesheet, type the following:

    `#site-title: {font-family: Arial, Helvetica, sans-serif;}
    #site-info: {font-family: Arial, Helvetica, sans-serif;}'

    Of course, change the "Arial, Helvetica...etc" part to whatever font you want to use.

    Good luck and let me know if you have any further questions working with this.

    Ideally you should be making these changes in a Child Theme, but since you are just getting started, this would be the easiest way.

  4. tannin
    Member
    Posted 4 years ago #

    Thanks!

    How did you know that I need to change the site-title and site-info? Is it because you just know this from having done it before or is there another reason? I'm trying to figure out how I would have known...

    Then to continue from that, how would I know what to change if I want to change some of the other fonts? Is it always a parameter that starts with #? How about those that start with .?

    And then finally, is there a resource that tells me what the potential fonts are that can be used and the colors?

    Sorry...

  5. Michelle Langston
    Theme Wrangler at Automattic
    Posted 4 years ago #

    Well I knew because I had done this before. But yes, every design element on the page is controlled by some CSS selector. If you are using Firefox, I recommend that you download the Firebug extension. After you install it, you'll be able to right-click on anything on a website and choose "inspect element". Firebug will show you the CSS selector(s) that control it. You can then go to your CSS file and edit the selector or selectors.

    Download Firebug: http://getfirebug.com/

    The Chrome browser already has this functionality built-in as well.

    I also suggest the Web Developer Toolbar for Firefox or Chrome which adds some other useful features for web designers: http://chrispederick.com/work/web-developer/

    Finally, W3 Schools is a good site that has some tutorials on CSS with interactive examples: http://www.w3schools.com/css/, including tutorials on IDs & classes (the # and .), colors and fonts.

  6. tannin
    Member
    Posted 4 years ago #

    Thanks chellycat - that's very helpful!

Topic Closed

This topic has been closed to new replies.

About this Topic