How to Change Blogger Post Body Font By CSS Trick?

There are thousands of themes for bloggers available, but only most of the new blogger themes are responsive while some old ones are not. Specially blogger's old default theme. Instead of a responsive desktop theme, it shows a mobile theme to mobile users.

One major issue for blogger is that we can't quickly alter our default font. The blogger built-in theme editor also does not help most of the modern blogger theme.

You can't change the font properties of your blog easily by the blogger theme customizer and by any other template. Many people only adjust templates because they don't like the default font family, font colour and style and size, etc.

But in this tutorial, I will show you about changing Blogger post body font in almost all types of Classical, Modern and Custom blogger theme.

You can customize your post body default font by using a theme customizer or by simple CSS tricks where applicable.

tips & tricks


There are many fonts available but not suit all with your blog site. So for changing your blog font style you can apply the simple trick. You can use it according to your wish.

How to Change Blogger Post Body Font in Classic Blogger Theme?

For this tutorial, I have selected Blogger ‘Simply Simple theme’. In this classical blogger theme, they use 'Trebuchet MS' as a font family by default. And you can easily change this font according to your desire.

Blogger ‘Simply Simple theme’  

To change the font please follow the below steps:

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

Step #2: At the top left, click the 'Down arrow' and Select a blog to update.

Step #3: In the left menu, click Theme.

Step #4: Now click the down arrow next to 'CUSTOMIZATION' and click 'Edit HTML'

Step #5: Now Locate below code

<Group description="Page Text" selector="body"> <Variable name="body.font" description="Font" type="font" default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px &#39;Trebuchet MS&#39;, Trebuchet, Verdana, sans-serif"/> <Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#666666"/> </Group>


Here 'Trebuchet MS' is the default font and you can change the font by replacing the font name like 'Helvetica’.

Here 'Trebuchet MS' is the default font

After changing the default font name to 'Helvetica


After changing the default font name to 'Helvetica’


This method will work on default 7 built-in font in Blogger classical theme.

  1. Arial
  2. Courier
  3. Georgia
  4. Helvetica
  5. Times
  6. Trebuchet
  7. Verdana

default 7 built-in font in Blogger classical theme.


Step #6: Simply save the blogger theme to make it change.

You can use any font name just by replacing the font name. But it is good to know the different Font family. I have given below-
  • font-family: "Arial Black", Gadget, sans-serif;
  • font-family: Arial, Helvetica, sans-serif;
  • font-family: "Andale Mono", "Monotype.com", monospace;
  • font-family: "Bookman Old Style", serif;
  • font-family: "Comic Sans MS", cursive;
  • font-family: "Courier New", Courier, monospace;
  • font-family: Courier, monospace;
  • font-family: fixedsys, monospace;
  • font-family: Georgia, serif;
  • font-family: Garamond, serif;
  • font-family: Impact, Charcoal, sans-serif;
  • font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  • font-family: "Lucida Console", Monaco, monospace;
  • font-family: "MS Gothic", monospace;
  • font-family: "MS Sans Serif", Geneva, sans-serif;
  • font-family: "MS Serif", "New York", sans-serif;
  • font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  • font-family: Symbol, sans-serif;
  • font-family: System, sans-serif;
  • font-family: Tahoma, Geneva, sans-serif;
  • font-family: Techno, Impact, sans-serif;
  • font-family: "Times New Roman", Times, serif;
  • font-family: "Trebuchet MS", Helvetica, sans-serif;
  • font-family: Verdana, Geneva, sans-serif;

Alternative Method


you can place a CSS code to change the blogger post-body font.

Step #1: After login to your Blogger theme just Edit HTML And locate ]]></b:skin>


Step #2 Now copy the below code and paste the code from below Before/above the ]]></b:skin>

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


Here I have set ‘Georgia’ font as the default Blogger post-body font.
Step #3: Now save the blogger theme to make the change.

How to Change Blogger Post Body Font in Modern Blogger Theme?


Most of the Blogger Modern theme use ‘Lora‘ font as default in post-body.

Notable Blogger theme

For example, I have selected the ‘Notable’ Blogger theme. And I will show you how to change the body font in this template to 'Lora', so all you have to do is to use the Blogger Customize feature. Just follow the below steps:

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

Step #2: At the top left, click the 'Down arrow' and Select a blog to update.

Step #3: In the left menu, click Theme. And ‘CUSTOMIZE’ button.

Step #4: Instantly Blogger Theme customizer will open. In the left customizer menu click ‘Advance’. And choose a font by using the drop-down option. You can also select the Font Style and Size.


Blogger Theme customizer




Step #5: And click the save icon from the bottom right of the screen to make the change.

The above image containing the blogger default 'Lora' font.
The above image containing the blogger default 'Lora' font. 


The above image containing the blogger default 'Lora' font.

Now check your blogger theme to see the shining new font.

The above image containing the Blogger Post body with 'Josefin Sans' font.
The above image containing the Blogger Post body with 'Josefin Sans' font. 


For the tutorial purpose, I have changed the 'Lora' font to 'Josefin Sans' font. 

How to Change Blogger Post Body Font in Custom Blogger Theme?


For example, we want to change the body font in this template to 'Noto Sans', so all you have to do is change the part marked in the code above with the name of the selected font, the result is like this:


<Variable name="body.font" description="Font body" type="font" default="$(fontBody)" value="&#39;Trebuchet MS&#39;, sans-serif"/>


To avoid errors, you have to add a value="..."  changed into "Noto Sans". 


If the above procedure is not working for you then find the 'body' code from your blogger theme and it would be like the below code.


body{position:relative;margin:0;padding:0!important;width:100%;font-family:'Noto Sans', sans-serif;font-size:14px;color:#48525c;background-color:#fafafc;-webkit-font-smoothing: antialiased}


You can see with a font-family name. Just replace it with the other default font name i.g. Ariel, Curier new, Impact, Georgia, Verdana etc. 

But in this case, you need to insert a custom Google font. Here I have used 'Noto Sans' as font family as blog post body font. But this is Google's custom font. And for adding custom font you have to embed the font in your blogger theme. You can have a look at it below. To embed this font you can follow the below steps:

Step #1: From your Blogger theme locate ]]></b:skin>

 Step #2: Now copy the below code and paste the code from below Before/above the ]]></b:skin>

/* Body Font by www.bloggerspice.com */ @font-face{font-family: 'Noto Sans';font-style: italic;font-weight: 400;font-display: swap;src: local('Noto Sans Italic'), local('NotoSans-Italic'), url(https://fonts.gstatic.com/s/notosans/v11/o-0OIpQlx3QUlC5A4PNr4ARMQ_m87A.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v11/o-0OIpQlx3QUlC5A4PNr4DRG.woff) format('woff')} @font-face{font-family: 'Noto Sans';font-style: italic;font-weight: 700;font-display: swap;src: local('Noto Sans Bold Italic'), local('NotoSans-BoldItalic'), url(https://fonts.gstatic.com/s/notosans/v11/o-0TIpQlx3QUlC5A4PNr4Az5ZuyDzW0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v11/o-0TIpQlx3QUlC5A4PNr4Az5ZtyH.woff) format('woff')} @font-face{font-family: 'Noto Sans';font-style: normal;font-weight: 400;font-display: swap;src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v11/o-0IIpQlx3QUlC5A4PNr5TRA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v11/o-0IIpQlx3QUlC5A4PNb4Q.woff) format('woff')} @font-face{font-family: 'Noto Sans';font-style: normal;font-weight: 700;font-display: swap;src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(https://fonts.gstatic.com/s/notosans/v11/o-0NIpQlx3QUlC5A4PNjXhFVZNyB.woff2) format('woff2'), url(https://fonts.gstatic.com/s/notosans/v11/o-0NIpQlx3QUlC5A4PNjXhFlYA.woff) format('woff')}


Step #3: Now save your theme and check your blogger theme that it has changed with your new applied font.

Instead of custom font, you can use the blogger default font. 

Remember that you can also add any other font you like. Just add the font file first after that add code like below:
  • .post-body {font-family: Add Your Font Family Here}.
e.g. 
  • .post-body {font-family: 'Noto Sans', sans-serif}.
I hope this Font changing tutorial will help you to change your Blogger theme font. If you face any trouble then feel free to leave comments below. 

22 Comments

  1. Angraj
    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!
    • BloggerSpice
      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
  2. Unknown
    hi mohammad thanks for the tutorial. It is wonderful thank you
    and see this tutorial how to boost up alexa rank?
    • BloggerSpice
      thanks for commenting
  3. Techex
    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
    • BloggerSpice
      thanks Rizwan..I am happy to hear that
  4. Rony Shaji
    thanks buddy Visit and see me
  5. Nesi Mapenzi
    Am not seeing that code on my blog,,i use busby template i got from btemplate...http://surfbix.blogspot.com
    • BloggerSpice
      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
  6. Nesi Mapenzi
    Thanks,,,how can i adjust the font size? They look pretty small on my blog
  7. 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 :)
    • BloggerSpice
      Welcome Alison...Its nice to hear that my tutorial helped you.
  8. Cha fern
    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
    • BloggerSpice
      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
  9. Unknown
    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/
    • BloggerSpice
      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
  10. Unknown
    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
    • BloggerSpice
      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
  11. JM Kayne
    Didn't work for me :(

    Please help!

    God Bless!
    JM Kayne | www.iamjmkayne.com
    • BloggerSpice
      Hi JM Kayne Miyake'
      This post is outdated now. Please follow the below URL for latest tutorial.

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

      :)
  12. Leo Kusuma
    This worked for me. Thanks alot.
    • BloggerSpice
      Welcome Bro :up
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up