Diva By Design #2: Go Font Yourself.. The How To Guide

We're in the midst of a font revolution. Gone are the boring fonts that offered little variety, and even less style options. And welcome the multitude of font designers that are creating luscious and opulent fonts that will have you adding to your cart in no time. But some fonts can be expensive, and rightly so considering the amount of work and creativity that goes into creating them. But not everyone can afford lavish fonts, so what are the alternatives? Today we're exploring free commercial use and Google fonts, and most importantly, how to use them in conjunction with your Blogger blog or your free design programs.


Google Fonts are more than just the basic fonts you find within your Blogger dashboard, there's over 600 fonts available to use on your blog that are quick and easy to use. The hardest decision is to find a font combination that suits your design and see how they blend and compliment one another.


So you've chosen your font and want to use it on your Blogger blog? You'll find the entire range here. For example, today we'll use the Lato font. Click to add the Lato font to your collection and then click to use. Remember to back up your template before making any changes to your blog.


So now you're ready to place the font code on your blog. There are two codes, one to allow you to use the font and the other to be placed where you want to use that particular font.


Let's start with the first code, which will look like this.

This code is placed by clicking on your Template, then to Edit HTML. You'll need to find the piece of code < b:skin > without spaces, which can easily be found by pressing Ctrl and the F key. Place the code in the line directly above < b:skin >


In order for the code to work, you'll need to add an extra slash before the closing bracket. Please see example below.


Now you're ready to place the second code wherever you want your new font to be displayed. Copy and paste the below code and head back to your template.


I'm going to use the Lato font as the main content font on my blog. Please note, that as Blogger templates vary, your template code may look different to my example. So I'll be deleting the previous font I was using, which was Multi and replacing it with the Lato font.



For anyone wanting to play around with templates, it's easier to create a new blog to practice. Practicing with your own blog may result in extra coding and may hinder the functionality.


If you're anything like me, I love fonts and want to horde as many as possible on my laptop. But how do you download Google Fonts to your PC to use for your matching blog graphics? Simple. SkyFonts is a lightweight program that allows you to effortlessly install desktop fonts to your PC. It's free to use and no registration required. Simply download, install and browse five different websites through the application for free fonts to use. But before you go berserk, please check that the font is okay to use on your blog, or commercially, as some fonts stipulate for at home use only.

You can still download fonts using the traditional method, which varies by PC to PC. Simply download the font to your desktop, often these are in zipped folders, so ensure you have an unzipper program on your PC.


Click on your Windows or similar menu to find your Fonts folder, then it's simply a case of selecting which font you want to install, then dragging and dropping.



Remember to check with each font to see if it's available to use on your blog or web projects. Or make your own at My Script Font.

1001 Free Fonts Fontspace Font Fabric
Font River Font Squirrel Da Font
Urban Fonts Kevin and Amanda Fonts 2 U


I love banners. Created especially for book bloggers, these banner headings feature a transparent background to suit any blog and measures at 650px wide, which can be resized to fit your content. Simply click to download and enjoy.

 
 
 

 
 

 

39 comments

  1. Ooh, this is a REALLY helpful guide. (And even though I'm not a book blogger, those freebies at the end are just so fabulous.) Personally, I prefer to use TNR -- I admit I'm a bit of a stickler for it, actually. Almost obsessed. But I do prefer serif fonts generally simply because I can never quite find a perfect cursive or sans serif font ... or maybe it's just because I like those sharp edges. Anyhow, really great post!

    ReplyDelete
    Replies
    1. I'm a big fan of clean and crisp lines too Alyssa, but it's so hard to find that perfect font isn't it. I love fonts and shopping for new fonts, so I chop and change constantly. One day I figure I'll get it right.

      Delete
  2. Sadly, I don't think I can use Google Fonts because I'm using WP and not Blogger. :( But thanks for these FREEBIES, Kelly. As usual they're gorgeous!! <3

    ReplyDelete
    Replies
    1. You probably can Paula, I think you can use a variety of fonts on Wordpress, but you need to have them hosted elsewhere. I only know about Blogger though unfortunately, but there should be Wordpress font tutorials out there.

      Delete
  3. Oh, that's awesome about the freebie banners! I need to look into that for some of my "features" that I add with certain book reviews. It would be nice to have something other than a basic title.

    Thanks for all the tips!

    ReplyDelete
    Replies
    1. You're welcome Lauren. I'm a big fan of having everything in sections and labelled for some reason, I think I'm really just a nerd with a label maker at heart.

      Delete
  4. LOOK AT YOU, KELLY! All fancy and knowing how to do cool things like coding (read- I have no idea how to do any of this O_O)

    It is super awesome that you are willing to impart your knowledge (after all we could use it against you) on us who are not as fancy as you are. :P

    Thanks for sharing, hon <3

    Rashika @ The Social Potato

    ReplyDelete
    Replies
    1. I actually don't know coding as such, but have taught myself a few tips and tricks through trial and error when blogging and changing my template. I'm hoping it'll help others out, as there doesn't seem to be many bloggers staying on Blogger these days, but they can do so much more with this platform than they probably realise.

      Delete
  5. ergerd, Kelly you are a gift ugh. I'm actually revamping my own blog and Its hard to find these fonts because I was so confused on how to actually apply it, but thanks to you, I get it! hahahaha, thanks Kelly! I love you! :D

    ReplyDelete
    Replies
    1. And it's so handy to have a bigger choice beyond those in the Blogger dashboard isn't it Jules, they're all pretty basic and get the job done, but not all that decorative. I can't wait to see if when it's done!

      Delete
  6. Great. Can you help me figure out why my blog seems to be crawling? >.<

    Very helpful tips, Kelly. Now, does this work on Wordpress, too?

    ReplyDelete
    Replies
    1. Sadly Joy, I'm not a miracle worker. Is your hosting with Go Daddy as well? Hopefully they pull their finger out and sort themselves out soon.

      I'm not sure Joy, I don't have much experience with Wordpress. But I think as long as you have somewhere to host the font file, then you should be able to use it on Wordpress and websites other than Blogger. One of the things I love about Blogger, it's just so easy.

      Delete
  7. You are so amazingly gifted with coding and HTML! Seriously. I just ventured into this whole self-hosting journey; it was so frustrating on so many levels. I'm glad that at the very least, I am able to keep a steady site ha ha! But this post is awesome, thank you for sharing your knowledge with us! <3

    ReplyDelete
    Replies
    1. It's mostly just through trial and error Claudia, so I thought I'd pass on little bits that I know, just to save anyone else from making the same mistakes I did. You're much braver than I am. I was going to move to Wordpress, bought a year worth of hosting and the dashboard and lack of my own experience just turned me off. I'll work on it though and see if it's worth it.

      Delete
  8. Eep, thanks Kelly! Unfortunately, I only use the free Wordpress and can't edit the HTML/CSS. Dammit. But anyways, I'll be using the websites you suggested! And those banners are pretty! Did the font you used come with the swashes? :)

    ReplyDelete
    Replies
    1. It didn't, two separate fonts actually. It's hard to find good swashes these days.

      The free Wordpress is really limited isn't it. Have you thought about cheap hosting at all? I know Dre at Sporadic Reads is the hosting queen. I'd shoot her off an email and maybe talk about it poppet.

      Delete
  9. Thank you SO SO SO SO SO MUCH FOR THESE POSTS. Seriously. I cannot even begin to express my gratitude. I'm going to completely re-do my blog when I become self-hosted soon, and I have the feeling I'm going to be using these posts a lot for reference. THANK YOU. <3

    ReplyDelete
    Replies
    1. You're more than welcome Kara. Hopefully you can get something out of them, even if it's just inspiration for your new blog design.

      Delete
  10. Fonts man! I have changed my font so many times it's not even funny. Who knew it would be so difficult!!! These post are saving my life (both by eliminating the time and the stress)! Thanks again!!

    ReplyDelete
    Replies
    1. You're welcome Taylor. Hopefully they're easy to understand as well. I remember my first blog design, my goodness, it was terrible. Nothing matched and the font was horribly stock standard as well. it's so nice to have other options though isn't it.

      Delete
  11. YEAH KELLY! You are a designing genius! Thank you for sharing all these wonderful font links! I LOVE Da Fonts, 1001 Free Fonts, and Font Squirrel. (And of course Google Fonts is amazing!) I'll definitely have to check out the other websites you mentioned though! Thank you for sharing this - I always adore your font choices, so it's awesome reading about how you pick them! ♥

    ReplyDelete
    Replies
    1. YOUR designs are brilliant Zoe, I'm just an amateur who loves fonts really. I absolutely love Sky Fonts. It's the easiest way to download Google fonts straight to your PC to use. Only discovered it recently and use it a few times per week. It's awesome.

      Delete
  12. Yay, Kelly! Thank you for this wonderful tutorial and for the awesome freebies! I can change my blog's font anytime I want. :)

    ReplyDelete
    Replies
    1. It's nice to have that freedom to change it quickly and easily isn't it. You're very welcome poppet.

      Delete
  13. I wish this way was easiest for wordpress, but my self hosted wp host has it where I can type in the name of the font (though I may try the equivalent to this how to post when/if it wont let me use specific google fonts. I was wondering if you had any idea how to do this for dafont? Like, how to find the code for something like this? Am I making any sense?

    ReplyDelete
    Replies
    1. I think with most blogs, no matter where you're hosted, can probably use any type of webfont as long as you can host the file somewhere. Is the plug in connected to an affiliate website and won't let you access fonts elsewhere? I get what you mean though. If you want to hit me up on Twitter, I'll ask a few Wordpress geniuses for you and see what I can find out.

      Delete
  14. KELLY YOU ARE THE BEST. Those banners oh lord, they're GORGEOUS. How are you so amazing??? <333 I seriously need to bookmark this page because the whole changing up the font on the blog thing was something that I a) never knew and b) never cared enough to further investigate. BUT I WANT TO NOW! Thank you Kelly! <3

    ReplyDelete
    Replies
    1. You're more than welcome poppet. Not that you need it though, your new blog design is absolutely gorgeous! Love it madly.

      Delete
  15. This is FANTABULOUS! Thank you for teaching me - I'm rubbish at installing Google fonts, but I've wanted to develop the look of my website for a while now, so this is perfect. I'm pinning it for future reference!!
    Beth x
    www.thequietpeople.com

    ReplyDelete
    Replies
    1. So glad you'll be able to get something out of it Beth. Google fonts is awesome isn't it, so many great new fonts being uploaded every day. I plan on exploring it myself soon as well and changing mine up a bit to something a little fresher.

      Delete
  16. These are such fantastic tips Kelly! I was always wondering how to get around such a limited selection of fonts just on Blogger, and now thanks to you I've discovered a whole other world of font goodness to choose from. Thanks again :)

    ReplyDelete
    Replies
    1. You're most welcome poppet. Isn't the entire range awesome! I love the handwritten fonts on there. So easy to use aren't they, that's just another one of the benefits of sticking with Blogger.

      Delete
  17. OH THIS IS SO PRETTY. I wish I'd had this tutorial when I had blogger. Now I have a widget for wordpress, buuuut, it only picks up the crappiest of fonts. *sighs* So I probably will need to pay to get, you know, NICE fonts. Bleh. I love those banners though!! AND THAT FONT.

    ReplyDelete
    Replies
    1. Thanks smushie. I think even with Wordpress, you should be able to still use a wider variety of fonts, as long as the font is hosted I believe. Wordpress is like a foreign language for me sadly, where even subtitles don't seem to help.

      Delete
  18. Google Fonts are awesome aren't they? They're just so pretty and that widget makes them super easy to use. Great tutorial, I'll be sharing this one!

    ReplyDelete
    Replies
    1. Thanks Jeann, and they're awesome. Especially on Blogger where they're so easy to install on your blog as well.

      Delete
  19. You are a life saver!! I have been trying to sort out fonts to suit my blog but I gave up last year, thanks you for making it easier :)
    Naomi @The Perks Of Being A Bookworm

    ReplyDelete
    Replies
    1. Thanks Naomi, hopefully you can experiment with new fonts now and find a new look, although I really like your blog design, so don't go changing it TOO much.

      Delete
  20. Thank you so much for sharing this! I really find is amazing and humbling when bloggers share tips and advice with other people - I always struggle with fonts for my blog, so this will really help me out a lot! <3 Benish | Feminist Reflections

    ReplyDelete

© Diva Booknerd. Design by Fearne.