I have been blogging for nearly 2 years now and for the life of me I could never figure out how people changed their blog fonts. I thought I had to change the template to have a good font because let's be honest the default fonts blogger has are not the most admired. I spent nearly two hours last night searching and searching how to change blog fonts and I found it. I spent the next hour laughing at myself for not really learning this sooner, I am no expert nor am I code savvy but this is so easy you will kick yourselves if you didn't know or hadn't kicked yourself already. As I try to continue to learn things about blogging that I did not really put much thought into I am releasing a few pounds (££) later that these are things that I could have done myself and didn't have to pay anyone to do it for me. I wish I had learned some of these Blogging DIY tips sooner but nevermind I am learning now and passing on the little knowledge I have acquired.
Today's Blogging DIY is how to add Google fonts to blogger (I can do wordpress if people request this) template in a few steps and you don't even need a tech genius you just need to backup your template. Thank you for the wonderful feedback on How to create a favicon (Tab Icon) for Blogger and for Wordpress posts.
Step 1: Visit Google fonts page and browse, then choose the font (s) you want to add to your blog. Now for the purpose of this post I will show you how to add one font and if you request I can show you how to add multiple fonts.
Step 2: The font you have chosen, click on 'quick-use' - thats the middle box with the small arrow inside pointing towards the right. This will open up a new page with the chosen font and the styles available for the font i.e. curve, italic, bold etc.
Step 3: Scroll down and copy the code, example "" for some sites you need to add a forward slash (/) AFTER the final apostrophe and BEFORE the final bracket.
Step 4: Go to blogger dashboard, open up your blog template and click on edit HTML. Find your fonts code (will look like above only difference is type of font e.g. above is open+Sans), you can also search for this by doing ctrl F in the template and searching for fonts. My fonts code was in line 5 of the code in the template so start there.
Step 5: Replace your current font code with the new code from google fonts page, remember to save. Then ctrl F and search for font-family, once found copy the final code on google fonts page and paste the whole font-family line e.g replace the current font-family line code with "font-family: 'Open Sans', sans-serif;" Remember to save after this and you're done, refresh your blog and they should be functional.
If you want all the font-family to be using the new font then change all by scrolling down (usually kept in same section of template) but if you want didnt fonts then in Step 2 instead of 'quick use' click add to collection as many fonts as you want reflected in the blog as default. Blogger will then create one code like in Step 3 but will list the fonts included. In the CSS part of google fonts page it will list the font-family individually and you need to choose which font for which area. I had noticed for me my blog title doesn't change no-matter what and since am not code savvy I am leaving it as it dont want to mess anything up. IF you want your blog body (so the post) to be certain font then choose from the font family in your collection and same applies for the side bar, back/forward pages etc.
I hope this was helpful and on too confusing, if you try it let me know and if you need help let me know as well I am happy to help.
