109 How to use non-standard fonts with Blogger
May 15, 2010 /

A question I'm asked a lot is how to use @font-face (or other font-replacement techniques) with Blogger.

Now I have to admit, after dozens of failed attempts, heavy experimentation and keyboard-bashing I was almost ready to give up on this and admit defeat.Most of the techniques I tried were either unreliable or simply did not work!

Luckily, @kernest and @abu_farhan came to my rescue via Twitter by pointing me in the direction of Kernest's free (and premium) font-based service.

Why use Kernest?

When designing for the web, @font-face is the most-used technique for replacing boring standard fonts for stylish typographical styles.

Using @font-face we would need to find reliable hosting for the fonts we use in our designs that enables us to utilize fonts across with no domain-restrictive policies in place. There are also permission and copyright issues involved with embedding fonts in web pages, making the whole process even more complicated. Particularly as @font-face doesn't play too well with Blogger hosted sites...

Kernest is a free hosted service which we can use to embed a whole variety of free-licensed non-standard fonts in our Blogger template designs with ease:



Cross-domain issues are not an issue when using Kernest, though you will need to sign up for a free account and add the URLs for the sites on which you'd like to use your fonts so they're properly referenced.

You don't need to download or host any scripts on your own hosting account. Simply add the embed URL generated for your site in your Blogger template code and tweak the CSS for the textual areas of your design where you'd like your non-standard fonts to appear.

Kernest offers a huge variety of free fonts under various licenses including Creative Commons and GPL. Premium fonts are also available on a subscription basis. Browse by font style (ie: Serif, Geometric Sans, Oblique); by designer, font foundry or usage permissions.

Some of Kernest's most popular free fonts include:

Chunk5 by The League of Movable Type (one of my personal favorites).
Komika Axis by Apostrophic Labs
Bitstream Vera Bold by Bitstream
MgOpen Modata Bold by Magenta Ltd.

How to use Kernest with Blogger templates

In order to use Kernest to embed fonts in your Blogger based sites, you'll need to create an account and sign in.

Browse through the archives of fonts available and find a style you'd like to use in your site. Free-to-use fonts will display an "Embed" link beside the example text which opens a pop-up like this:


You can add a new site in which to embed fonts by pasting the URL of your blog in the space provided. After you've added a site, it will appear in the "Your websites" list whenever you are signed in.

Once you've added and selected your site, you'll be presented with the font embed code which you'll need to copy to your clipboard.


Add the font embed code to your template



Go to Design>Edit HTML in your Blogger dashboard and locate the opening <head> tag. Paste your Kernest embed code immediately after this tag, like this:


At this point, it's a good idea to save your template.


How to change fonts for headings, paragraphs and other text areas of your template

With the embed code in place, we can replace particular text areas of our Blogger design with the font(s) we have chosen from Kernest.

This is achieved by referencing the fonts in the CSS font-family tags. For example, to use Romeral for post titles, we could add the following CSS tag just before the closing </b:skin> tag in our Blogger template:
.post-title h3 {
    font-family: 'Romeral';
}

The CSS tags you need to use for your preferred font can be found on the project page for each of your sites. You can access the project page while logged in to Kernest by visiting the "Your Websites" link at the top of every page.

Here are some commonly used text areas within Blogger layouts for which you may want to replace the fonts:














Description Reference
The header section (title and description) #header
Blog title h1
Post titles .post-title
Body of blog posts .post-body
Sidebar headings #sidebar h2
Sidebar text #sidebar .widget-content
Footer section .footer

Once you've added the relevant CSS tags to the <b:skin> section of your template, preview your design in your browser to see the font changes in action then be sure to save your template.


Do you use Kernest for your Blogger template designs?

If you're already using non-standard fonts with Kernest, please let us know of your experiences using this free service and showcase your sites for others to see this technique in action.

Or if you successfully use an alternative technique, I'd love to hear about it so please feel free to leave your comments below.

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

109 comments:

  1. This is great! I've been thinking about using font replacements. Kernest sounds perfect!

    ReplyDelete
  2. I just changed my blogger pos title font. It's so easy ;)

    ReplyDelete
  3. nice share, this font make my blog beautiful

    ReplyDelete
  4. Very nice. It took me a little work to figure out the exact class styles I needed to change, but I liked the "Forque" found at http://tup-wanders.kernest.com/fonts/forque and successfully implemented at http://god-at-the-center.blogspot.com/

    It's implemented on the links at the top and on the post heading.

    ReplyDelete
  5. Thanks Amanda! I've been tweaking my blogger blog for a while but my recent focus has been reducing upload time. I noticed my upload time was getting crazy long so I went back to my template compressed some CSS, changed how I upload some of my imaging, and started using the page break feature in my posts. This dramatically reduced my upload time. I'd like to add some creative font titles but the methods I've found in the past have killed my upload time. Does your method affect upload time????

    ReplyDelete
  6. Hi Amanda,
    The link to 'kernst' seems to be broken. Has anyone else had this problem?

    ReplyDelete
  7. The link is fine. Try refreshing.

    I used to come across other services similar to this too.

    ReplyDelete
  8. @Jennifer - I've not really noticed much of a delay when using Kernest. At most there's been a split second delay in loading the fonts (when I'm online with my 3G dongle), but that's all.

    If your blog template is loading slowly, could this possibly be related to your host? I host all of my javascripts and images with Google and now see virtually no delays even on image heavy templates (Picasa Web Albums for images, Google Code for scripts, Google Pages for everything else).

    If your posts are image heavy, another option would be to reduce the number of posts displayed on the home page and make use of the "more" feature to hide images which appear after your read more link.

    Hope this is helpful to you!

    ReplyDelete
  9. Thanks amanda, as usual, great post! :D never taught i could use @font-face on blogger, gonna try it later.
    wonder what happen when kernest going down, is it the font change to default or it just disappear just like that?

    ReplyDelete
  10. Can't we use Microsoft Small business office live to use font face?
    I have never tried,but probably it should work.
    I have used this free service to host javascript and background images for my blog ,their service is really good.

    ReplyDelete
  11. Just launched from Google:
    http://code.google.com/webfonts

    Very similar to Kernst.

    ReplyDelete
  12. Hey Amanda,

    I am wondering why there is a huge space between
    "Here are some commonly used text areas within Blogger layouts for which you may want to replace the fonts:" AND
    "Description Reference".

    Maybe there is/are things that I am not able to see. I'm glad I found this post.

    ReplyDelete
  13. It's great, then we can make our blog's fonts exactly same with Google Adsense's fonts. Make our ads not like ads....

    ReplyDelete
  14. thanks for your post ...
    pls ,visit my blog.......

    http://krazzycollections.blogspot.com

    ReplyDelete
  15. For sharing thank you very much wish success

    ReplyDelete
  16. I had tried the
    http://code.google.com/webfonts
    and it really works well on Blogger hosted sites :)

    It has less fonts if we compare it with Kernest,
    but the good point is we DON'T have to "create an account" or do the other annoying things.

    just embed (free, of course!) and use the font!

    ReplyDelete
  17. Thanks Amanda! I've been tweaking my blogger blog for a while but my recent focus has been reducing upload time. I noticed my upload time was getting crazy long so I went back to my template compressed some CSS, changed how I upload some of my imaging, and started using the page break feature in my posts

    ReplyDelete
  18. Hello,

    This doesn't seem to be working for me. I've tried a few different fonts and it won't save the template. It gives me this error message: 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.

    I would like to use either Josephine Slab or IM fell.

    ReplyDelete
  19. Thank you for the great tips for adding great fonts to our web designs. Do you know of a good, free service for adding fonts like these to print designs so they can be used for flyers? That would be a really great resource for non-profit organizations who need to print promotional flyers.

    ReplyDelete
  20. Really you have done great job,There are may person searching about that now they will find enough resources by your post.I like this blog..
    Blogger how when you visit my site,
    My Site created for men's health,
    Here the best method for you and get the best Penis Enlargement Pills today.

    ReplyDelete
  21. Thanks for the posting. Loads of excellent writing here. I wish I had found this site sooner
    rotherham hypnotherapy

    ReplyDelete
  22. very informative post, thanks for sharing it with usManchester photography studio hire

    ReplyDelete
  23. Thanx so much for helping! :) Even people who know nothing about IT (ie me) can follow your instructions! Nice job!

    ReplyDelete
  24. This is really awesome

    web design perth

    ReplyDelete
  25. I used to speak with people like him and I am not sure how they think.

    ReplyDelete
  26. the presentation of the blog is awesome. kudos to you for maintaining it.

    ReplyDelete
  27. Nice post.Thank you for taking the time to publish this information very useful!

    ReplyDelete
  28. The author has written an excellent article. You have made your point and there is not much to argue about. It is like the following universal truth that you can not argue with: No truth is universal, everything has its exception. Thanks for the info penis enlargement penis enlargement pills VigRX Plus

    ReplyDelete
  29. thanks for putting this article - really you put some great information on your blog. i will love to refer this to my friends

    ReplyDelete
  30. "Her world changed for the worse at age six, when she was sent to Milwaukee to live with her mother, who had found work as a housemaid. In the long days when her mother was absent from their inner city apartment, young Oprah was repeatedly molested by male relatives and another visitor. The abuse, which lasted from the ages of nine to 13, was emotionally devastating. When she tried to run away, she was sent to a juvenile detention home, only to be denied admission because all the beds were filled. At 14, she was out of the house and on her own. By her own account, she was sexually promiscuous as a teenager. After giving birth to a baby boy who died in infancy, she went to Nashville, Tennessee to live with her father.

    Vernon Winfrey was a strict disciplinarian, but he gave his daughter the secure home life she needed. He saw to it that she met a curfew, and he required her to read a book and write a book report each week. ""As strict as he was,"" says Oprah, ""he had some concerns about me making the best of my life, and would not accept anything less than what he thought was my best."" In this structured environment, tim viec lam Oprah flourished, and became an honor student, winning prizes for oratory and dramatic recitation. "

    ReplyDelete
  31. Now this can be especially useful with headlines and headings. However, one must check its compatibility with different browsers first. Another thing to consider is its readability. This post is definitely a good resource. Thanks for sharing the info.

    ReplyDelete
  32. I just leave a comment here coz I have read a lots of information that makes me feel interesting when the time comes I visit here great idea guys.

    ReplyDelete
  33. nice article, this is the one i was looking for!, thanks for sharing, this will surely help me with my college project research!

    ReplyDelete
  34. "Let’s face it, the choice of fonts you can use in your blog or web page is rather limited. While you may have tons of fonts installed in your computer, that doesn’t mean you can use all of them. Well, technically you can apply them in your blog, but what your readers see is limited to only the fonts installed in their computers.
    That is why Blogger plays it safe by integrating only (web-safe) fonts commonly available in most computers -Arial, Courier, Georgia, Impact, Times New Roman, Trebuchet and Verdana.crest white strips"

    ReplyDelete
  35. This is great! I've been thinking about using font replacements. Kernest sounds perfect!
    sim so dep

    ReplyDelete
  36. Many people who are attracted to the concept of financial security are drawn to the vision of a universal performance measure that places values on human and environmental well-being.

    ReplyDelete
  37. Though the strategy is regularly criticized by experts in the field, it is being used under the guise of implicit analogies tacitly approved by those at the top.

    ReplyDelete
  38. I wonder how long it will take to recover from the degradation made by people during the last 50 years.

    ReplyDelete
  39. Warm ugg boots outlet Wang sustained frost, the road would be better to go. You want to come pick me up, I am very pleased; only request you to postpone two weeks uggs for kids cheap Look! Think of them, past the sun shines into my soul, like a prisoner's dream of a sheep, pastures and all the honors level Ugg Australia Discount Code

    ReplyDelete
  40. You should keep an eye out for more details on this exciting program that will bridge the gap to your highest potential and utmost satisfaction.

    ReplyDelete
  41. I love your blog, you should add an RSS feed feature so I can get automatic notifications of new blogs. If you set one up please email me! i will bookmark you for now. Again Excellent Blog!

    ReplyDelete
  42. Your essay is good, I'm glad to see such a good website

    ReplyDelete
  43. I have just read the two articles on changing font options in HTML. Thanks! I’m wondering, though, is there a way to ADD fonts to the standard default ones that appear as choices on the Font/Colors drop down in Layout – so I can always choose different fonts (i.e. comic) right from layout, instead of having to always go into HTML and change…
    Thanks!

    ReplyDelete
  44. uggs boots I will detail to tell you, I will put you out. Said Li Bin, while the side will lock open.Li Bin and Xuelang special forces unit they will encounter it? Bva@ijKa Red Army attack on the Blues made preparations.Shang Jing is shot, I saw her put away a satisfied nod automatic rifle platoon leader came around Sun said.

    uggs boots for sale Arctic Wolf, visual look at how high you? To a special operations teammates said.Xia Zhi Wu flight captain smiled and be responded to, then followed after he came to the cabin, then Xuelang special forces unit of the players are ready finished, everyone holding hands are always ready to war, bombs, and the advent of .

    uggs boots canada Summer Snow Wolf Captain and other special forces unit of the players were all out of the tent, face the crowd roaring torrent of steel have been deeply shocked.

    uggs boots sale Guards, play pot of boiling water, head to drink. Said a lieutenant clamored. I saw the soldiers took a blue bottle of officers went to another corner of the cave. www.hotbootsshop.com

    ReplyDelete
  45. discount ugg boots To say, you and he says go, you are engaging in ideological and political, which is something you control. Meng commander will have to finish up and go, but when he came to the door when suddenly shocked, because the three squad Xu Biao a person standing there blankly.Ten, nine, eight, seven, six, five, four, three, two, one. KL*NMBz Oh, lost the battle to defeat, and no big deal, you played well, I was going good in the second line of defense against the effective strength of what you consume, so you did not expect to solve a squad, and all of a sudden is the elimination of a division I, ah, ah Oh Houshengkewei. laments Blue commander.Li Bin Li Bin ah, you the NAO soldiers, which in the end run to?

    ugg discount outlets Transferee, nothing that I left my things. Li Bin smiled, I thought so also, and martial arts film quite like ah, there are dice arena air.Oh, you think Bin brother in the underworld so easy ah mix which I mix so many years just to get rid of brother's birthright. Difficulty, Chao said emotion.

    discount uggs online You do not worry the old promise. It's something I have the responsibility and political commissar, Li Bin unjustly. Meng blame the company commander said.

    discount ugg boots for women Yes. Guards kicked turned to walk outside the company headquarters. www.hotdiscountbootsoutlet.com

    ReplyDelete
  46. I am so glad to hear that practical activities about water issues, environment friendly agriculture and many other matters will be set.

    ReplyDelete
  47. I really enjoy this blog this is an awesome blog and informative Post,I like the way of your writing and it is showing that you are a Great Scholar and writer.

    ReplyDelete
  48. discount ugg boots Action. I will be surrounded by towering mountains, deep valley in front of me is one, round after round waterfall plunging down, my feet rushing river roads discount uggs A tear in her heart will not re-fill the gap. Oh, if she can in an instant he became his brother, how could she cheap womens uggs .

    ReplyDelete
  49. Nicely presented information in this post, I prefer to read this kind of stuff. The quality of content is fine and the conclusion is good. Thanks for the post.

    ReplyDelete
  50. This internet site is seriously good, wish to determine much more so wonderful write-up
    cheap womens uggs

    ReplyDelete
  51. please talk me more about .post-title >> problems but I've been thinking about using font replacements tools thanks baby .

    ReplyDelete
  52. The exercises represent our ethos to inspire change through creativity and aim to make people stop and think about the bigger picture.

    ReplyDelete
  53. Hey...
    Thanks Amanda! I have been tweaking my blogger blog for a while but my recent focus has been reducing upload time. I noticed my upload time was getting crazy long so I went back to my template compressed some CSS, changed how I upload some of my imaging, and started using the page break feature in my posts...

    ReplyDelete
  54. Hi & Hello to everyone here.
    I am glad that I am here. This post seems to be innovative and informative to me. I wish to participate in such discussion further.

    ReplyDelete
  55. Let’s face it, the choice of fonts you can use in your blog or web page is rather limited. While you may have tons of fonts installed in your computer, that doesn’t mean you can use all of them. Well, technically you can apply them in your blog, but what your readers see is limited to only the fonts installed in their computers.That is why Blogger plays it safe by integrating only (web-safe) fonts commonly available in most computers -Arial, Courier, Georgia, Impact, Times New Roman, Trebuchet and Verdana.

    ReplyDelete
  56. great site, it is useful! thank you for your sharing! fd

    ReplyDelete
  57. Thanks you giving your time to provide the important information here.it will surely help me with my wordpress blog.

    ReplyDelete
  58. It’s high time that we realize that the issue of managed care carries the essence of almost all the challenges we face in modern society.

    ReplyDelete
  59. Nothing I do is workingggggg
    Could anybody help me? :/ Email gathertherosebuds@gmail.com Thank youuu!!:)

    ReplyDelete
  60. This Template is Very Attractive.

    ReplyDelete
  61. Blog Template are mostly use for Blog Attractive.

    ReplyDelete
  62. thanks for useful tips, guy, keep doing this well

    ReplyDelete
  63. very cool tricks master

    I love it

    ReplyDelete
  64. Our mission is to focus the public attention on the problems created by consumption of this product and present positive alternatives that enable positive change.

    ReplyDelete
  65. Shop for all your Cheap Soccer Jerseys and apparel needs
    from jerseyretails.com including Cheap Soccer shoes, replica soccer jerseys, team uniforms and more. we has all

    the soccer gear you want

    ReplyDelete
  66. It was great experience with Kernest font editing. and now we have updated our regular blog with times new roman font. Thanks for sharing with us this informative source.

    ReplyDelete
  67. Informative post! We will share this informative source on our social platforms. Thanks for this valuable sharing with us.

    ReplyDelete
  68. Thank you. thank you. thank you. thank you. thank you...

    ReplyDelete
  69. Free space baseball, New York yankees, MLB, if you are interested, please click on my name.http://nfljerseycheapwholesale.weebly.com/

    ReplyDelete
  70. Its really innovative technique to have proper fronts on blogs. Thanks for the post.

    ReplyDelete
  71. Replies
    1. Its really innovative technique to have proper fronts

      Delete
  72. Its very helpful to implement different font code in my blog thank you very much for this information ......... packers and movers

    ReplyDelete
  73. This is a good knowledge for me about bloggers. Thank for good post related to blogger...

    ReplyDelete
  74. Kleintransport von Möbel in Berlin Kleintransporte mit Sprinter Wagen Möbelheusen Lieferungsservice Kleintransporte Möbeltaxi ohne Vorbestellung.

    ReplyDelete
  75. Your mode of describing all in this piece of writing is truly fastidious, all can without difficulty know it, Thanks a lot.

    ReplyDelete
  76. awesome stuff..really enjoyed reading the article

    ReplyDelete
  77. Wow thank you this is just what I have been looking for - great work please check my post!!!!

    Essay Creator

    ReplyDelete
  78. Wow thank you this is just what I have been looking for great work plz chek my blog

    Online Essay Maker

    ReplyDelete
  79. Your Work is exellent it's helpful for me also check my post!!!

    Custom Essays

    ReplyDelete
  80. Thanks interesting idea very use full for my website bloger thanks...Packers and Movers bangalore packers and movers

    ReplyDelete
  81. Fabulous article writing. Your article delivers varied passion therefore I bookmarked this science system for future visit that i hope can get a current content from your post and every one content unit progressing to be pleasant to scan with some new things.
    web development dubai
    dubai web design

    ReplyDelete
  82. Very nice content interesting its use full for me to post blogs agarwal packers and movers

    ReplyDelete
  83. Your mode of describing all in this piece of writing is truly fastidious, all can without difficulty know it, Thanks a lot.

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy