Langsung ke konten utama

How To Use Google's Font Api With Blogger

Web fonts have become a popular web design ekspresi dominan 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.
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Free Blogger Backgrounds And Textures To Spice Up Your Site

Background images can instantly transform the appearance of our Blogger sites. Using the Blogger template designer, we can easily upload and configure a new background image in just a few clicks, while those using older templates need only add a few lines of code to achieve a dramatic effect. In this post, you'll find resources for hundreds of different free backgrounds, patterns and textures you can use to spice up your Blogger site, along with instructions for applying this simple but extensive effect. Large background images Large background images enable us to display a single large image behind the main content of our site, such as a photograph or complementary texture. Here is a selection of excellent resources for large background images and textures: HOT Bliggity Blog Provides a huge selection of large background images with a contrasting central panel to offer contrast for the main site content. Shabby Blogs A beautiful col...
Posting Komentar
Baca selengkapnya

Another Blog Is Already Hosted At This Address - How To Fix

When attempting to set up their Blogger custom domain, many Blogger users have received the following error message: Another blog is already hosted at this domain Although I have set up many custom domains to use with Blogger , until this weekend I had never experienced this issue for myself (and was unable to offer any definitive solution for those experiencing this problem). My friend was experiencing this very persoalan after setting up her new blog a few days ago. We have been able to find some solutions which I hope may help others who see this error message when attempting to set up their custom domain. Assuming you have already configured the DNS settings for your particular domain provider and have attempted to publish to a custom domain through your Blogger dashboard, here are the steps you should take: 1. Publish back to your Blog*Spot domain In order to make your blog accessible while troubleshooting your custom domain, it is advisable to publish back to your Blog*Spot...
Posting Komentar
Baca selengkapnya

Google Blogger For Dummies To Be Released In February!

If you're familiar with the "Dummies" series of books, you'll understand how helpful and insightful these textbooks can be in dealing with any subject. That being said, I'm happy to announce that Google Blogger for Dummies is due to hit bookshops on February 3rd. It's available to pre-order now from Amazon.com  (priced at $16.49) and will be available in Barnes and Noble, Waterstones and other bookshops, and also directly from Wiley. The author, Susan Gunelius, has been kind enough to send me a 60 page preview of this book, complete with a full and detailed table of contents and two sample chapters for my preliminary review. Also, when the book is released early next month, Susan has graciously offered me a copy of the book so that I can review it in it's entirety and offer readers my insights. What Google Blogger for Dummies will cover Being a "Dummies" guide, Google Blogger for Dummies will cover both the basics of using Blogger (crea...
Posting Komentar
Baca selengkapnya