Tumblr () is becoming an increasingly popular platform for blogging and personal publishing, thanks to its growing collection of themes, simple posting style and plethora of mobile options.

Although Tumblr has continued to beef up its feature-set, adding support for pages, user questions and user submissions, the platform isn’t as extensible or customizable as something like WordPress () or Drupal (). In a perfect world, there would be a way to combine the simplicity of Tumblr’s posting types and styles with some of the deeper customizations and options of WordPress.

We might not have reached the Holy Grail of Tumblr Meets WordPress harmony, but we’re a lot closer, thanks to a new plugin and iPhone app from WooThemes, a WordPress theme development firm.

Earlier this year, WooThemes started experimenting with bringing Tumblr-styled themes to WordPress. Tumblr-inspired design is taking off on lots of platforms, but what made Woo’s approach unique was the addition of a special QuickPress widget seated on the WordPress dashboard that made posting specific types of content — a la Tumblr — very easy.

Over the past few months, Woo has released more Tumblr-style themes using this QuickPress widget. Even better, WordPress 3.0 was released with support for custom post types, which makes adding special elements like a category icon or post-specific styling more automated.

This is great if you are starting a new site or want to redesign your blog – but what if you already have a pretty established site and a design you quite like? Wouldn’t it be great if you could add some of that microblogging functionality into your existing WordPress site? Read on for details on how to do that.

---

The Woo Tumblog Plugin

---

Last week, Woo introduced its free Woo Tumblog plugin. This plugin makes it possible to turn an existing theme into a Tumblr-like tumblelog.

You will need to do some editing of your theme files to get the Woo Tumblog plugin to work, because the plugin changes the way post title, thumbnails and post types are displayed. WooThemes has provided extensive documentation showcasing what you need to edit and add and has also included contextual help.

Woo also includes specific examples for what you need to do to add support for the plugin to the new TwentyTen theme included with WordPress 3.0.

You’ll need to change your permalink structure and add a few lines of code. It’s actually pretty straightforward. Our hope is that in the future, more theme developers will consider adding these hooks into their themes automatically.

---

The QuickPress Widget

---

Once you’ve enabled the plugin and made the changes so that different post types will appear a certain way, you can then post these types using the QuickPress widget on the WordPress dashboard.

This is what that looks like:

The end result is this post:

---

Express: The iPhone App

---

Beyond the plugin, WooThemes has also released Express [iTunes link]. The app is $4.99 but it is far and away the best WordPress mobile experience we’ve had to date.

You can use the app with any of the Woo microblogging themes or with your own theme if you install and enable the Tumblog plugin.

The app is super simple to use and you can easily post various types of content. It doesn’t support video uploading — something that the latest version of the WordPress iPhone app recently added, but it does make it easy to post various types of content and to moderate comments.

The app has already generated a lot of excitement in the WordPress theme community and lots of developers are signing up to add support for the app to their themes.

---

What’s Missing

---

As awesome as the new Woo Tumblog plugin and Express iPhone app are, there’s still a missing component that prevents true WordPress Meets Tumblr bliss from taking place. The bookmarklet.

I would argue that the bookmarklet is a huge reason why Tumblr and Posterous () are so accessible. It’s just so easy to quickly post a link or an image or a brief comment when you can auto-generate that content from your web browser. Furthermore, the iOS bookmarklets make it possible to do this from within the Tumblr iPhone apps too.

WordPress has its own bookmarklet — Press This — but frankly it’s not very good. It’s buggy, it doesn’t give you all the options you have in the main editor and it certainly doesn’t easily support custom post types.

There are rumors that better Press This and QuickPress functionality will be coming to the next version of WordPress, but at this point, users are on their own. I’ve become so despondent with the lack of a real bookmarklet solution that I’ve toyed with creating something myself that will also work with WooThemes’ plugin. Sadly, I just don’t have a ton of time.

I’m not alone. I’ve received e-mails based on comments I’ve left regarding the need for a bookmarklet from others indicating that this is a must-have killer feature.

We’re so close — we just need this next piece to really make microblogging on WordPress viable and enjoyable.

WooThemes has done a lot of the heavy lifting by releasing the free plugin and also creating the iPhone app. Wouldn’t it be great if the open source spirit could help come up with a bookmarklet solution?

Google has just made this process significantly easier with the launch of its Font Previewer.

For years, we’ve been stuck with the same old fonts: Arial, Georgia, Verdana, Times New Roman — web-safe fonts that a majority of web users have installed on their computer.

But lately, the web design community is abuzz — and the source of the excitement is around web fonts. “Web fonts” is a generic term that refers to the method of serving font files — the same type of files you have installed on your computer — to your website visitors so that you can guarantee they’ll have the appropriate type faces you want displayed on your web pages.

In this guide, we’ll discuss a way of implementing web fonts using free web services collectively called Google Font API.

If you have any tips to add on using Google Font API, be sure to leave them in the comments.

---

Google Font API Basics

---

The API is easy to use and requires no programming skills whatsoever. If you run a website, chances are that already have the necessary knowledge of getting Google fonts to work. And if you don’t, grab one of your geeky friends for five minutes and ask them to implement Google Font API for you.

---

How It Works: @font-face

---

Google Font API uses a CSS property called @font-face. If you haven’t heard of it before, don’t worry, most people haven’t — you don’t need to be familiar with it to use Google Font API.

@font-face allows you to use font files (they have file extensions like .otf and .ttf) just like in desktop applications such as Microsoft Word or Adobe Photoshop.

The issue with @font-face has been that the various kinds of web browsers require different font file types. For example, Internet Explorer requires an .eot file (embedded open type), while browsers like Firefox need an .otf (open type font) file. Thus, developers have come up with workarounds to implement @font-face in such a way that works on all browsers, like employing conditional CSS that serves the appropriate file type depending on the user’s web browser.

Another issue with using @font-face is the licensing of the fonts themselves; it’s a gray-area legal issue where using a font file on your website — even though you have purchased it for your desktop applications — may not be allowed.

Google Font API solves all of these issues.

---

Benefits of Using Google Font API

---

Using Google Font API is a great solution for avoiding the many problems that exist when using @font-face in your website. Firstly, the web service simplifies the implementation of web fonts. With only one line of code to reference the font you want to use and some basic CSS, you can get yourself set up in a matter of minutes. No need to worry about web browser quirks, dealing with multiple types of font files, or understanding how @font-face works — Google Font API handles all of that for you.

The fonts are officially supported in all major browsers like Internet Explorer, Firefox, and Safari — which in turn suggests that other less popular web browsers (which are oftentimes based on major browsers) will support it as well.

Google fonts are open source and have been vetted by Google. This means that you can sleep better at night and not worry about whether you’ll get in trouble for using a font you weren’t supposed to be using.

There are also technological advantages for using Google Font API versus serving the font files yourself. Google’s infrastructure is highly regarded in the IT world for its extraordinary uptime and ability to withstand high levels of site traffic. The company is a pioneer and leader of website performance — developing best practices and tools for improving page response times, creating new standards and protocols to improveInternet speeds, and leading initiatives for making the web faster. In addition, if a user has visited another website that uses Google Font API, they might already have the font you need in their browser’s cache, speeding up the page response times of your web pages.

Perhaps the biggest benefit of all of this is that it’s free. There are no prerequisites (such as having to sign up or supply an e-mail address) to using Google Font API.

---

How to Use Google Font API

---

Google Font API is documented well, but let us cover the fundamentals of implementing it on your website.

---

Basic Usage

---

There are two steps for using Google Font API.

The first step is to reference the CSS stylesheet you need within your HTML document; more specifically inside the <head> tags found towards the top. This reference should be in all web pages that will use the font(s) you request from Google Font API.

This will be a cinch if you use a content management system or blogging platform such as WordPressbecause you only have to do this once using your site’s theme template.

If you have a static HTML website, then you’ll have to plug in this code on all web pages, or if you have a global CSS file, you can use the @import CSS property within it.

In the example below, the <link> tag is where you are referencing Google API. The href value is the most important — FontName is the font we want to use in our web page. You can replace the FontName value with one of the supported fonts, which you can find in the Google Font Directory.

</head>
<title>Home Page</title>
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=FontName“>
</head>/>

The second step is to use CSS to specify how we want to use the font we’ve requested.

Let’s say that we want to use the FontName font on all paragraph tags in our web pages.

We would use the following CSS:

p {
font-family: 'FontName';
font-size: 12px;
}

For those not very familiar with CSS, it helps to read it out loud in plain English to understand what’s going on. What the code above is saying: “All [p]aragraphs should use the font of ‘FontName’ with a size of 12px.”

---

Requesting Different Styles of a Font

---

Now that you’re familiar with the basic format of making a request to Google Font API, let’s explore some advanced ways of making requests.

By default, you will get the normal style of a particular font. But what if you wanted to use and display another style, such as italics or bold?

Easy. You just add a colon (:) at the end of the font’s name followed by the style you want. And if you need more than one style, you just separate them with a comma (,).

For example, if you want the italics and bold version of FontName, then your reference becomes:

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=FontName:italic,bold“>

The styles you can use are italic (italic or i), bold (bold or b), and bold italic (bolditalic or bi).

---

Requesting Multiple Fonts

---

Oftentimes, you’ll want more than one font. There’s no need to make multiple references if this is the case. All you have to do is append your request with an | symbol followed by another font name.

Let us say you wanted the bold italic version of FontName and the italic style of AntotherFontName; our link would be:

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=FontName:bolditalic|AnotherFontName:italic“>

That’s all there is to it!

---

Tools for Working with Google Font API

---

Google has created some tools for helping you work with the Google Font API, including the Font Directory,Previewer and Web Font Loader. Learn more about each specific tool below.

---

1. Google Font Directory

---

The Google Font Directory lists all the available fonts you can use. There are currently 18 fonts available, such as Droid Sans, Molengo, and Nobile. Clicking on each font preview will reveal more information about it, including the designer of the font, the license type of the font, a description for you typophiles out there, the entire character set, and more. Additionally, clicking on the “Get the code” tab shows you the code that you can copy and paste to get the font to work.

---

2. Google Font Previewer

---

The Google Font Previewer tool lets you experiment with each font. You can tweak font characteristics such as size, style (variant), and spacing. Once you like what you see, it spits out the code you need to use in order to render the Google font exactly the same way as your preview.

---

3. Web Font Loader

---

For web developers needing more control of their Google fonts, there’s a JavaScript library that you can use. It gives you event listeners at various stages of the font-loading process that you can bind JavaScript functions to.