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:- Google Font API home page
- Getting started with the font API
- Google Web Fonts FAQ
- How to use the new Google Font API (DesignShack)
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.
20 Comments:
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)
Awesome! Google is so cool I have not even scratched the surface.
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.
Great change on my blog thanks for sharing see,
Hack Tutors
This is fantastic. Now I can add creative fonts without worrying about it adversly affecting my upload time!
This is very nice really Good, Fantastic, I love it
Web Design
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.
Thanks
Tried it out. But the fonts are rendering like a washed out typing on old paper. totally ugly. :( changed back to default font.
I hope to more a fonts.
Works great. I love it. There is also a nice preview tool available: http://code.google.com/webfonts/preview
it's same with fontface
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.
I'll try it, thanks
For some reason it isn't displaying for newer posts. Some older posts display the new font. Not sure why it's not sticking.
nice video
I use 'tangerine' google font if you'd like see it on my blog http://cocutzamisca-casasigradina.blogspot.com Thx for the tuts :)
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!
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. :)
Thank you for sharing. Good article..
Post a Comment