DESIGNING YOUR BLOG                            “How to Add Custom Fonts to                           Blogger with Google W...
Custom Font for your Blog Post TitleWednesday, January 2, 13
Why would you want to add your own font to                  your blog?                       You want your blog design to ...
Visit Google Web Fonts and browse through the huge selection of fonts available.     Add the fonts youd like to use to you...
Next youll need to add a link                           to the dynamic CSS file which                           will impor...
Log into your Blogger dashboard and choose    Template -> Edit HTML.Wednesday, January 2, 13
Search for the opening <head>                                                         tag. Immediately below this         ...
Now, log into your Blogger dashboard and choose    Template -> Click Customize.Wednesday, January 2, 13
Specify the web fonts in your CSS  The best way to achieve this is by adding CSS code in the Advanced  section of the Blog...
Thank you!Wednesday, January 2, 13
Upcoming SlideShare
Loading in …5
×

How to Add Custom Title Fonts to Blogger Blog

17,994 views

Published on

http://www.bloggerial.com/2013/01/how-to-add-custom-title-fonts-to.html

1 Comment
0 Likes
Statistics
Notes
  • See the full blog post here: http://www.bloggerial.com/2013/01/how-to-add-custom-title-fonts-to.html
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
17,994
On SlideShare
0
From Embeds
0
Number of Embeds
13,683
Actions
Shares
0
Downloads
0
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

How to Add Custom Title Fonts to Blogger Blog

  1. 1. DESIGNING YOUR BLOG “How to Add Custom Fonts to Blogger with Google Web Fonts” JANUARY 2nd 2013 www.bloggerial.comWednesday, January 2, 13
  2. 2. Custom Font for your Blog Post TitleWednesday, January 2, 13
  3. 3. Why would you want to add your own font to your blog? You want your blog design to be uniqueWednesday, January 2, 13
  4. 4. Visit Google Web Fonts and browse through the huge selection of fonts available. Add the fonts youd like to use to your "Collection"; these will then feature in the blue "collection" bar which appears at the bottom of the page (click on the title to reveal/hide this section).Wednesday, January 2, 13
  5. 5. Next youll need to add a link to the dynamic CSS file which will import your Google Web Font selections for use in your Blogger template. On the Google Web Fonts page, scroll down to the third section which features the code you need to paste into your site: Copy this code to your clipboard, or paste into a text file, to use shortly. This code will be used later (in slide 9).Wednesday, January 2, 13
  6. 6. Log into your Blogger dashboard and choose Template -> Edit HTML.Wednesday, January 2, 13
  7. 7. Search for the opening <head> tag. Immediately below this line, paste the code you copied from the Google Web Fonts page. Youll need to "close" the CSS link tag with a forward slash “/” or youll receive an error message when you try to preview or save your changes. Now save your template. To give you an example, heres the original code generated for the web fonts example in this post.Wednesday, January 2, 13
  8. 8. Now, log into your Blogger dashboard and choose Template -> Click Customize.Wednesday, January 2, 13
  9. 9. Specify the web fonts in your CSS The best way to achieve this is by adding CSS code in the Advanced section of the Blogger Template Designer. For example, to use your desired font for the blog title, I could add this code (see slide 5 to see where to get the code for this): h3.post-title {font-family: ‘Anahoim, sans-serif;} Dont forget to save your changes once youre happy with your new fonts!Wednesday, January 2, 13
  10. 10. Thank you!Wednesday, January 2, 13

×