Skip to main content

Tutorial: Who doesn't love pretty fonts?

Hello lovelies! Let's learn something new shall we? In the following post we'll learn how to add Custom Fonts to your Post title, post body and sidebar title.

Earlier it was a bit of a hassle to add Custom fonts to blogger blogs. The font had to be downloaded, then hosted somewhere and then embedded in your layout. But now,thanks to Blogger's template editor it's so much easier![Template Editor>Advanced>Choose your fonts!]

Another way to add cool fonts is the Google Font API. Consider the Font APIs building blocks for you to make a pretty blog.

Firstly,remember this before making any changes to your template code,back up your template by logging into your Dashboard>Design>Edit Html>Download full Template.Save it in a location you would remember to upload it again if you mess up the template.
No need to be scared!Just follow the instructions and you would be okay.

Next, choose a font you like from  Google Font API. There's a slider on the left side where you can choose the slant and thickness of the font and the site will sort accordingly. Convenient,yes?

Once you've chosen the font,click on "Quick use".

I chose a font called "Electrolize"
The quick use code given is such

<link href='' rel='stylesheet' 

But we have to make one minor change to it for it to work!{Paste it in a text editor like notepad }

<link href='' rel='stylesheet' 
See what I did there? I added a "/" before the closing ">".If you don't,blogger wouldn't be able to save your template.Now we paste this code under <head>.This must be at the absolute top of your template.If you still have trouble finding it press ctrl+f and a little box at the top pops up and highlights the code you're searching for.
Next we grab the font family code,which in case of Electrolize looks like
 font-family: 'Electrolize', sans-serif;
 Okay,so we have the font,we have the codes,now what?
We apply!
 To apply to your your post title,
search for this code{ctrl+f}-remember this,it comes in real handy when you wade through that sea of code!
.post h3 {
Paste the font-family code like so

post h3{  font-family: 'Electrolize', sans-serif; font-weight:normal;font-size:140%; color:#000;}

Remember while pasting you don't remove any of the single quotes or semicolons.
If your template does not have .post h3{, you can paste the above  code anywhere between <head> and ]]></b:skin>.

Change the colour and font size accordingly :)

Similarly to apply it to the sidebar headings search for .sidebar h2 (or add it) and apply this code

.sidebar h2{
 font-family: 'Electrolize', sans-serif; font-size:20px; color:#000;}

To apply it to your post boy {the main text where your posts are displayed}
search for
.post-body {
and paste the codes like so:
.post-body { margin:0 0 .75em;
 font-family: 'Electrolize', sans-serif;font-size:16px;   line-height:1.6em;

adjust the font size accordingly and remember to choose a font that's easy to read.Refrain 
from choosing cursive or squiggly fonts as that would drive the readers away faster than 
you can blame the "Quick Fox"!

See some custom fonts in action on my blog!
Hope you enjoyed this tutorial-feel free to show off your results in the comments!


Bess V. said…
Thanks for this! Do you also know how to add fonts selectively, like if you want to have a few fonts in one post?
becky said…
I'm glad it doesn't sound hard....I'm going to have to read this a few times before it sinks in. sounds soo difficult.
Anonymous said…
Thanks so much for sharing this! I've been looking for a tutorial like this, and it was so easy :)

Popular posts from this blog

New Website : come say Hi!

I think the last time we posted we said we were working on some things and left y'all hanging.....sorry! I bet you are all doing well, still blogging and I'm definitely interested in hearing from you. With so many working mama's, from home to side hustles, I decided that I would make coffee addict mama somewhat similar to FTLOB! If you're free to come check it out, comment and say HI! I'd love to pick up from where we left off. XOXO

Sign The Pledge

Good Afternoon Lovely Members! Over one hundred of you Signed The Pledge and We Think that is spectacular. The page is filled with amazing blog lovers who deserve to be checked out. Go to this page to read these comments on signing the pledge and know that these people take pride in their blogs- they are so deserving of your love. In an effort to keep this going and make a difference here in blog land, we are bringing the pledge to this page so the comments don't get too overwhelming. We would recommend checking everyone out who signs because they have the same goals and etiquette as we do. So as far as being true to yourselves, your blogs and your friends, we know that these are the blogs we can go to for authenticity. For those that already signed, you don't have to sign here-Now for all of you new members who have yet to sign, here it is: I solemnly swear to participate in as many hops and features here at FTLOB to grow my blogging experience but ultimately to gain a

Hello! I'm still alive. How's everyone?!

hi my lovely bloggers! how are you!? I hope you're following on twitter , so that I can re-tweet your blog posts! in the meantime, i'm working on something new......stay tuned and get ready for a nice new blog community site here! xoxo