How to Add Custom Fonts to Blogger

Posted by Unknown on
image

Adding Custom Fonts to Blogger can improve the look and feel of your blog. Before getting into font embedding lets know how this works.

In your templates you can use any font you want, but these would be properly displayed only if the viewer has those fonts installed on his/her System.

Font embedding Techniques allows you to use any font on your Blog and these fonts will be viewable to the viewers even if they don’t have the font installed on their Systems.

@font-face is the  best Font Embedding technique in my opinion but it wont  easily work with  externally uploaded fonts unless the server has special Access Control Headers for your blog .(blogger wont allow you to upload the font to it’s servers :P ) So here are certain simple alternative  methods to add custom fonts to your blog. These are listed out in an order of my preference

  1. Google Font API
  2. Kernest Font API
  3. Cufon JavaScript Font Embedding

1. Google Fonts API.

This is the best and robust method to add custom fonts to your blogger blog. It uses the @font-face technique but you needn’t worry about the backend things. You can see a list of available Fonts at the Google Font Directory .

When you select a particular Font, Google will provide you with the Embed Code which looks like

image 

<link href='http://fonts.googleapis.com/css?family=FontName' rel='stylesheet' type='text/css'>

Copy out this code and you have to modify it by changing > at the end of the code to />

That is you have to change the code to something like

<link href='http://fonts.googleapis.com/css?family=FontName' rel='stylesheet' type='text/css'/>

Adding the Google CSS Embed Code

Now Go to your Blogger >  Design  > Edit HTML page

Find <head> and immediately below that line paste the edited Embed Code and save your template.

image

Using This Custom Font on your Template

You use this Custom Font in any of your CSS Font Definitions. For example if you want to change the Post Title Font to this one, then you can use the following CSS code

h3.post-title {font-family: 'CustomFontName', serif;}

In This definition serif is a fallback font which will be used in case the something bad happened when loading the custom font. (It is a safe practice to include at least one Fallback font and it  will help in tackling unexpected behaviours) After editing the above CSS with the proper Custom Font name,add the code above the closing ]]></b:skin> tag in your template.

image

You can alter other fonts in your Template by modifying the font-family definitions in your template.

How to use Multiple Custom Fonts in your Blogger Template

When you use multiple Custom Fonts, then there is no need to add the Google CSS embed codes multiple times.You can load multiple fonts using a single line of code.

For example if you are planning to use  3 custom Fonts Tangerine,Inconsolata, Droid Sans, then you can load all these three fonts using a single embed code 

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans"/>

ie, just separate the multiple fonts by a |

Now to apply these fonts on your template, you can use these in your template CSS

For example you may use something like 

h3.post-title {font-family: 'Tangerine', serif;}
#header h1 {font-family: 'Inconsolata', serif;}
.sidebar h2 {font-family: 'Droid Sans', serif;}

 

Extra Settings

By Default the Google API provides the Regular version of the Font. If you need specialised versions like  bold, italic or bold and italic, then you have to append :b  , :i or :bi to the font name in the  google font embed code.

For example, if you need the blold + italic version of the Tangerine font, then you should have used the following embed code

<link href='http://fonts.googleapis.com/css?family=Tangerine:bi' rel='stylesheet' type='text/css'/>

If you like to play around with codes , then refer the Google Font API Documentation

You might also want to refer the Google JavaScript Web Font Loader, which provides you with more Fonts and Font Providers.

These Web Fonts would be much useful for Non-English Blogs, if the other language Fonts get added to the  Font Directory

2. Kernest Font API

1.Create an Account and signup at Kernest

2.Browse through the Fonts at Kernest.

3. Add your  domain url by clicking on the Domain Embed Url

image

4.If the Font is free you will find the embed code below the font demo.

image

Copy the Style Sheet code from there(as shown in the image above)

5.Login to your blogger Template and Go to Design > Edit HTML and paste this code just below the <head> tag in your blogger template and save it.

image

6. Now you can use this Custom Font name inside your CSS style Definitions.

For example , if you need to change the font style of the post title, add the following code

.post-title h3 {font-family: 'NAME_OF_THE_FONT_U_ADDED' , serif;}

just  above the closing ]]></b:skin> tag after editing the code with the custom font name that you added.(serif is the fallback font which will be used if some misbehaviours prevented your custom font from loading)

image

You can use this Custom Font name in any font style definitions in your template

 

3. Cufon Font Embedding

1.You should have the font with you in TTF , OTF or PFB formats.

2.Now Goto the Cufon Generator Page and browse for your Font in the Regular Type Face section

Make  sure that “The EULAs of these fonts allow Web Embedding” .

Accept the terms and click the “Lets do it” Button

3. You will be prompted to download a JavaScript file. Save it to your computer.

4.Right Click on this link and Click on the Save Link as option and save this JavaScript File to your PC.

5.Upload these 2 JavaScript files somewhere and note down their urls.

6. Now Goto Blogger Design > Edit HTML and just below the <head> in your template , add the following code after editing the code with the proper urls of the two script files

<script src="url_of_cufon-yui.js" type="text/javascript"></script> 
<script src="url_of_the_font.js" type="text/javascript"></script> 


<script type="text/javascript"> 
 Cufon.replace('.post h3'); 
</script>

7. Now just before the closing body tag </body> , add the following code(IE fix)

<script type="text/javascript"> Cufon.now(); </script>

I would advice you to use the Google Font Embedding API , but the Fonts available on them are now limited. Kernest also has a good Collection of Fonts. If you use Cufon make sure that you have the rights to use the font. Cufon will allow you to use virtually any font but its not as robust as the other two methods.

 

If you have any doubts regarding Font Embedding, please let me know via the comments and i will try to help you out.

Comments

  1. SirEvoMay 22, 2010 at 2:26 PM

    Hi, I dont want a custom font. I just want to change my default font but I dont know the line in "Edit HTML" section. Can u show me?

    ReplyDelete
  2. chugyMay 22, 2010 at 3:26 PM

    thanks for information.....i try.!!!
    Good blog and good Post thanks

    ReplyDelete
  3. AnonymousMay 22, 2010 at 3:29 PM

    @SirEvo

    you can change font in css body tag

    Ex:-
    body{
    background: #000000 ;
    font-family: Trebuchet Ms, Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 0px;
    margin-top: 0px;
    color:#666666;
    line-height:17px;
    }
    just change fontfamily
    ^_^

    ReplyDelete
  4. PigMay 22, 2010 at 4:21 PM

    interesting..
    tks for ya post

    ReplyDelete
  5. Hack TutorsMay 22, 2010 at 8:53 PM

    Now this is great change on my blog. Thanks for sharing :) See my change, www.hacktutors.info

    ReplyDelete
  6. SirEvoMay 23, 2010 at 1:23 PM

    Thanks but I alread know there :(
    If I change that line, whole blog's font changes. I just want to change my post's font. How can I do that? Which line for post's font?

    ReplyDelete
  7. UnknownMay 23, 2010 at 3:31 PM

    @SirEvo - add this just above above the closing ]]></b:skin> tag

    .post {font-family: Trebuchet Ms, Arial, Helvetica, sans-serif;}

    ReplyDelete
  8. SirEvoMay 23, 2010 at 5:21 PM

    Thank you very much

    ReplyDelete
  9. @botol_kecapSMay 26, 2010 at 7:01 PM

    Umm,,, example please,,, I can't find examples here,,,

    ReplyDelete
  10. Autocratic JALALMay 31, 2010 at 2:27 AM

    too complicated
    example plz

    ReplyDelete
  11. William TellJune 1, 2010 at 8:39 PM

    When you said the other solutions were more robust than Cufon option what did you mean?

    Also not sure if this is the source, but since i changed to Cufon method it appears as though my browser IE8 appears to crash more often?

    http://williamtellstradecraft.blogspot.com

    ReplyDelete
  12. VarunJune 2, 2010 at 10:58 AM

    Customise Your Comment Form ...hmm.... with mouse over effect!
    http://bit.ly/changecommentform

    ReplyDelete
  13. ColorizeTemplates.comJune 3, 2010 at 1:07 PM

    nice info, thanks

    ReplyDelete
  14. QualityJune 6, 2010 at 3:34 PM

    Hi,Aneesh
    I have downloaded this theme for Blogger( Revolution Church Updated V1 Template).I cannot remove the ad banner found between posts and Header banner. Is there a way to remove it and what part of the code do I remove? Now i want to change Denim Designer template to Revolution Church Updated V1 Template.My blog url www.livemarketcues.com.Help me soonnnnnnnnnnnnnnnnnn.................
    Advace THANKS

    ReplyDelete
  15. panoetJune 6, 2010 at 6:02 PM

    I want to back link your post to my blog, but I cant find link to this post. Where do you put "link this post"? Its make me easy to back link your post.

    ReplyDelete
  16. Seo UpgradeJune 7, 2010 at 8:33 PM

    Nice info dude !

    ReplyDelete
  17. QualityJune 12, 2010 at 8:09 AM

    Aneesh, it not working in draft.blogger and edit html

    ReplyDelete
  18. wetlookasianJune 13, 2010 at 11:47 AM

    please help me how to make improvement on blogs

    ReplyDelete
  19. Glass BottlesJune 16, 2010 at 8:47 PM

    Thanks for sharing, this has been a long time question mark in my blogging. I have seen others changing their fonts, but I could never figure it out!

    ReplyDelete
  20. michkhooJune 19, 2010 at 12:12 AM

    Great, costum fonts will improve ease of understanding my blog.

    ReplyDelete
  21. Gustavo ReisJune 21, 2010 at 11:11 PM

    Hello teacher!

    God afternoon!

    Google Font, Kernest, Typekit and Cufon don't have Delicious fonts. How do I add the Delicious fonts to my blog? My blog system is Blogger.

    Thank you!

    I hope your answer!

    ReplyDelete
  22. UnknownJuly 4, 2010 at 5:57 AM

    Thank's Bro..
    I Like It

    ReplyDelete
  23. Rakesh SolankiJuly 9, 2010 at 11:13 PM

    One of my friends want to know this trick, Thanks i can now tell him.

    ReplyDelete
  24. FahmiJuly 18, 2010 at 12:16 PM

    thanks...!!

    ReplyDelete
  25. Miso-adminJuly 19, 2010 at 5:59 PM

    Hi, first method don´t work in IE.. I have IE 8 and still don´t work.. :(

    ReplyDelete
  26. Nia SillentJuly 25, 2010 at 9:29 AM

    hoho i'm dying to have a nice font in my blog but the instruction was too complicated...aiyahh~

    ReplyDelete
  27. ginzangaihteJuly 28, 2010 at 7:54 PM

    It's very informative......... and valuable

    ReplyDelete
  28. AnonymousJuly 31, 2010 at 6:27 PM

    Thank you very much! If it was not for this post, i would not have made my blog lay-out sexier than ever! However, instead of adding the fonts individually to the locations (like the h1, h2, etc) where you want them, you can just modify the ones in the "Variable Definitions", the part where, as i have discovered, modifies the blog lay-out universally. The modification seems to work just like the Template Designer function.

    Just find the locations where fonts are applicable, and replace those that are highlighted between apostrophes ('') with the name of the fonts you have chosen to use in your blog.

    It worked for me, fortunately. :-)

    ReplyDelete
  29. K Gowtham ReddyAugust 1, 2010 at 11:27 AM

    help me to upgrade my blog with corporate look plz

    ReplyDelete
  30. sidharthAugust 8, 2010 at 12:26 AM

    nice but i want the sing in form on my blog.

    ReplyDelete
  31. Modelle firenzeAugust 10, 2010 at 4:50 PM

    This blog is really awesome and so much a lot of informative post. Truly I like it Bcoz I fully impressed to it...

    ReplyDelete
  32. Rajesh Datt BhattAugust 12, 2010 at 6:16 PM

    WOW! great blog, i got more & more tips & tricks then ever before...

    ReplyDelete
  33. Seat CoverAugust 26, 2010 at 4:01 AM

    Thank you for sharing with us those useful informations. Im sure I will goin to use it on one of my sites.

    ReplyDelete
  34. AnonymousSeptember 21, 2010 at 8:33 AM

    Best tutorial on customizing a blog!!!

    ReplyDelete
  35. JackieOctober 1, 2010 at 4:35 AM

    Thanks!
    Is it possible to use two cufon fonts at the same time on blogger?

    ReplyDelete
  36. AnonymousOctober 25, 2010 at 1:30 PM

    I just couldn't get this to work at ALL, no matter what I tried. Ganymede's Prisoner's suggestion worked beautifully though.

    ReplyDelete
  37. kasut macbeth merahNovember 26, 2010 at 11:31 PM

    there's an error.

    help me please.

    "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "subset" must end with the ';' delimiter."

    ReplyDelete
  38. AnonymousNovember 28, 2010 at 6:02 PM

    right after i paste



    link href='http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica&subset=latin' rel='stylesheet' type='text/css'/


    the template cannot be saved, it shows error message;

    "We were unable to save your template
    Please correct the error below, and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "subset" must end with the ';' delimiter."

    Please help me, TQ.

    ReplyDelete
  39. AnonymousDecember 6, 2010 at 6:38 PM

    Me to....it just keep telling the same thing. TQ

    ReplyDelete
  40. TumpalDecember 28, 2010 at 1:38 PM

    nice blogg.....

    ReplyDelete
  41. carrboro ninjaJanuary 4, 2011 at 3:17 AM

    I'd like to set the fonts for a specific html widget, not the entire blog...any tips for how to accomplish this?

    ReplyDelete
  42. UnknownJanuary 4, 2011 at 9:27 PM

    @Every Widget will have an ID.
    Eg: this widget
    <b:widget id='HTML1' locked='false' title='Some Title' type='HTML'/>
    has the id HTML1
    So if you want to use the custom font for this particular widget, you should add this to your template's CSS part.
    #HTML1 {font-family: 'CustomFontName', serif;}

    ReplyDelete
  43. LittleWeirdMonsterJanuary 10, 2011 at 7:29 AM

    I'm confused at the Using This Custom Font on your Template part. I don't know where to place the code, and i always get:
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The character sequence "]]>" must not appear in content unless used to mark the end of a CDATA section.

    How do i overcome this?

    ReplyDelete
  44. b.b.January 11, 2011 at 1:09 AM

    I followed the directions for the Google fonts, but when I applied it to my blog, nothing changed, even after I saved it...what am I doing wrong?

    ReplyDelete
  45. A. Leigh PhotographyJanuary 12, 2011 at 7:42 PM

    i don't know what i'm missing on here. i've done it to change my date header & post title, and i see nothing. i'm a complete beginner at trying to do anything in html, but i feel like i've followed the directions 10 times. any help.

    ReplyDelete
  46. A. Leigh PhotographyJanuary 13, 2011 at 9:22 AM

    after 2 hours of trying to implement my new font, i almost gave up. then i tried what Ganymede's Prisoner said, and it worked. i seriously got a tear in my eye!

    ReplyDelete
  47. David HatfieldJanuary 28, 2011 at 1:41 AM

    I don't know what you mean by uploading javascripts. Thats the step that screws me up.

    ReplyDelete
  48. Hadvianti FuYohFebruary 15, 2011 at 9:10 AM

    fiu~ thanks a lot!! it worked!!

    ReplyDelete
  49. waltaMarch 6, 2011 at 1:42 AM

    was not able to get the font exchanged with CUFOD method with following two files with the above guide:
    http://sites.google.com/site/wwferrari/blogger/Stterlin_500.font.js
    http://sites.google.com/site/wwferrari/blogger/cufon-yui.js

    maybe it's because the " are changed to ' after saving or other reason. Anyone can help ?

    ReplyDelete
  50. Just A Little Peanut Food Allergy BlogMarch 15, 2011 at 7:53 PM

    Is it possible to add a FONT just for 1 line of text. Ex- I want a post to say QUESTION SERIES
    in the first line of the post but using a fun font.
    Then the rest of my post would appear in the normal font for that post.
    How can I do this? I am beginner but can follow directions.

    ReplyDelete
  51. kiraguMarch 25, 2011 at 9:02 PM

    Hi i need help editing my sidebar widgets.I want to change the font and font size while using a custom template but I cant find the code responsible for this within the xml.

    ReplyDelete
  52. NeenaApril 2, 2011 at 9:57 PM

    Hi, thank you so much for the guide.
    I was wondering if you can help me here.
    using the cufon option as you mentioned; only header font and post title font changes.
    what if i want to change top menu font and side bar title font too with the same option. what should i add then? Please help!
    Thank you.

    ReplyDelete
  53. UnknownApril 30, 2011 at 4:46 PM

    I tried this and it didn't work on my template. Any suggestions?
    I would like to get that fancy font off.
    http://www.quicktattletails.com/

    ReplyDelete
  54. HoneybeeMay 22, 2011 at 9:41 PM

    awesome! thanks for sharing

    ReplyDelete
  55. Paul SantoshJune 10, 2011 at 3:47 PM

    Can I change the entire blog's font via Cufon!!!?????

    ReplyDelete
  56. AdminJune 23, 2011 at 10:24 AM

    always reject once i did the same instruction. I am going to use Khmer Font to my Cambodian Readers. But once I past that code it said

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "subset" must end with the ';' delimiter.

    Please help..

    ReplyDelete
  57. RunningOnCoffeeAugust 19, 2011 at 7:24 AM

    Thank you so much, the demonstration of where to paste the code in the template was very helpful!!

    ReplyDelete
  58. UnknownAugust 20, 2011 at 5:38 AM

    Hi i wanna to know how to add the other language i mean the karen font for bloger if u know please tell as.. thank..

    ReplyDelete
  59. paddle to shoreAugust 23, 2011 at 9:46 AM

    Hello,

    First off, thank you for posting this tutorial. It worked without any problems. I used the Cufon Font Embedding method. I was wondering how I would use this same font on my date / blog posts and labels area.

    Thank you very much
    Andre

    ReplyDelete
  60. A CharkNovember 4, 2011 at 2:27 PM

    cufon it's not working on Burmese Unicode script there is a sample http://monunicode-fonttest.blogspot.com/2011/11/unicode-testing.html

    ReplyDelete
  61. AMMARNovember 6, 2011 at 8:41 PM

    Very useful trick..

    ReplyDelete
  62. UnknownNovember 24, 2011 at 9:27 AM

    Hello there i want to use a custom font i created HOw to use it in bloggeR???? any ideas -geekspot.in

    ReplyDelete
  63. Dida LiydaDecember 16, 2011 at 7:27 PM

    it doesn't work on mine.

    ReplyDelete
  64. FaezJanuary 27, 2012 at 1:43 PM

    thanks.very helpful...

    ReplyDelete
  65. Syahri Ramadhan WiraasmaraFebruary 7, 2012 at 8:59 AM

    ummm, sorry...i use google font api, but it doesn't work on my blog...can you help me?

    ReplyDelete
  66. KathrineMarch 3, 2012 at 11:55 AM

    Thank so much for the post.

    Read 2-3 articles with no help. Solved my problem with this one.

    Thanks

    ReplyDelete
  67. ViolaMaoJuly 6, 2015 at 5:24 AM

    Thanks so much! I've tried adding a Google web font before by myself, but I never knew I needed the slash at the end. I did it with my blog and now it works. Yay!
    violamaomeowsings.blogspot.com

    ReplyDelete

Post a Comment