How to Change Blogger Post Body Font By CSS Trick

How to Change Blogger Post Body Font By CSS trick

18
data:blog.title
tips & tricks

You can customize your post body default font by a simple CSS trick. There are many font available but not suit all with your blog site. So for changing your blog font style you can apply the simple trick. I am using Georgia font by applying this trick. You can use according to you wish.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)


Step 4 And Paste the code from below Before/above ]]></b:skin>
.post-body {font-family: Georgia,"Times New Roman",serif;}
Step 5 Now save your templates and check your templates that it has changed with your new applied font.

Remember that you can also add any other font as you like. Just add the font name after 
  • .post-body {font-family: Add Your Font Family Here}.
Different Font's preview are given below-


font-family: "Arial Black", Gadget, sans-serif;
Preview: “Arial Black”, Gadget, sans-serif;
font-family: Arial, Helvetica, sans-serif;
Preview: Arial, Helvetica, sans-serif;
font-family: "Andale Mono", "Monotype.com", monospace;
Preview: “Andale Mono”, “Monotype.com”, monospace;
font-family: "Bookman Old Style", serif;
Preview: “Bookman Old Style”, serif;
font-family: "Comic Sans MS", cursive;
Preview: “Comic Sans MS”, cursive;
font-family: "Courier New", Courier, monospace;
Preview: “Courier New”, Courier, monospace;
font-family: Courier, monospace;
Preview: Courier, monospace;
font-family: fixedsys, monospace;
Preview: fixedsys, monospace;
font-family: Georgia, serif;
Preview: Georgia, serif;
font-family: Garamond, serif;
Preview: Garamond, serif;
font-family: Impact, Charcoal, sans-serif;
Preview: Impact, Charcoal, sans-serif;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
Preview: “Lucida Sans Unicode”, “Lucida Grande”, sans-serif;
font-family: "Lucida Console", Monaco, monospace;
Preview: “Lucida Console”, Monaco, monospace;
font-family: "MS Gothic", monospace;
Preview: “MS Gothic”, monospace;
font-family: "MS Sans Serif", Geneva, sans-serif;
Preview: “MS Sans Serif”, Geneva, sans-serif;
font-family: "MS Serif", "New York", sans-serif;
Preview: “MS Serif”, “New York”, sans-serif;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
Preview: “Palatino Linotype”, “Book Antiqua”, Palatino, serif;
font-family: Symbol, sans-serif;
Preview: Symbol, sans-serif;
font-family: System, sans-serif;
Preview: System, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
Preview: Tahoma, Geneva, sans-serif;
font-family: Techno, Impact, sans-serif;
Preview: Techno, Impact, sans-serif;
font-family: "Times New Roman", Times, serif;
Preview: “Times New Roman”, Times, serif;
font-family: "Trebuchet MS", Helvetica, sans-serif;
Preview: “Trebuchet MS”, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
Preview: Verdana, Geneva, sans-serif;
How to Change Blogger Post Body Font By CSS Trick
4 Stars stars - "How to Change Blogger Post Body Font By CSS Trick" You can customize your post body default font by a simple CSS trick. There are many font avai...

Nice tip but the font that you have suggested I'm already using on my blog now I wanted to increase the default font size of my posts. Any suggestion....
any way your template is awesome!

Hi Raaz..find the code like below--

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

and add below code before }

font-size:15px;

and replace

hi mohammad thanks for the tutorial. It is wonderful thank you
and see this tutorial how to boost up alexa rank?

Nice Sharing Fazle Bro, Post Body font is look's good of your posts well nice topic u share with us thanks
Regards
R.S

thanks Rizwan..I am happy to hear that

thanks for commenting

Am not seeing that code on my blog,,i use busby template i got from btemplate...http://surfbix.blogspot.com

I have got the code in your template. Please check

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

this template default code is Georgia

Thanks,,,how can i adjust the font size? They look pretty small on my blog

Thank you so much for this. I have been trying to figure out how to change the font for a month now. Nothing else worked.

Thank you so much :)

Welcome Alison...Its nice to hear that my tutorial helped you.

Bro, i had use ur tutorial but my blog seems did not work to it.

can u help me check because i didn't see any changes happened once i saved.

http://sinopsisberita.blogspot.com

Hi Cha..you are using Blogger default template. You have to change the font in different way. just find the below code and change the font name--- body {
font: normal normal 16px Josefin Sans;
Here your template main font is ''Josefin Sans'' and font size is 16px so change those and it will work now. Thanks

Great post! But, it's not working for me. When I'm on my blog's homepage, the font of a post preview (before it says "read more") is completely different than the font when I open the post. Can you please take a look? http://wordandedge.blogspot.com/

Hi Katarina...System has changed now Custom Google Font will work. please follow the updated post from below link---

http://www.bloggerspice.com/2014/11/How-to-use-custom-Google-font-in-website.html

Thank you

nice post but i failed resize of my outer wrapper and main wrapper as there is no such code with this name in my template. Please help me. visit www.newarticleworld.com

Hi Fahim...System has changed now Custom Google Font will work. please follow the updated post from below link---

:w http://www.bloggerspice.com/2014/11/How-to-use-custom-Google-font-in-website.html

Thank you

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *