Posts
Key Lime Digital Designs: How to Use Google Web Fonts in Blogger |  |
| How to Use Google Web Fonts in Blogger Posted: 07 Dec 2012 03:34 PM PST
[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. Author information |
| You are subscribed to email updates from Key Lime To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
No comments:
Post a Comment