HTML Tips and Tricks #2


Today, I'm continuing with the second part of my HTML tips and tricks series (you can read part one here) by talking about google fonts.
Fonts are a great way of making your post titles, sidebar titles and even your header stand out. Blogger does give you a choice of certain web fonts but if you want something a bit different then implementing one from google fonts is a great way to do this.

Picking a font
You can view all the differing google fonts by looking at the site here. When you're choosing a font, I would recommend choosing one that has a low to medium load time - basically it wont slow your blog loading time down. You can check loading times by clicking on the 'quick use' button under each font.

Installing a font
When you've chosen a font the next thing you need to do it install it via your blogs html template.

so for example, if you wanted to use the font 'BenchNine', click on the quick use tab under the font so you see this page.


The first thing you need to do is copy the code in box 3 (in the standard tab)

Then you need to paste this code right below the <head> code in you blogs html - you'll find this near the top of your html, for instance, mine is on line 4.

At this point, once you've pasted the code, you need to add a / before the > (see below in yellow) at the end of the code you copied from google fonts. So it looks like this
<link href='http://fonts.googleapis.com/css?family=BenchNine' rel='stylesheet' type='text/css'/>

You need to do this for any font you choose as the coding wont work otherwise.

Now you need to go back to google fonts and copy the coding in box 4


Again you need to paste this code in your blog html. Where you place this depends on where you want your new font to be.
If you want to use it in your post title, you need to find the following code

h3.post-title,

and paste the code from google fonts anywhere underneath. So on my template, it looks something like this

h3.post-title, .comments h4 {
  font: $(post.title.font);
font-family: 'BenchNine', sans-serif;
font-weight: normal;
font-size: 20px;

Dont worry if yours doesnt look like mine, as long as the code is under h3.post title tag it will work. 
After pasting the code, just click save and your font will now be installed!

If you want to add your font to your sidebar titles you need to add the font-family coding under the h2 tag. Similarly if you want to use it in your header, place it under the .header h1 tag


*Dont forget to download your template before you make any changes, so if anything goes wrong you can just upload your old template again*

I hope I explained this ok. Let me know if have any questions or if there is anything else you would like me to cover in this series and I will do my best to help!



Bloglovin |  Facebook  |  Twitter

5 comments

  1. Such a helpful post, thankyou!

    I've nominated you for the Versatile Blogger Award http://justdoingkatie.blogspot.co.uk/2013/05/the-versatile-blogger-award.html

    Katie xx
    justdoingkatie.blogspot.com

    ReplyDelete
  2. Thank you! I tried this and it worked! very helpful and easy. I will be reading the rest of the html tips and of course the rest of your blog. :-)

    ReplyDelete
  3. I tried this and it worked!!! thank you for your help. I will be reading the rest of the html tips and of course the rest of your post. keep it up! :-)

    www.gieangoestoamsterdam.tumblr.com

    ReplyDelete
  4. Very helpful all parts about html, thank you Zoe. :-)

    www.artikvarnica.blogspot.com

    ReplyDelete

Thank you so much for reading!I read every comment and try to respond.If you have a question you can also email me or tweet me @sweetelectric xoxo