How to Add Custom Fonts to Blogger In CSS

Now that you have a hot new background and gadget title images, it's time to add the finishing touches to your blog by adding your own custom fonts. On my CSS difficulty level, the coding for this has the potential to be at a CSS Difficult level, due to the amount of customization that can be added to each coding section. Unfortunately, my CSS skills have diminished significantly since my profile editing days on Gaia Online, so I'll be keeping the coding for modifying and adding fonts as simple as possible. If you do want to know how to do more with your font, or any other elements of your blog, than what I am showing please take a look at the CSS Tutorial.

There are actually two methods that can be used to add new fonts to your blog: the first is to add fonts using a web hosting site, and the second is to use either Google Fonts API, or Kernest Font API. Here is where research on outdated sources can mess you up big time. Kevin and Amanda's blog has step-by-step instructions on how to use their fonts on your blog through Host Webs. The major problem with this method is that the information on their blog is a bit outdated. I've tried to use Host Webs, but the "Join" link doesn't work (I've tried to open the link in different browsers on different computers), and you have to pay for the plans. When I did try to use follow the instructions, but substituting Free Web Hosting account with the Host Webs account in the code, the font didn't work. Although they have a wide variety of super cute, quality fonts on their blog, I wouldn't recommend using this method unless you are able to use Host Webs. There is also a fair amount of downloading of scripts and files involved with this method.

For the second method, several blogs and sites that have information about changing your fonts say that Kernest has a few fonts that can be used for free. This is no longer true. Kernest is now Kernest Konstellations, which charges for a subscription. I've never used this site, but if you are willing to pay for a subscription, then feel free to look into it.  For me, blogging is a hobby, and one that I feel can be productive, enjoyable, and presentable without spending money on. Honestly, I prefer to use Google Fonts API mainly because it is free and has a decent font variety, so the instructions that I will posting will be for Google Fonts.

How to Add Images to Gadget Titles Using CSS

In a previous post, I showed how to change or add a custom background and banner to your blog, which was pretty simple, and only required one CSS code. This next step is what I call CSS Intermediate; it has very basic CSS coding, but finding and editing the code can be tricky. Now, I'll show you how to add images to the titles of gadgets like the ones you see on the right and left of my blog.

To begin, go to the Extras section on The Cutest Bog on the Block (TCBotB for brevity's sake) and choose a set that you like, or, if you're feeling creative, you can make your own. Download, extract and then upload your images to an image hosting site, such as Photobucket. Once this has been done, it's time to get a little more complex.

How To Customize Your Blog's Background and Banner

As you can see, I've decided to totally trick-out my blog!  The previous background was one that I had made on my own, along with the header. The other customizations, such as the font and font color, I used the Advanced customization tools. However, after seeing some of the other blogs out there still using the older templates, I really began to realize how seriously lacking the Dynamic Views were in customizations and the ability to add creative content. So, I decided to go old school and switched to the "Picture Window" template.

I found this wonderful background at The Cutest Blog on the Block, which is, by far, the best source of free blog backgrounds and templates that I have been able to find. There are an array of super cute backgrounds for Blogger, Facebook, Twitter, and websites, along with an assortment of page element accessories. While looking for ways to further customize my blog, I quickly found that there is very little up to date, concise information on CSS codes for Blogger. This is why I've decided to create I've decided to make a quick guide for customizing your blog using the new CSS section in the Advanced customizations.