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
But we have to make one minor change to it for it to work!{Paste it in a text editor like notepad }
Next we grab the font family code,which in case of Electrolize looks like
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!
Remember while pasting you don't remove any of the single quotes or semicolons.
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
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!
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='http://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet'
type='text/css'>
But we have to make one minor change to it for it to work!{Paste it in a text editor like notepad }
<link href='http://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet'
type='text/css'/>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!
Comments