Mother Ode

January 28, 2013 by Leave a Comment

 

Screen Shot 2013-01-28 at 9.46.28 PM

Filed Under: Portfolio

How to Use Google Web Fonts in Blogger

December 7, 2012 by 11 Comments

 

[I originally wrote this post several months ago as a contributor on Somewhat Simple]

Today I want to show you How To Use Google Web Fonts in Blogger. If you haven’t ever checked out Google Web Fonts you need to! Google offers 500+ fonts that are available for web safe use. What does this mean? That you don’t have choose from the 20 font options Blogger offers in the Template Designer. There are hundreds of FREE web safe options available to you! All you had to do is add a few snippets of HTML code to your blog. Let me show you how ….

1. Go to Google Web Fonts and choose which font you would like to use on your blog. Some of my favorites are Josefin Slab, Amatic SC, and Raleway Thin. Have fun! There are hundreds of options! Once you have chosen the font you would like to use click “Quick Use”.

2. Scroll down and look for the code in the blue box. Copy it.

Here is the code for the font I choose.

<link href=’http://fonts.googleapis.com/css?family=Josefin+Sans’ rel=’stylesheet’ type=’text/css’>

4. Login to your Blogger Dashboard > Template > Edit HTML.

3. Click Proceed.

4. Click CRTL F (PC) or COMMAND F (MAC). Find the code <head> and paste the code from the Google Web Fonts site directly below that.

5. ADD </link>  directly after your Google Web Font code. It should look like this >>>

6. Now click CRTL F (pc) or COMMAND F (Mac). Search for the code ]]></b:skin>  right ABOVE that is where you will place the code to tell Blogger which page element you would like to be in your new font. So if I wanted my post titles to be my new font (Josefin Slab) I would paste the following . (Make sure you replace ‘Josefin Slab’ with your font name.)

.post-title {font-family: ‘Josefin Slab’ ; }

if I wanted my blog content (post body) to be my customized font then I would paste (again, replace with your font name)

.post-body {font-family: ‘Josefin Slab’; }

Here is a screen shot of what my HTML looks like >>>

7. Final step – press preview. If you like what you see, SAVE!

This tutorial is based on the Blogger Simple Template. If you have a custom template your coding will vary slightly. If you have questions leave links to your blog in the comments and I will try to point you in the right direction.

Filed Under: Blog Design, Tutorial

Blog Tutorial Round Up — UPDATED

November 28, 2012 by 1 Comment

I have written quiet a few different tutorials over the life of this blog. Today I want to share an updated list with you, so here they are all most of the tutorials I have ever written [on this blog and others I contribute for] in a centralized location. Hopefully you will find something useful and maybe learn something new! If you are thinking “HTML is not my thing” don’t worry! I promise there are plenty of easy [copy & paste] tutorials below, almost all of them in fact! I know that  stepping out of your comfort zone can be a little scary but if you get stuck just ask for help! You can leave a comment on the tutorial post or on the facebook wall and I will do my best to help you!

Social Media

Blogger

General

Filed Under: Tutorial