{Blogging DIY Series} How to add Google fonts ~ Wordpress


A couple of weeks ago I shared how to add Google fonts to blogger, most of us know how unflattering the default fonts that blogger has and for the entire time I had been blogging I always wondered how some bloggers managed to get really cute fonts. I always thought I had to pay to have anything on my blogs changed and to begin with I did but this year I thought I take the plunge and learn how to do it myself. It's been a really fun process learning all these cool tips and tricks and I have been enjoying sharing them with you and I am sure most of you know already but I hope one or two will find these useful or maybe a new blogger might stumble upon this post in the future and find it useful.

As I mentioned in the blogger version of how to add fonts I am happy to help if you can't understand or something is not working as shown, tweet me and I will help.

The process is easy and for someone like me who is not HTML code savvy if I can do it trust me it's a doodle (you can do it). 

Step 1: Go to Google fonts page and choose the font you want, since with blogger I showed you how to add one font and briefly mentioned how to add multiple fonts I will share how to add multiple fonts to wordpress.


step 2: Once you have chosen the fonts by clicking add to collection, click on review at the bottom of the page (in collection) and it will move you to the next page where all the codes are.

Note: The fonts you have chosen will be embedded in one code line which is what you need for the next step.

Step 3: Copy the code and navigate to your Wordpress template (dashboard - appearance- editor) on the right hand side click on header. Once header code is up find the fonts code to replace with your new code. **Remember to save once you add new code**



Step 4: To add the different font styles you picked out, head to CSS styles (bottom right). In the css styles search for "font-family" and this will display the different areas e.g 'body post, sidebar, header font' etc. All you need to do is head back to Google fonts and choose which font you want for each section and replace what's there with the new font style. **only replace what you adding i.e. Font-family; sanif;curve. Nothing more **

REMEMBER TO CLICK SAVE AND REFRESH YOUR BLOG FOR CHANGES TO APPEAR


If you want to change the size of the font for your posts either add a line below the font style (if not there like mine) or just increase/decrease the font size number.  

I hope you found this DIY post useful, please let me know in comments section also if you need help let me know.

Labels: ,

::The Myrabev Life::: {Blogging DIY Series} How to add Google fonts ~ Wordpress

Tuesday, January 20, 2015

{Blogging DIY Series} How to add Google fonts ~ Wordpress


A couple of weeks ago I shared how to add Google fonts to blogger, most of us know how unflattering the default fonts that blogger has and for the entire time I had been blogging I always wondered how some bloggers managed to get really cute fonts. I always thought I had to pay to have anything on my blogs changed and to begin with I did but this year I thought I take the plunge and learn how to do it myself. It's been a really fun process learning all these cool tips and tricks and I have been enjoying sharing them with you and I am sure most of you know already but I hope one or two will find these useful or maybe a new blogger might stumble upon this post in the future and find it useful.

As I mentioned in the blogger version of how to add fonts I am happy to help if you can't understand or something is not working as shown, tweet me and I will help.

The process is easy and for someone like me who is not HTML code savvy if I can do it trust me it's a doodle (you can do it). 

Step 1: Go to Google fonts page and choose the font you want, since with blogger I showed you how to add one font and briefly mentioned how to add multiple fonts I will share how to add multiple fonts to wordpress.


step 2: Once you have chosen the fonts by clicking add to collection, click on review at the bottom of the page (in collection) and it will move you to the next page where all the codes are.

Note: The fonts you have chosen will be embedded in one code line which is what you need for the next step.

Step 3: Copy the code and navigate to your Wordpress template (dashboard - appearance- editor) on the right hand side click on header. Once header code is up find the fonts code to replace with your new code. **Remember to save once you add new code**



Step 4: To add the different font styles you picked out, head to CSS styles (bottom right). In the css styles search for "font-family" and this will display the different areas e.g 'body post, sidebar, header font' etc. All you need to do is head back to Google fonts and choose which font you want for each section and replace what's there with the new font style. **only replace what you adding i.e. Font-family; sanif;curve. Nothing more **

REMEMBER TO CLICK SAVE AND REFRESH YOUR BLOG FOR CHANGES TO APPEAR


If you want to change the size of the font for your posts either add a line below the font style (if not there like mine) or just increase/decrease the font size number.  

I hope you found this DIY post useful, please let me know in comments section also if you need help let me know.

Labels: ,

21 Comments:

At 20 January 2015 at 09:44 , Blogger Fiona said...

These tutorials of yours are great Myrabev. So great of you to share your knowledge with other bloggers.

 
At 20 January 2015 at 13:03 , Blogger Rena McDaniel said...

Thank you so much for this! I've been a blogger for a year and still didn't know how to do that. I have been able to figure out alot on my own but that one stumped me and I also pinned it to refer back to!

 
At 20 January 2015 at 13:21 , Blogger Samantha Angell said...

Thanks for a great tutorial! I love when tutorials like this actually have pictures of the steps- it makes it so much easier to know you are doing the right thing!

 
At 20 January 2015 at 13:32 , Blogger MikiHope said...

I am on Blogger and had no idea at all that you could change fonts. What a great thing to know-their fiont does get boring. I will attempt this on my own but if the past is any indicator I may need HELP!!

 
At 20 January 2015 at 14:06 , Blogger Mama to 5 said...

That is really neat, I wondered how I could do this. I am just afraid to mess with the coding!

 
At 20 January 2015 at 15:02 , Blogger Franc said...

This is easy to follow in adding google fonts to wordpress. It can give you more flexibility in your fonts and in your posts.

 
At 20 January 2015 at 16:33 , Blogger Carmen Perez said...

Great post. I'm always wondering about the fonts too because even thought I have WP, the font selection is not big for some of the templates :-(

 
At 20 January 2015 at 18:02 , Blogger Marie Moody said...

I have so got to bookmark this page. I love to have different fonts. Every time I go to do it though I always forget how. At least now I'll somewhere to go look it up. Thanks so much for sharing.

 
At 20 January 2015 at 18:20 , Blogger CourtneyLynne said...

This is good to know!!! I'm hoping to switch over to word press in March ;-) this will come in handy then!

 
At 20 January 2015 at 22:42 , Anonymous john lopez said...

Very interesting post. Im on WordPress and I really need it thanks a lot.

 
At 20 January 2015 at 23:19 , Blogger Michele D said...

Just bookmarked this page. This is just great. Thank you for taking your time out to help us. This post is very informative.

 
At 21 January 2015 at 02:52 , Blogger Olivia Schwab said...

These are great tips! Thank you so much for posting these! I'm still getting the hang of getting my blog to where I want it to be!

 
At 21 January 2015 at 02:56 , Blogger Debi Gerhart said...

These are some great tips. thank you for the post

 
At 21 January 2015 at 02:59 , Blogger Lisa Codina said...

This is such a helpful post!! I don't know much when it comes to this part of blogging (my husband takes care of that department!!). I need posts like this that are easy to follow so I can learn something myself!

 
At 21 January 2015 at 04:35 , Blogger Echo A said...

Thank you so much for sharing this trick and for writing this step by step guide! It is so helpful!

 
At 22 January 2015 at 00:12 , Anonymous Cassie said...

Thanks for the great tutorial! I think it is time to add some of these fonts to my blog.

 
At 22 January 2015 at 09:07 , Blogger Sara-Jayne Jones said...

I'm still on Blogger but I'm saving this for when I switch - I am always hunting for tutorials on personalising my blog!

 
At 22 January 2015 at 11:58 , Anonymous Our Family World said...

this is exactly what I need. I am in the process of updating my site and wanted to add a specific font. My designer was going to charge me $50

 
At 22 January 2015 at 19:05 , Blogger Victoria said...

Thanks for the great tips. I had been wondering about this topic but just decided to do some research to learn about it.

 
At 26 January 2015 at 15:57 , Anonymous Badet said...

Thanks for this. I wish I have time to figure this out. But for the meantime, I'll just let my blog's designer to take care of my site :p

 
At 26 January 2015 at 16:33 , Blogger Tanya Lara said...

I will definitely have a look at your past posts. I've just started blogging and finding customizing it confusing!

 

Post a Comment

Subscribe to Post Comments [Atom]

<< Home