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.

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.

  

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’.

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

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.