Pages

Friday, April 27, 2012

How to Add Custom Fonts to Blogger In CSS

Now that you have a hot new background and gadget title images, it's time to add the finishing touches to your blog by adding your own custom fonts. On my CSS difficulty level, the coding for this has the potential to be at a CSS Difficult level, due to the amount of customization that can be added to each coding section. Unfortunately, my CSS skills have diminished significantly since my profile editing days on Gaia Online, so I'll be keeping the coding for modifying and adding fonts as simple as possible. If you do want to know how to do more with your font, or any other elements of your blog, than what I am showing please take a look at the CSS Tutorial.

There are actually two methods that can be used to add new fonts to your blog: the first is to add fonts using a web hosting site, and the second is to use either Google Fonts API, or Kernest Font API. Here is where research on outdated sources can mess you up big time. Kevin and Amanda's blog has step-by-step instructions on how to use their fonts on your blog through Host Webs. The major problem with this method is that the information on their blog is a bit outdated. I've tried to use Host Webs, but the "Join" link doesn't work (I've tried to open the link in different browsers on different computers), and you have to pay for the plans. When I did try to use follow the instructions, but substituting Free Web Hosting account with the Host Webs account in the code, the font didn't work. Although they have a wide variety of super cute, quality fonts on their blog, I wouldn't recommend using this method unless you are able to use Host Webs. There is also a fair amount of downloading of scripts and files involved with this method.

For the second method, several blogs and sites that have information about changing your fonts say that Kernest has a few fonts that can be used for free. This is no longer true. Kernest is now Kernest Konstellations, which charges for a subscription. I've never used this site, but if you are willing to pay for a subscription, then feel free to look into it.  For me, blogging is a hobby, and one that I feel can be productive, enjoyable, and presentable without spending money on. Honestly, I prefer to use Google Fonts API mainly because it is free and has a decent font variety, so the instructions that I will posting will be for Google Fonts.



First, go to Google Font API and click "Start Choosing Fonts" to begin.  Then, select the font(s) that you want to use by simply clicking the "Add to Collection" button. Once you have the font(s) that you wan tin your collection click "Use." On the next page, go down to Step #3, and click the "Javascript" tab in the code box. The code that you now see is the code that will be used to "install" your font onto your blog, allowing your blog to recognize this font when we start putting in the CSS codes later. Copy all of the code that you see in this box.
Click "Add to Collection," then "Use"
Click "Javascript," then copy the entire code in the red box
 On your blog, go to Template > Edit HTML, and paste this code right before the <head> code at the beginning of your HTML code. Then save your template, and close.

Find <head>, then paste the code directly above
Now, it's time to add in the CSS coding that will allow you new font to appear on your blog. To do this, go to Template > Customize > Advanced > Add CSS. In order to change the body text (the post text and any gadget body text and footer text), put in this code, changing the "Font Name" to the name of your font, and press enter after the last bracket. The font size can be adjusted by changing the "font-size" value:

body {
font-family: 'Font Name', serif;
font-size: 00px;
}

In order to find the name of your particular font(s) , simply look at the Javascript code and copy the name as you see it in the green boxes on the screenshot below.

Find your font name(s) in the area inside the green boxes
 So, in my case the font name that I want to use for the body text is Sevillana, so my CSS code would look like this:

body {
font-family: 'Sevillana', serif;
font-size: 12px;
}

Notice the way my blog looked before I put in the code, and then after:

Before pasting font code (top) and After pasting font code (bottom)
In order to change the post header font, paste in the code below, changing the name to that of your font. To change the color of the header, put in a color code, which can be found here. Because the post header is a link, you can also change the "hover" and "visited" colors to be different from other link colors by putting in different color codes:

.post h3 { margin: .25em 0 0; padding: 0 0 4px; color: #000000; font-family: 'Font Name', serif; }
.post h3 a, .post h3 a:visited, .post h3 strong { text-decoration: none; color: #000000; }
.post h3 strong, .post h3 a:hover { color: #000000; }

For example, since I chose two fonts, and I wanted my post header font to be different from my post body font, I used this code to only change the post header:

.post h3 { margin: .25em 0 0; padding: 0 0 4px; color: #4c1130; font-family: 'Audiowide', serif; }
.post h3 a, .post h3 a:visited, .post h3 strong { text-decoration: none; color: #bd0bbd; }
.post h3 strong, .post h3 a:hover { color: #4c1130; }

Post header is different from post text
With this blog, I decided to change the font of individual elements,  such as the date header, and the "Older" and "Newer" posts links. The list of elements that can be changed on your blog is endless, so I'll just show you how to change a few of these extras.

To change the date header font, paste in this code:

h2.date-header {
font-family: 'Font Name', serif;
margin:1.5em 0 .5em;
}

To change the "Older" and "Newer" posts links, paste in these codes:

#blog-pager-newer-link {
float: $startSide;
font-family: 'Font Name', serif;
font-size: 00px;
}

#blog-pager-older-link {
float: $endSide;
font-family: 'Font Name', serif;
font-size: 00px;
}

To change the Blog title and description font, respectively, paste in these codes:

#Header1 h1 {font-family: 'Font Name'; }  
#Header1 {
font-family: 'Font Name'; 
font-size: 00px;
}

To change the Gadgets titles fonts, use the same instructions as in this tutorial to find the Gadget ID, but change the code to:

#GadgetID h2 {
font-family: 'Font Name', serif;
font-size: 00px;
}

If you want to make each gadget title text a different color, add color: #000000; to the code for the individual gadget ID.

IMPORTANT: Only change the values that are in red. Don't forget to put in the '' before and after the font-name. Most of the fonts on Google Web Fonts work with most browsers and in the CSS coding, however, I have noticed that fonts that have two or more words in their names, such as "Great Vibes," either don't work at all in CSS, or they are only able to be viewed using certain browsers. Lastly, if I have omitted the font color or size characteristic from a particular code, it is because this characteristic can be changed through one of the Advanced menus in Blogger's Customization section.

And now you have a fully customized completely pimpin' blog of your own!

Tags:
Follow on Bloglovin

17 comments:

  1. Rudolf MauritsFebruary 26, 2013 at 8:06 PM

    very nice information! I’ll integrate it to my blog soon. Thanks

    ReplyDelete
  2. Dawn MartensJune 12, 2013 at 6:03 PM

    Wow, finally found something helpful.
    People have tried to help me with this MANY times, but I always give up, cuz I end up not being able to follow along. This made sense.
    and I got it done!

    now another question. this changes everything in the Template area.
    Is there a way do add the fonts to the font section in NEW BLOG POST?
    Because sometimes, when I do blog tours, I have multiple things going on in one post. it would be nice to be able to separate them with different fonts, other than the basic ones there, and the overall body fonts from this template thing.

    ReplyDelete
    Replies
    1. Champagne StarJune 13, 2013 at 3:34 PM

      I'm glad you found this helpful! I searched everywhere for a tutorial this simple and comprehensive too, but couldn't find one, so I made my own!

      To your question: Unfortunately, I only know how to do basic coding, so if there is a way to do this, I have no idea what it would be. However, I would suggest either continuing to search other blogs and tech site/forums for more information on if this is possible or not, or put a boundary between the sections of a post. The easiest way to do this would be to either find or make a boundary, save it as a JPEG, and add it to the post like you would a picture. This way you can section off multiple things in you post, and still have it looking nice. Hope this helps!

      Delete
  3. SherlynJune 19, 2013 at 6:21 AM

    Hello! Thank you for your most helpful post!

    I was wondering, what's the CSS code to change the font of your attribution widget? I'm referring to the font of the "__(template name)__ template. Powered by Blogger". Thanks!

    ReplyDelete
    Replies
    1. Champagne StarJune 22, 2013 at 10:33 AM

      Hi Sherlyn,

      Hmm..., personally, I don't know how to do this, but I did find this page that may help you: http://themeid.com/help/discussion/2472/how-to-change-footer-font-color/p1

      Delete
    2. SherlynJune 24, 2013 at 1:06 AM

      It did help, thank you so much! :D

      Delete
  4. AnonymousDecember 5, 2013 at 12:38 AM

    I found your blog when I was looking for a different sort of information but I was very happy and glad to read through your blog. The information available here is great.
    website design

    ReplyDelete
  5. UnknownFebruary 5, 2014 at 2:40 AM

    THANK YOU SO MUCH! This helped a ton!

    ReplyDelete
  6. UnknownJanuary 31, 2015 at 5:56 PM

    You actually make it seem really easy together with your presentation but I find this matter to be really one thing which I think I would never understand. It seems too complex and extremely large for me.

    ReplyDelete
  7. Champagne StarMay 28, 2015 at 11:58 AM

    Thanks! I'm glad you found it helpful.

    ReplyDelete
  8. RenaeJuly 1, 2015 at 1:53 PM

    Thank you so much! I searched and searched, but this is what finally helped me!

    ReplyDelete
  9. AnonymousNovember 9, 2015 at 10:30 PM

    I tried this but some of it didn't work. Any ideas on how to change entire page font, not just certain things? I'm only trying to change it all to one custom font, not multiple.

    ReplyDelete
    Replies
    1. Champagne StarNovember 12, 2015 at 9:05 AM

      Hmm, well you could use the examples above and then keep all the font type the same. There is a code for making the entire blog's font the same, but I don't know what it is. Try searching for something like "Blogger font code" in Google to find the exact code. Sorry I couldn't be of much help.

      Delete

I love comments, so don't be shy!!

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)