{Blogging DIY Series} How to Add google fonts


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.


Labels: ,

::The Myrabev Life::: {Blogging DIY Series} How to Add google fonts

Wednesday, January 07, 2015

{Blogging DIY Series} How to Add google fonts


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.


Labels: ,

20 Comments:

At 7 January 2015 at 05:08 , Blogger ananda said...

love fonts and can spend all day on them! hope you will share some of your favorite! =)

 
At 7 January 2015 at 06:15 , Blogger Anosa said...

Thanks Ananda, I will share soon I too love fonts but still working out what looks good and trying to learn how to adjust the sizing throughout the blog lol.

 
At 7 January 2015 at 11:04 , Blogger Unknown said...

This does look pretty easy! It always seems like some things that should be simple- such as changing a font- are the most difficult to learn how to do, so guides like this are extremely helpful.

 
At 7 January 2015 at 11:13 , Blogger Rebecca Swenor said...

This is awesome information on Google fonts. I have never done this before so this will come in handy for sure. Thanks for sharing.

 
At 7 January 2015 at 14:26 , Blogger Unknown said...

Thank you for sharing this aawesome tips! It looks like easy but I think I can do it.

 
At 7 January 2015 at 14:30 , Blogger Fiona said...

This is such a great tutorial Myrabev. I wish I could change the font on my blog, the person who designed it has it set up so I can't change the font or background :/

 
At 7 January 2015 at 17:08 , Blogger Unknown said...

I love it when people share tutorials on how to do things to make blogging simpler. I don't understand why template designers don't incorporate better fonts for their templates, but it's nice to now be able to change the font without too much trouble. Thanks for sharing.

 
At 7 January 2015 at 19:26 , Blogger joy said...

When I was on Blogger I never changed my fonts. I didn't realize it was this easy! I'd be interested in a wordpress tutorial if you ever get the time. :)

 
At 7 January 2015 at 20:31 , Blogger CourtneyLynne said...

Lol.... I had a blogger blog for like a month before I started this one and ughhh... The fonts they had to choose from not great at all!

 
At 7 January 2015 at 21:43 , Anonymous Terri Ramsey Beavers said...

I've been wondering how to add Google fonts. I see so many sites that use the cutest fonts that I want to use but never knew how until now.

 
At 7 January 2015 at 22:54 , Blogger Echo aka The Mad Mommy said...

This is very, very useful! I wish I would have known about this when I was still on blogger! Thank you for sharing this with other bloggers!

 
At 8 January 2015 at 00:03 , Blogger DisneyBride2008 said...

I had to figure this out a while ago too. Why is nothing simple?! Haha. It's like everything on blogger that you can do is a huge secret sometimes!

 
At 8 January 2015 at 00:56 , Blogger Unknown said...

I like that you shared this with everyone cuz some people are so stingy and keep all the intel to themselves. I too, had to learn all by myself when I started blogging and always felt like a ding dong :D

 
At 8 January 2015 at 01:45 , Blogger Eileen | www.yesmissy.com said...

Thanks for sharing! I never really thought about changing my font, but now that you've showed me how, I think I might try it out!

 
At 8 January 2015 at 02:45 , Blogger Esther JuLee said...

I use wordpress, so i'm sure it's a little different.. but still similar steps. i am definitely all about typography even though i don't consider myself a great designer. i have some really great designer friends, so i can always draw inspiration from them. i'm trying to change out some of my fonts right now too!

 
At 8 January 2015 at 05:24 , Blogger Franc said...

It's nice that you finally discovered to change the fonts. I'm comfortable with the fonts at wordpress though I would also want some flexibility. I'll check on how to do this with wordpress too.

 
At 8 January 2015 at 15:31 , Blogger Paula - Buenos Aires said...

I just loved the default font on Blogger. Not so much the wordpress one. I´m quite a chicken when changing template code. ;)

 
At 9 January 2015 at 04:19 , Blogger Elizabeth Enjoli Collums said...

I am a new blogger and a big crafter. Every since a started I have wondered how to change the fonts I'm so glad that I saw this post I'm surely going to book mark it so I can use some of my fonts from my crafting.

 
At 9 January 2015 at 06:19 , Blogger Unknown said...

Oh my goodness! You make it look so easy. I have been blogging for four years and I never figured out how they did it either.

 
At 12 January 2015 at 03:59 , Blogger My Thirty Spot said...

Yes! Where have you been all my life! This is such a needed tutorial and easy to understand! Thank you!

 

Post a Comment

Subscribe to Post Comments [Atom]

<< Home