Tuesday, October 23, 2007

Changing fonts and colors for New Blogger

Update: Use the new template designer to change font instead. Login to Dashboard > Layout and click the template designer at the top right corner of the page.

It is now very easy to change the fonts and colors of various things in your New Blogger blog. You don't need to tamper with the template. You can do it direct from the LAYOUT.

Sign into blogger.com (Dashboard). You will see a list of all your blogs. Click LAYOUT for the relevant blog. Then click the FONTS AND COLORS sub-tab. See screenshot below:



Say, you want to change the font for the Header. Scroll down till you see "Page Header Font". On the right, you will have the radio button to chose the font family and further to the right, you can change the font style to bold or italic. There are also linls to change the font size to "bigger" or "smaller"

54 comments:

  1. hallo there :) you must be very proud of yourself. Great work! Thank you for everything! your articles help me a lot :)

    Peace,

    Jenny

    ReplyDelete
  2. Hi Jenny,

    Thanks for your kind words.

    Peter Blog*Star
    Blogger for Dummies

    ReplyDelete
  3. Let me say that again. Your tips are awesome. Has helped me a lot.

    ReplyDelete
  4. hi peter. i just wanted to know how do you increase the number of available fonts in blogger. can you include new fonts other than the given 6?

    ReplyDelete
  5. Dear Peter Chen,
    I find your blog from Google search machine. You have a very interesting blog because you can help many bloggers.

    I am a Blogger from Greece and I have a problem with my blog.
    (My Blog is: http://ellinaspatriotis.blogspot.com/).
    Few days ago I saw a change in the colors of my blog.
    The letters in “comments”, “blog archive”, “list of friendly bloggers”, “labels”, etc, were dark blue with underline. My choice in this area was letters with violet colors and without underlines (you can see this if you choose a theme from the blog archive). If you choose a theme from the blog archive, the colors will be O.K. But if you go to http://ellinaspatriotis.blogspot.com/ you will see the wrong colors.
    Sometimes the color of the clock is changing (gray rather red points).
    I tried to fix it from Control Panel but without success.

    Is this problem from Hacker?
    Can you tell me how can I fix it?

    ReplyDelete
  6. I don't have this option of PAGE HEADER FONTS... why is that? I have font called Wendy LP Light (True Type) that I would like to use for my blog but I don't know how to put it my page. Can someone help me, PLEASE and THANKS?

    ReplyDelete
  7. That font is not included in the Internet friendly fonts and the vast majority of surfers will not have it in their computer and will therefore not see it.

    ReplyDelete
  8. There is one font, Palatino Linotype, which is loaded in all Windows systems from Win2000 onwards, which is quite popular to those who want their pages to have an old-fashioned typing style. Also, it happens to be the one font that supports classical greek characters.
    Is it possible to have it included in the 6 fonts that we can select from in the "Layout -> Colours and fonts" selection?
    Alternatively, is it possible to create alternative versions of existing templates, that greek users can use without having to modify HTML and/or CSS commands?
    Thanks in advance for your response.

    ReplyDelete
  9. There is one font, Palatino Linotype, which is loaded in all Windows systems from Win2000 onwards, which is quite popular to those who want their pages to have an old-fashioned typing style. Also, it happens to be the one font that supports classical greek characters.
    Is it possible to have it included in the 6 fonts that we can select from in the "Layout -> Colours and fonts" selection?
    Alternatively, is it possible to create separate versions of existing templates, that greek users can use without having to modify HTML and/or CSS commands?
    Thanks in advance for your response.

    ReplyDelete
  10. Hi,
    While trying to solve (again) a problem I have in some of my blogs I arrived here. I can't edit the fonts and colors when I go to "layout" and then "fonts and colors". After loading I get a message saying "done but with errors" and then, when I click there it says "style editor is null or not an object". Sorry to disturbe you with this, but I can't get any help from blogger and I tried everything, I suppose. Do you have an idea about what can be the problem? I will understand if you don't have time to answer. Thank you anyway and congratulations for your blog.

    ReplyDelete
  11. Thanks for this useful information. It helped more than the information that blogger was able to provide on the subject.

    ReplyDelete
  12. Hello,

    Thank You for this Information.
    But I am having trouble with trying to change the fonts and colors. Because when I click "Fonts and Colors" it comes up as a blank page. Does anyone know what I can do about this?

    Thanks,

    -Angie @ G&G

    ReplyDelete
  13. Whenever I get faced with such problems, I switch to a new browser (which has same effect as clearing cache and cookies). Try that and report back as to whether that helped or not.

    ReplyDelete
  14. how can i make the comments (in response to other comments) stand out? can i change the background color of my comments or the color of the ink or the font?

    ReplyDelete
  15. You can use tags like <b> (bold font) and <i> (italic) but cannot add color.

    Tested in comments at testing image hosting by Blogger

    ReplyDelete
  16. How to change the complete theme of the blog. I didn't find any option in any of the settings of the blog.


    Thanks
    NItin

    ReplyDelete
  17. Complete theme? Wordpress calls their templates themes, so I assume you want to change template?

    ReplyDelete
  18. I'm not sure why but I can't seem to change the colour of my links on the first page of my blog. When I go to older posts on other pages, the colour is what I chose. Anyone have any suggestions?

    Leigha

    ReplyDelete
  19. Great information here!

    I can't seem to "edit" the hex numbers for anything on my blog to change the colors. I'm talking about the box on the Right that says "edit hex". I try putting in specific numbers I know are correct but they will not change from what the original color was. Instead I have to use the limited color chart google has there (the sqaure box with has colors you click on). Can't we put in our specific hex numbers? Thanks for help, Robin

    ReplyDelete
  20. hey, is there a way to take away the underline for my links on my posts?

    ReplyDelete
  21. Sign into Dashboard, click LAYOUT then EDIT HTML to open the template editor. Check to see if you can find these codes:

    a:link {
    color:$linkcolor;
    text-decoration:underline;
    }

    and change them to

    a:link {
    color:$linkcolor;
    text-decoration:none;
    }

    ReplyDelete
  22. Hi Robin,

    Let us have those hex numbers you used plus info about what you are trying to change and we can do some tests.

    ReplyDelete
  23. Hi Peter,

    I followed your instruction but the box in the FONTS AND COLOUR section came out blank. Why is that so? I still cant change the font. Thanks for your help

    ReplyDelete
  24. Hi Peter,

    I followed your instructions but the box in the FONTS and COLOUR section came out blank. Why is that so? I still cant change the fonts. Thanks.

    ReplyDelete
  25. "Fonts and colors section" missing? No customize tab? I have never come across this situation and other than hit and miss kind of actions like try using different browser (better alternative to clearing cache and cookies) or backup gadgets, backup template then changing fresh template, the other thing you can do is to post your problem to Blogger Help Forum. If you do find a solution, do give us some feedback.

    ReplyDelete
  26. Hi Peter,

    Using the fonts and colors tab allows me to change the body text color on older posts, but does not work on body text I've recently posted. Any idea why this would happen? I can still change the body text size and post title color on my new posts. Thanks!

    ReplyDelete
  27. Difference between old and recent posts? First time I heard of this. May be useful for Blogger Employees to follow up on this problem at Blogger Help Forum.

    You may also want to try to edit template (CSS) direct or use inline CSS

    ReplyDelete
  28. Thank you for the instruction, Peter; however, these controls still do not provide the blogger with the ability change the Post Title font face or font color on a per-post basis. As well, the old version allowed the user to edit the html and change those font properties directly. Can you provide some guidance on this?

    Thank you,
    Tom

    ReplyDelete
  29. I am trying to set up a new blog. I no longer have a Layout setting. It now says Design. There is no tab for fonts and colors anymore. What happened? How do I set up the Header, Fonts and Colors?

    Thanks for any help

    ReplyDelete
  30. You can do it now via ADVANCED > TEMPLATE DESIGNER ... In some cases you may have to use ADD CSS by scrolling to the bottom. See How to change post title background color via Blogger Template Designer.

    ReplyDelete
  31. Thank you Peter, I appreciate your answer. I discovered that after some searching. One problem solved. Now - Why has Blogger changed their format? My photos don't load the same, (vertical instead of horizontal) and I can't move them. I can't copy my posts and I have a little screen that says, "this photo or video has been moved or deleted - Photobucket" on my page that moves with the page and no way to get rid of it. WTH is going on?
    Take a look and tell me.
    www.chewonthistoo.blogspot.com

    ReplyDelete
  32. "My photos don't load the same, (vertical instead of horizontal)"

    Sorry please explain

    " I can't move them"

    I suspect you are using the COMPOSE mode which is very clumsy. I always use the Edit HTML mode and moving photos is as easy as cut-paste or copy-paste.

    " I can't copy my posts "

    Huh?

    ReplyDelete
  33. I AM using Compose mode. Thanks for telling me about the HTML mode. Will try that. If you looked at my site you'll see that my photo is horizontal and only half of the photo is showing (click on it and you'll see the whole thing.)

    Can't copy: I wanted to delete the whole entry and start over but I couldn't copy and paste the text into a new post and I didn't want to type the whole thing again. What happened? Why the changes? Dang, if it ain't broke.......leave it alone!

    ReplyDelete
  34. "Can't copy: I wanted to delete the whole entry...."

    This is something new to me. Perhaps it is the new post editor? which I have long abandoned in favor of the old trusty post editor. Maybe you can try switching back to the old editor and/or use the edit html mode. Would like to follow up on this.

    ReplyDelete
  35. Peter, I used the old editor and Edit HTML. It worked! Problem solved. Thanks so much.

    ReplyDelete
  36. hi i want to change the font of my header to edwardian script is there a way i can do this. It obviously isnt one that they give you..

    ReplyDelete
  37. Been meaning to write a post on @font-face If can't wait go do some research on that.

    ReplyDelete
  38. Trying to edit my blog colors and link colors. But I don't have a "layout" tab or font and color tabs on the new "design" page. Where are these hiding?

    ReplyDelete
  39. Hi Peter

    Here is my blog
    http://katotokerdos.blogspot.com/2010/08/blog-post.html#comments

    How can I change the size of letters in comments area. It is very small now

    ReplyDelete
  40. These are what I found in my Minima template that relates to comments:

    /* Comments
    ----------------------------------------------- */
    #comments h4 {
    margin:1em 0;
    font-weight: bold;
    line-height: 1.4em;
    text-transform:uppercase;
    letter-spacing:.2em;
    color: $sidebarcolor;
    }

    #comments-block {
    margin:1em 0 1.5em;
    line-height:1.6em;
    }
    #comments-block .comment-author {
    margin:.5em 0;
    }
    #comments-block .comment-body {
    margin:.25em 0 0;
    }
    #comments-block .comment-footer {
    margin:-.25em 0 2em;
    line-height: 1.4em;
    text-transform:uppercase;
    letter-spacing:.1em;
    }
    #comments-block .comment-body p {
    margin:0 0 .75em;
    }

    ReplyDelete
  41. Can I change the color of my comment box from white? I would like it to be the same color as my main wrapper. A mustard color..

    ReplyDelete
  42. my visited link color won't change according to my preferences in Designer ... no one else can see the color I choose either. Everyone gets the pale grey (which does not show up on my blog because the color is too washed out) ... as far as I can tell, this is the only problem I'm having with design ...

    ReplyDelete
  43. Sounds like you may have to go to Design > Edit template and locate the code that specify visited link color and change it there.

    ReplyDelete
  44. Peter, nope, didn't work ...

    My Visited Color shows up as a pale grey, but I have it coded #993322. In addition it stays "visited" even after I've signed off/on. It also appears already "visited" when others visit my site

    very peculiar

    ReplyDelete
  45. Hi Peter,

    I am desperate. I am a luddite of a blogger, and I have been really happy with my graphics since I started blogging about four months ago. Last night I was futzing around and I accidentally deleted my blog title and description. I have tried and tried to edit the color and font but it just doesn't stick.

    I am realizing as I search the internet, that this is probably a systemic problem with blogger. But is there any way you can help me figure this out? That title is what hopefully will become what people identify as my blog, and right now it does not represent me or my ideas or aesthetic at all....makes me want to shut down the blog!

    Thank you in advance, Tiffanie

    ReplyDelete
  46. Is your problem the deletion of the blog title and description or you are unable to get the color you want for your blog title and description?

    ReplyDelete
  47. Hey, Please help Me out.... I cant change the font in template designer in new blogger....i changed the font, but its not working....and please tell me some tricks to increase my Visitors....Please do visit my Blog....
    www.stylishsurya.blogspot.com

    ReplyDelete
  48. Is there any way to add a button to bookmark my blog, pls tell me the code too...Thanks in Advance :)

    ReplyDelete
  49. Hi! Not sure if you will be able to help, but I am struggling with my blogs today (could be a blogger issue?) None of my selected fonts in the template are showing on my actual blog. It is reverting to the original font? yet shows correct when I check my template?
    Extremely frustrating! Appreciate the help, if you're able to.

    ReplyDelete
  50. This is an old post. Are you using the new template designer to change fonts? That is an easier option than editing the template direct.

    ReplyDelete
  51. This comment has been removed by a blog administrator.

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics