How to change your font in Blogger without any CSS knowledge

If you have Blogger you may be wondering how can I change my font to something other then the few they offer me? I like Veranda just as much as the next guy but you might be looking for something a bit more spiffy. Luckily it's pretty simple to change your font, the hard part is more than likely finding what font you want to use.

How can I change my font for Blogger?
It's as easy as copy and pasting some CSS into the template designer. That way you can preview it and see if it works and if you like it and make any size changes if needed. Since it's a CSS override your exsisting CSS styling stays in place if you decide to remove this new code. So have no fear and do some experimenting.

Let's get started

Step #1 Goto your Blogger Dashboard (Link opens in new tab)

Step #2 Click on Design

Step #3 Click on Template Designer

Step #4 Click on Advanced > Add CSS

We're going to change your font to Lucida Console here as it's a rather browser friendly font.

Now once you're here add this code:

table, tr, td, li, div {font-family:"lucida console"; color:000000; font-size:15px;} .btext {font-family:"lucida console"; color:000000; font-size:15px;} .blacktext10 {font-family:"lucida console"; color:000000; font-size:15px;} .blacktext12 {font-family:"lucida console"; color:000000; font-size:15px;} .lightbluetext8 {font-family:"lucida console"; color:000000; font-size:15px;} .orangetext15 {font-family:"lucida console"; color:000000; font-size:15px;} .redtext {font-family:"lucida console"; color:000000; font-size:15px;} .redbtext {font-family:"lucida console"; color:000000; font-size:15px;} .text {font-family:"lucida console"; color:000000; font-size:15px;} .whitetext12 {font-family:"lucida console"; color:000000; font-size:15px;} a.navbar:active, a.navbar:visited, a.navbar:link {font-family:"lucida console"; color:000000; font-size:15px;} a.navbar:hover {font-family:"lucida console"; color:000000; font-size:15px;} a.redlink:active, a.redlink:visited, a.redlink:link {font-family:"lucida console"; color:000000; font-size:15px;} a.redlink:hover {font-family:"lucida console"; color:000000; font-size:15px;} .nametext {font-family:"lucida console"; color:000000; font-size:15px;} .title {font-family:"lucida console"; color:000000; font-size:15px;}

This code is to add Lucida Console as an example it looks like this.

How do I customise it?

To change it to whatever font you want simply replace all text that says Lucida Console with your font's name.
Since this is a CSS override your current template might make it look a bit screwy so to change the size just experiment until it looks right. It's defualt set to 15px you might have to make it larger or smaller to make it look right just add a higher or lower number than 15.

To do more CSS font size styling here are some more properties you can use.

Font Size

font-size: value;