152 How to use Google's Font API with Blogger
May 21, 2010 /

Web fonts have become a popular web design trend over recent months. As I explained in a previous post, the @font-face technique can be problematic when applied to Blogger templates. But since Google have now released their font API, we're able to display non-standard fonts in our Blogger templates with ease!

Here's an overview of the Google Font API and how we can use this to enhance our Blogger-based designs.


What is Google's Font API?

The Google Font API enables us to display web fonts in any web page. We can choose to display text in a variety of high-quality open-source web fonts for both personal and commercial projects. No sign-up is required, and it's really easy to set up.

What fonts can we use?

All fonts available for use with the API are listed in Google's Font Directory. Here's a few examples of the styles we can use:



At the time of writing, there is a small selection of fonts available to use through the API. As word spreads that Google is pioneering this project, I'm sure many font developers and foundries will begin to add open source variants to the directory.


How to use the Google Font API

Using Google's Font API to display non-standard fonts is very easy, and only requires a few minutes to set up.

Firstly, you'll want to choose the font you'd like to use from Google's Font Directory. Click on the font you'd like to use to be taken to a page displaying how the font appears at different sizes.

For this example, I'll use Cantarell by Dave Crossland:


Now click on the highlighted "Get the code" tab to generate the code we need to add to our Blogger template:




Copy the embed code to your clipboard or paste into a simple text editor for later use.

Now go to Design>Edit HTML in your Blogger dashboard, and use your browser's search function to locate the opening <head> tag. Paste the embed code immediately after this line.

You will also need to add a forward slash just before the closing ">" symbol in your code, so that this:

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

becomes this:

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

This is because Blogger uses strict HTML markup and considers the original font embed code to be an open tag; the forward slash "self-closes" the tag and enables your template to be properly parsed.

Finally, save your template.

This step adds the required CSS to embed the fonts we'd like to use in our Blogger design, though these fonts will not display unless we specify the textual areas of the layout which should be changed. In order to do this, we need to add additional style statements to the <b:skin> section of our template.

For example, if we wanted to use the Cantarell font for the post titles, we would add the following line just beneath the closing </b:skin> tag:


h2.post-title {font-family: Cantarell, Sans=Serif;}

I've listed a few CSS statements you could add for various text areas of the template over on this page (opens in a new tab/window).

Once you've added the style statements appropriate for your design, preview your template to see how the changes will appear. If all is well, you can proceed to save your template.


Why is this good for Blogger users?

This new API allows us to have even more control over the designs of our Blogger templates without having to register for a web fonts service or be concerned about cross-domain policies.

All of the fonts available for use through the Google Font Directory are open source. We are able to use them without restriction in both personal and commercial projects without the need to request a license.

Blogger template designers can now use these fonts to enhance their templates and be satisfied that the fonts will display as intended in the majority of browsers (admittedly, this was an issue which prevented me from including web fonts in my own designs until now!).

I also wonder if the font API will be integrated into Blogger's new template designer in the coming months...?


More information about the Google Font API

In this post, I've explained only the basics of embedding web fonts with Google's Font API. Here's some helpful resources you may like to browse for further information:



What do you think?

Will you be using Google's Font API to add new web fonts to your Blogger-based designs? Or if you are already using these techniques, did you find the implementation as simple as intended?

Please feel free to leave your comments and opinions 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.

152 comments:

  1. Yea That's cool and easy.For more font one can use google's webfont loader library,(co-developed with typekit)specially those are already using ajax library from google(like friendconnect)

    ReplyDelete
  2. Awesome! Google is so cool I have not even scratched the surface.

    ReplyDelete
  3. Thank you for this great information. I've applied it in my site and work well. But I wonder what it influences to the page speed.

    ReplyDelete
    Replies
    1. mostly i m using cardo font, its simple and it is good with H1 tag.
      Web Design Company Manchester

      Delete
  4. Great change on my blog thanks for sharing see,

    Hack Tutors

    ReplyDelete
  5. This is fantastic. Now I can add creative fonts without worrying about it adversly affecting my upload time!

    ReplyDelete
  6. This is very nice really Good, Fantastic, I love it

    Web Design

    ReplyDelete
  7. Just out of curiosity, haven't Google, Mozilla and Microsoft joined forces opening up font use on the web? I don't know the exact details, but they were going to present something to get it approved, so that all fonts could be used and rendered correctly for the majority of the popular browsers (i.e. Firefox, Explorer & Chrome). Just curious.

    ReplyDelete
  8. Tried it out. But the fonts are rendering like a washed out typing on old paper. totally ugly. :( changed back to default font.

    ReplyDelete
  9. Works great. I love it. There is also a nice preview tool available: http://code.google.com/webfonts/preview

    ReplyDelete
  10. I think I will choose a new font for my blog, because it seems that my font wasn't great for my current blog. Thanks for sharing this news Amanda.

    ReplyDelete
  11. For some reason it isn't displaying for newer posts. Some older posts display the new font. Not sure why it's not sticking.

    ReplyDelete
  12. I use 'tangerine' google font if you'd like see it on my blog http://cocutzamisca-casasigradina.blogspot.com Thx for the tuts :)

    ReplyDelete
  13. Thanks!
    You said, "For example, if we wanted to use the Cantarell font for the post titles, we would add the following line just beneath the closing tag:" But I had to add it just above that line instead of below.
    Works great now!

    ReplyDelete
  14. i don't know if i can really pull this off. but im glad you posted this. i can make my site look at least, to be appreciated. :)

    ReplyDelete
  15. Thank you for sharing. Good article..

    ReplyDelete
  16. Thanks!
    You said, "For example, if we wanted to use the Cantarell font for the post titles, we would add the following line just beneath the closing tag:" But I had to add it just above that line instead of below.
    Works great now!

    ReplyDelete
  17. Interesting information.
    Very useful for web designers and programmers.
    very good

    ReplyDelete
  18. I am certain this works for some, however am using the Blogger Template Style "Watermark." The first reads:" " and it appears to be written in a different dialect or language from the example you post.

    All I wish to do is to change the 'Post Headlines' and I can see how the syntax reads in the overall document definitions, and can change the founts by name, but have no idea how to incorporate a web based font into the code.

    Thank you for any assistance you can provide.

    ReplyDelete
  19. I like your website. Thank you for great information. I will come back to your website again.

    ReplyDelete
  20. I get this error, I follow all that is written

    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
  21. I have the same problem as Cheap Android! Anyone out there that can help please?

    ReplyDelete
  22. Hey - I'm getting the same error message.

    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
  23. I am having the same problem, its saying that it is not well-formed? what am i doing wrong?

    ReplyDelete
  24. these are some nice fonts. Save money with 02 Simplicity more minutes and texts

    ReplyDelete
  25. Thank you is post !

    ผิวขาว ยาผิวขาว ฉีดผิวขาว ขัดผิวขาว

    ชอบผิวขาวแบบไหน มาคุยกัน

    ReplyDelete
  26. 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
  27. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me to start my own Blogrotherham hypnotherapy

    ReplyDelete
  28. It definitely stretches the limits with the mind when you go through very good info and make an effort to interpret it properly.engraved gifts

    ReplyDelete
  29. Happy to see your blog as it is just what I’ve looking for and excited to read all the posts. I am looking forward to another great article from you.
    African Mango

    ReplyDelete
  30. Thanks for the posting. Loads of excellent writing here. I wish I had found this site soonerphotography studio hire Manchester

    ReplyDelete
  31. These kind of post are always inspiring and I prefer to read quality content so I happy to find many good point here in the postcustom temporary tattoos

    ReplyDelete
  32. O man its perfekt thank you for posting.

    ReplyDelete
  33. Blogger how when you visit my site,
    My Site created for men's health,

    ReplyDelete
  34. All I wish to do is to change the 'Post Headlines' and I can see how the syntax

    ReplyDelete
  35. anhaengerkupplungen sind gut zum nachrüsten

    ReplyDelete
  36. Happy to see your blog as it is just what I’ve looking for and excited to read all the posts. I am looking forward to another great article from you. best vpn service

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

    ReplyDelete
  38. I’ve seen progression in every post. Your newer posts are simply wonderful compared to your posts in the past. Keep up the good work
    temporary tattoo

    ReplyDelete
  39. Good to read and I appreciate it that you shared handy post. Thanks!

    ReplyDelete
  40. I have ordered a literary essay from your web-site and never regret it. Thnx.
    продвижение неизбежно

    ReplyDelete
  41. That api code is not working fine in my Chrome.

    ReplyDelete
  42. FOR THOSE OF YOU ENCOUNTERING THE ERROR >>

    Where you copy and paste the code from google fonts delete the "&v2" inside the code:

    >>>>>>
    (link href='http://fonts.googleapis.com/css?family=Patrick+Hand&v2' rel='stylesheet' type='text/css')

    to

    (link href='http://fonts.googleapis.com/css?family=Patrick+Hand' rel='stylesheet' type='text/css')

    should work just fine :)

    ReplyDelete
  43. Thanks BB, I will try your advise and let you know once it will work for me. I'm trying the one that I've search online.
    Owatrol Additives

    ReplyDelete
  44. The source of work for the Google API on mobile devices? What unsupported browsers do?

    ReplyDelete
  45. I like your website. Thank you for great information. I will come back to your website again.

    ReplyDelete
  46. one should really appreciate such things, really a lot of information is there in it.

    ReplyDelete
  47. Will be good to see this Font API application extend beyond Blogger in usability.

    ReplyDelete
  48. I am so happy to read your article here. Very refreshing and new to me!keep going...Chuck 1-4 dvd

    ReplyDelete
  49. 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
  50. I very much agree with your thoughts and insights. Hope that more could write such a good word

    ReplyDelete
  51. Now that just makes it easy for bloggers to put Google gadgets on their sites. I'm sure it will help a lot of bloggers out there who are very concern in customizing their webpage.

    ReplyDelete
  52. "Today we are excited to announce a collection of high quality open source web fonts in the Google Font Directory, and the Google Font API to make them available to everybody on the web. For a long time, the web has lagged print and even other electronic media in typographic sophistication. To enjoy the visual richness of diverse fonts, webmasters have resorted to workarounds such as baking text into images. Thanks to browser support for web fonts, this is rapidly changing. Web fonts, enabled by the CSS3 @font-face standard, are hosted in the cloud and sent to browsers as needed.

    Google has been working with a number of talented font designers to produce a varied collection of high quality open source fonts for the Google Font Directory. With the Google Font API, using these fonts on your web page is almost as easy as using the standard set of so-called “web-safe” fonts that come installed on most computers.

    The Google Font API provides a simple, cross-browser method for using any font in the Google Font Directory on your web page. The fonts have all the advantages of normal text: in addition to being richer visually, text styled in web fonts is still searchable, scales crisply when zoomed, and is accessible to users using screen readers.
    seo company"

    ReplyDelete
  53. Really it is a great post in all. I got authority for this article in this site. Because i read this post attentively and acquire some useful information.
    online computer store

    ReplyDelete
  54. It could not be easier to know when you are running low, as a flashing light warns you when your tank is almost empty.

    Regards,
    Buy Term Paper

    ReplyDelete
  55. The particular information and facts I actually obtained in this API website is a suitable confirmation that it's nowadays attainable to educate everyone and be abreast of latest information.
    computer store

    ReplyDelete
  56. I am extremely impressed thanks for sharing all information. It is a great post for the people to get the proper information.

    ReplyDelete
  57. Thanks for sharing. It's really good information for me.

    Balck Friday Apple Store

    ReplyDelete
  58. Another choice for font api is CUFont that works fine,also. You just find the information of them on google search.

    Black Friday HP

    ReplyDelete
  59. I do agree with all the ideas you have presented in your post. They re really convincing and will definitely work. Still, the posts are very short for novices. Could you please extend them a little from next time? Thanks for the post

    barbie game

    ReplyDelete
  60. Thanks so much dude my blogs have new power :D http://max99im.blogspot.com http://aaqilx.blogspot.com

    ReplyDelete
  61. I'd be happy when someone works out how to use GFonts in dynamic views!

    ReplyDelete
  62. I value your having time to speak about this. I am passionate concerning this topic and really enjoy understanding more about it.

    Regards,
    Dissertation Examples

    ReplyDelete
  63. Took me time to read all the comments but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenter here! It's always nice when you can not only be informed but also entertained
    | roman coins |

    ReplyDelete
  64. Took me time to read all the comments but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenter here! It's always nice when you can not only be informed but also entertained

    |Cooking game|
    |sondaj|
    |roman coins|
    |friv|
    |barbie

    ReplyDelete
  65. Google have an API for everything, most of which I was aware of, but this one if new to me. Thanks for the share.
    cannabis seeds

    ReplyDelete
  66. The Google Face API provides a unproblematic, cross-browser method for using any face in the Google Typeface Directory on your web author. The fonts acquire all the advantages of formula matter: in plus to being richer visually, matter styled in web fonts is ease searchable, scales crisply when zoomed, and is convenient to users using covering readers.




    Computer Hardware Store

    ReplyDelete
  67. 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
  68. Can you please tell me how to fix this problem, Where the Google Font is being shown differently or improperly maybe in Opera and Chrome. Any help?

    ReplyDelete
  69. These information helps me consider some useful things, keep up the good work.

    ReplyDelete
  70. Hey Amanda I have applied the steps but the font does not change to the font type I picked in Google font, how to solve this, thank you.

    ReplyDelete
  71. It's so tough to encounter right information on the blog. I really loved reading this post. It has strengthen my faith more. You all do such a great job at such concepts. ..can't tell you how much I for one appreciate all you do..

    barbie games

    ReplyDelete
  72. Thanks for explaining it so perfectly..I once faced some issue with it.I wish I would have got this post then.

    ReplyDelete
  73. gucci outlet Report commander, Li Bin, Li Bin, he ran. MP02lq

    gucci outlets online See Yan Szeto know not many, said Li Bin deeply inhaled smoke and spit smoke ring, said slowly.

    gucci outlet online Said: "No! A provincial governor said today the small ear." Cloth fear, saying: "a place in Dingjian Yang, also out of frustration." Su said: "

    outlet gucci online Kill! "All people, saying:" Let the thief cut seek brother! "Miao want to go, set around the sides. Cut to jifen. That Sergeant separately to re-introduce www.cheapguccioutletonline.com

    ReplyDelete
  74. This comment has been removed by the author.

    ReplyDelete
  75. This comment has been removed by the author.

    ReplyDelete
  76. This comment has been removed by the author.

    ReplyDelete
  77. Hello! I would wish to supply a large thumbs up for your exceptional info you could have here about this post. . |recipes| I ll be coming back to your blog website for further soon.

    ReplyDelete
  78. This comment has been removed by the author.

    ReplyDelete
  79. 17 again zac efron clothes


    Nice one, there is actually some great facts on this post some of my subscribers may find this useful, will send them a link, many thanks

    ReplyDelete
  80. Thanks to share with us the information. I wish you good luck!

    ReplyDelete
  81. Thank you for your commitment to good writing. recipes Your use of persuasive content impresses me. I like [url=http://www.recipes.gs]recipes[/url]
    your views and concur many points. Please continue to [url=http://www.friv.fm]friv[/url]put out great work.
    thanks

    ReplyDelete
  82. Thanks recipes
    your views and concur many points. Please continue to friv put out great work.
    thanks

    ReplyDelete
  83. J'ai trouvé votre site de blog sur google et vérifier plusieurs des postes au début. Continuer à maintenir le bon travail. Je viens d'ajouter votre flux RSS à votre lecteur de Nouvelles MSN. Au plaisir de la lecture à travers beaucoup plus de vous plus tard!

    ReplyDelete
  84. Merci pour ce merveilleux article! Il est extrêmement perspicace. Je souhaite que vous effectuer sur l'affichage de votre sagesse avec nous

    ReplyDelete
  85. I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post

    ReplyDelete
  86. wow my blog has cool if I use it

    many font variation

    ReplyDelete
  87. Great tips on font usage on blogger. I have been looking at styling my blogs in different font. This will help my Aluminum Electrolytics by Dearborn Electronics Blog out a great deal!

    ReplyDelete
  88. Kawasaki biker jacket

    Harley Davidson kawasaki racing jacket are available on cheap prices

    ReplyDelete
  89. Wow, thanks for letting us all know.

    Regards, Mikes
    http://the2girlsteachsex.com/

    ReplyDelete
  90. This useful article is really very effective. scorpion jackets

    ReplyDelete
  91. Nice effort, very informative, this will help me to complete my task.

    ReplyDelete
  92. I suggest this site to my friends so it could be useful for them also. Great effort

    ReplyDelete
  93. Nice effort, very informative, this will help me to complete my task.

    ReplyDelete
  94. We are professional supplier of OBD2 and OBD1 compatible cars and trucks automotive diagnostic tools. LR<

    ReplyDelete
  95. thanks guys, i learning blogger api

    ReplyDelete
  96. Post is nicely written and it contains many good things for me. I am glad to find your impressive way of writing the post.

    ReplyDelete
  97. Anyways, I hope you are all doing great.

    Mikes,
    How to get a girls to like you Dude.

    ReplyDelete
  98. API is necessary for the blogs, these information is good. web designing bangalore

    ReplyDelete
  99. If I could interject an opinion in here, I would have to admit I have changed my mind about this topic. This is due to your persuasive words and sound commentary. Thank you for sharing.

    Train-the-trainer programs

    ReplyDelete
  100. They are very convincing and can certainly work. Nonetheless, the posts are very brief for beginners.

    ReplyDelete
  101. I am interested in this subject matter and would like to explore out some more information as my colleague need information on this topic. Do you have any other post on this? Cheers!

    ReplyDelete
  102. Fantastic article! I initially discovered your blog a few days ago, and I website the exact same day. I have a
    number of cool thoughts for some future posts you could write. I'll shoot you an email later. Keep up the great
    work.

    ReplyDelete
  103. I always prefer to read the quality content and this thing I found in you post. Thanks for sharing.

    ReplyDelete
  104. That requires extensive modifications to the code, as if taking in consideration what has been said, no point to do calculating the resources required.

    ReplyDelete
  105. It reveals how nicely you understand this subject. Bookmarked this website page, will come back for more articles.

    ReplyDelete
  106. t reveals how nicely you understand this subject. Bookmarked this website page, will come back for more articles.

    ReplyDelete
  107. it reveals how nicely you understand this subject. Bookmarked this website page, will come

    back for more articles.

    ReplyDelete
  108. We just read Dumpling soup for the chinese new year and I thought of you and there, I find some dumplings on your blog.
    Black Hairstyles

    ReplyDelete
  109. The Chiefs cannot be stubborn in their attack with the offense well below full strength, so in-game adjustments will almost always be required.

    ReplyDelete
  110. written and it contains many good things for me. I am glad to find your impressive way of writing the post.

    ReplyDelete
  111. One of the primary challenges which anyone face is usually justifying exactly what 1 wish to accomplish and the reason why it will break up your rank quo -- may it be to offer opinion or perhaps beginning a converstaion. It really allows while reading your material was adamant around the issue you could have highlighted. Very good tunning the style a person reviewed will definitely provide completely new opportunities in this area regarding attention along with provides will probably effect anything beneficial. We appreciate your energy regarding getting notice regarding preceding outlined make a difference.

    ReplyDelete
  112. Template on Blogger Blog is usually using Arial and some other regular fonts. But,now you can use Google Font API.Thanks for sharing the post.

    ReplyDelete
  113. want set of earphones which might be cozy in addition healthy headphones You certainly

    ReplyDelete
  114. certainly want set of earphones which might be cozy in addition healthy headphones You

    ReplyDelete
  115. You certainly want set of earphones which might be cozy in addition healthy headphones

    ReplyDelete
  116. headphones You certainly want set of earphones which might be cozy in addition healthy

    ReplyDelete
  117. healthy headphones You certainly want set of earphones which might be cozy in addition

    ReplyDelete
  118. I am paradisaical to tipsy your hot way of quantification the way. Now you entity it sluttish for me to see and reanimate the aim.

    short hairstyles for black hair

    ReplyDelete
  119. This is a excellent interface enhancement for using API in blogger based designs! Google is cool. Blogger has a great importance for me in my web development career.

    ReplyDelete
  120. I'm so pleased to discover your site. I want to thank you for ones time due to this fantastic read!

    ReplyDelete
  121. Take a look at this....

    http://www.enproyectoweb.com/index.php

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

    Pre written Research Papers

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

    Academic Writer

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

    Completed Essay

    ReplyDelete
  125. Thank you for this wonderful ideas you have discuss to your blog, I've learn from it.

    ReplyDelete
  126. This is a great inspiring article. I am pretty much pleased with your good work.

    ReplyDelete
  127. They re really convincing and will definitely work. Still, the posts are very short for novices. Could you please extend them a little from next time? Thanks for the post
    .

    ReplyDelete
  128. 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
  129. I like your blog.Thanks for the post.I am waiting for your new post.

    ReplyDelete
  130. Its cool .. i will use this for my upcoming website

    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