I’m sure it won’t take Apple long to get Google to remove it from the Market so hurry and get yours while it lasts.

If you’re a professional web designer you may already know this, but how many of you think that you need to stick to Arial, Helvetica or Times as the only fonts you can use on your web pages without using a graphic to display them? Just what I thought,  most of you. Well, I’ve got some good news for you. That’s old news.

It is possible to use a wide variety of fonts on your web pages, even some really fancy or funky ones for headlines if you want, and it’s really not difficult at all. The trick is embedding the font directly into the code for your page using CSS. Woah, don’t get scared, I’m about to show you just how easy it is and although there are a couple of ways to do this that require you to purchase the fonts, we have Google to thank for making it incredibly easy and free.

First I’ll briefly mention two websites where you’ll need to pay for the fonts you use. Typekit and Fontdeck are both excellent services but both require you to pay an annual fee to license the fonts you use although both offer a very large selection of fonts to choose from.

Okay, now back to Google and the free way to do it. Currently the Google Font Directory offers only 18 different open source fonts but each comes with several variations and I’m sure they’ll be adding more soon. Adding a font to your web page isn’t difficult but you will need to add a bit of code that Google provides when you select a font to the code for your page if you use the Google Font Directory and you’ll also need to know enough CSS to modify the font weight, size, letter spacing, etc. BUT here’s the really exciting part.

Google just launched a new service called the Font Previewer that gives you an on screen preview of a sample phrase for the font you want as well as controls to adjust the size, letter and word spacing, font weight, and the variant (bold, italic) — you can even add a drop shadow if you want — and then provides you with dynamically generated code as you make the adjustments. Once you’re happy with the results you simply copy the block of code and paste it into the code for your page and you’re done. No knowledge of CSS required.

Now that you know how easy it is to make your website distinct by using fonts besides the usual standard ones, do me one favor. Don’t go crazy and use a script font for your body text.

The Degasesque effect in this photo is just a happy accident and a combination of the low lighting and being shot on a cell phone. I took the photo because I thought it was cute the way the shorter girl on the left is standing on point to see over the railing and the look of excitement on the face of the child asking for an autograph is priceless.

If you like to post screenshots of your or other’s Twitter tweets on your blog here’s a trick that will save you a little time. Instead of taking a screenshot, editing the image, and then uploading it to your server, all you need to do is change a few letters in the URL of the tweet.

To create the above screenshot of the one of my Twitter posts I simple changed this:

http://twitter.com/hughbriss/status/16177752718

to this:

http://chen.vc/hughbriss/status/16177752718

Thanks to Haochi Chen for this little time saver.

Here’s another somewhat more complicated option, but this one preserves any links so they are still clickable, just like the original tweet.

1. 
   hughbriss Nice to hear that @Starbucks is finally going to offer FREE WiFi. Even though I have a gold card and don’t need it. 14 Jun 2010 from TweetDeck

To create this style I used QuoteURL. You simply paste the url of a specific tweet into the text field, click save and then copy and paste the generated code into your post.

There are plenty of written and video tutorials on the best ways to use Twitter but Twitter now has their own official video tutorials and they’re posting them on their brand new YouTube channel.