Start using awesome custom web fonts today!

A quick recap

Several older embedding options exist that have been around for awhile. Scalable Inman Flash Replacement (sIFR) which requires the Flash plugin and is thus in my opinion less desirable option, is one of them. There are also server side font replacement implementations where graphics are generated and then served to the web browser, but again this requires multiple technologies to work and has many limitations.

Cufón, a Javascript solution

A more recent technology advance in fonts is Cufón. Cufón requires no flash install and no extra software on the server side. It’s a pure JavaScript implementation and converts fonts into inline graphics. To a screen reader or web crawler the text looks like plain HTML text as you apply Cufón to the HTML text elements you wish to replace. This is one of the best font implementations yet, but it still has several limitations and caveats.

1. You cannot select or copy any of the text that has been replaced with Cufón. This is minor, but still a usability issue since the user expects to be able to copy and paste text if they want.
2. You cannot user your browsers page search for Cufón replaced text.
3. Cufón does not support rollovers, so you cannot apply a hover to your links. This is a little more of a deal breaker since many navigation toolbars require rollovers.
4. It is illegal to embed many fonts with Cufón since you are distributing the actual font data in a javascript file. This is not an issue with Flash since the actual font data is not being distributed. Cufón can encrypt the font data, but you will still be in violation of many font license agreements.
5. Knowing which fonts you can legally embed is a bit of a nightmare since the legal jargon on many font foundries will just leave you confused.
6. You must upload your fonts to the Cufón site and generate a JavaScript version of your font. This is time consuming and one extra step.

Welcome to Google web fonts

Google web fonts solves five of the six issues listed above.

1. You can select and copy / paste any of the fonts.
2. You can search for the fonts with your browsers page search.
3. Hover link rollovers are fully supported.
4. All of the fonts in Google web fonts are free to use and eliminate the research or guesswork needed.
5. Once you choose the font you would like all you have to do is copy and paste the generated code into your HTML document.

The fonts are CSS based, and the concept of CSS linked fonts has been around since 1998, but it hasn’t been until recently that you could guarantee most users would have browsers that could see these linked fonts.

Why Google Fonts? It’s fast and super easy!

Go to Google web fonts and browse the many fonts until you find one you like. Select it and launch the Google font previewer, here you can tweak the font and even add CSS text shadows. At the bottom of your previewer you will see a CSS snippet. Copy that and past it into your style sheet and you’re done, all your fonts will be like the one in the previewer.

Of course you probably don’t want to apply it to your entire site. In the case above it would probably be best to apply the style only to HTML header tags, so you could change the body tag to h1 or even use a class. For the example below I just created a google class.

Josefin Sans is just one of the many great fonts available at Google web fonts.

<link href="http://fonts.googleapis.com/css?family=Josefin+Sans:100,100italic,300,300italic,400,400italic,600,600italic,700,700italic" rel="stylesheet" type="text/css" />
<style type="text/css">
.google {
     font-family: 'Josefin Sans', serif;
     font-size: 36px;
     font-style: normal;
     font-weight: 400;
     text-shadow: none;
     text-decoration: none;
     text-transform: none;
     letter-spacing: 0em;
     word-spacing: 0em;
     line-height: 1.2;
}
</style>

And that’s about all there is to using Google fonts, it’s quick and easy.

What platforms does Google fonts support?

Going forward pretty much everything is going to support CSS based fonts, but here are the versions that support Googles method.

• Google Chrome: version 4.249.4+
• Mozilla Firefox: version: 3.5+
• Apple Safari: version 3.1+
• Opera: version 10.5+
• Microsoft Internet Explorer: version 6+

Can I download them and use them in a graphic applications like Photoshop?

Yes, while you don’t need to actually download them in order to use them on a website, you can download all of the Google Web Fonts if you like and use them in your favourite graphics package.

@font-face; another great method for using custom fonts

You can use download Google web fonts, The League of Movable Type fonts, or any web licensed fonts and use the @font-face method. In fact this is a very viable method now that most browsers support. OTF fonts will be supported in all the browsers that Google Web fonts are supported in, and in some cases all the way back to IE4. The only real difference with Google Web fonts is the ease of use and convenient library, but feel free to download any fonts you want and use this method if you prefer. @font-face also has all the same benefits that were listed for Google web fonts.

How to use @font-face

Using css linked fonts is pretty easy and has been around since 1998. Today most browsers support them, so go nuts. First download a the font you like, it must be web licensed so grab one from Google web fonts or The League of Movable Type. Once you have done that you will need to upload the actual font to your web server.

ORBITRON A high impact font with four 4 styles from The League of Movable Type.

ORBITRON black.

ORBITRON bold.

ORBITRON medium.

ORBITRON light.

The CSS for above example although long is quite simple. @font-face declares your font-family name and src (source) path to where the font is located on your server. Once they are set up you can start creating css classes or styling any HTML elements as you normally would. The example above is shown below.

@font-face {
     font-family: "Orbitron-Black";
     src: url("PATH_TO_FONT/orbitron-black.otf");
}
@font-face {
     font-family: "Orbitron-Bold";
     src: url("PATH_TO_FONT/orbitron-bold.otf");
}
@font-face {
     font-family: "Orbitron-Medium";
     src: url("PATH_TO_FONT/orbitron-medium.otf");
}
@font-face {
     font-family: "Orbitron-Light";
     src: url("PATH_TO_FONT/orbitron-light.otf");
}
.orbitron-black {
     font-family: "Orbitron-Black", serif;
     font-size:18px;
}
.orbitron-bold {
     font-family: "Orbitron-Bold", serif;
     font-size:18px;
}
.orbitron-medium {
     font-family: "Orbitron-Medium", serif;
     font-size:18px;
}
.orbitron-light {
     font-family: "Orbitron-light", serif;
     font-size:18px;
}

Other options for web licensed fonts

TypeKit is one of the commercial options with yearly pricing options and a limited free option. You can find commercial fonts here, but unfortunately a lot of the big names are missing. A quick search for favourites like Gotham, Helvetica Neue and Frutiger yielded nothing, so for now I’ll be sticking with Google web fonts and The League of Movable Type.

The future is digital

It’s quite annoying that the large font foundries have locked down and prohibited the use of their fonts on the web or only allowed clunky implementations. It’s as if they believe that if they were to open up their licenses that the world would cease to buy fonts tomorrow. I think it would be quite the opposite. Individual sites that want to embed fonts regardless of whether they own the rights to them or the licensing restrictions are going to use them. Larger corporate sites and individual sites that respect the copyright of fonts will instead move to the quickly growing library of web licensed and free fonts. The future is digital, and the larger foundries really need to wake up before people just move elsewhere for their fonts.

First, when someone is viewing a newsletter their attention span is probably extremely short. They probably want to get onto their next email, but something has triggered their interest in your newsletter. Why waste that interest on jumping them further down the email, this is your chance to grab their attention and hook them into your website. It may be your last chance before they click onto their next email and your website is probably a much richer web experience anyway.

The second reason is anchor links are just another thing that often goes wrong in email newsletters. They act unpredictable, and at the time of this writing, don’t even work properly in Gmail. I also remember a time when an anchor link would show a blank screen in Yahoo! Mail, although this has since been fixed.

Despite these reasons, using an anchor links in an email is usually not my decision to make, so I have to try and find a way to make it work. A regular anchor link like the one below will not work in Gmail.

<a href="#section1">Section One</a>

However this will work.

<a href="#section1"><span>Section One</span></a>

Like many email newsletter hacks and tricks it’s a simple one, but can be frustrating and time consuming when trouble shooting it for the first time.

Make sure HTTPS is enabled

From the Google help page.

We’ve recently made the ‘Always use https’ setting the default behavior in Gmail (the default used to be http). Here’s some background: If you sign in to Gmail via a non-secure Internet connection, like a public wireless or non-encrypted network, your Google account may be more vulnerable to hijacking. Non-secure networks make it easier for someone to impersonate you and gain full access to your Google account, including any sensitive data it may contain like bank statements or online log-in credentials. Accordingly, we enable the ‘Always use https’ option in Gmail by default. HTTPS, or Hypertext Transfer Protocol Secure, is a secure protocol that provides authenticated and encrypted communication.

So most of us don’t have to worry, but it might be wise to look up in your address bar and make sure you are accessing Gmail via HTTPS. When I checked mine neither radio was selected. If you want to check yours just go to the settings and look for  “Always use https”. It’s as simple as that, can you feel that warm fuzzy feeling now?

About a month ago the iPhone version started reformatting all of my linked web pages to a mobile Google format. This was frustrating since the iPhone is fully capable of displaying rich web content and in some cases I wanted to see iPhone specific HTML and Javascript content in action. Unfortunately all of this is stripped out in the mobile version. I put up with this for a few days before I decided to look for the settings.

Easy fix

To get your linked web pages back to the way they were meant to be, scroll to the bottom of your iPhone reader and click settings. At the time of writing this you will find 3 settings. Uncheck “Reformat linked web pages for mobile browsers.” and you will now be linking to the real web pages. I’m not sure if I inadvertently turned this on, but if this is the default setting it seems kind of odd for the iPhone version. Luckily with Google there is always lots of ways to customize your experience and they have a great number of other mobile solutions online.

I of course jumped on the iPhone bandwagon, but before I did I spent a lot of time researching many of the smartphones out there. At the time just before the second iPhone was launched there were a lot of great smartphones on the way, but none were out yet. Now that the iPhone has been out for a few months a lot of new devices have emerged. One of the reasons I bought the iPhone was because Apple was ahead of the curve, now a lot of the other manufacturers have similar offerings, but are any of them really iPhone killers? I decided to do a quick smartphone round up to see what’s currently out there.

Android is the newest cool kid in town

Of course you can’t talk about smartphones without talking about Android and their new G1 offered by T-Mobile in the US. This phone by HTC came out a couple of weeks ago, but even before a phone was announced, the Android platform had huge buzz in the blogsphere and tech news sites. I wrote about it several times and was pretty hyped about it myself when I wrote Android Android Android! everyone’s talking about Android and I still am pretty buzzed about it.

Android promises a lot of innovation and is really shaking up the industry. First it’s open source, which means anyone can play with the innards of the code. Up until now this was practically unheard of, and this could be the end of locked down phones, which I think is great. I can do what I want with my computer, I should be able to do the same with my smartphone, which is basically a portable mini computer. This is one flaw with Apple’s phone, without special applications I can’t even treat this phone as a storage device or copy my music on to different computers. The Open Handset Alliance is another great by product of Google Android.

Everything I have read about the G1 says that it is no iPhone killer, but there is massive potential and that this is just the start. Google is on to something here, and one of these days there may be a Google phone that is an iPhone killer. Remember this is Googles first phone.

See Engadget’s review on the G1

Blackberry Bold and Storm

Research In Motion is one of the big players and has been around for a long time. The big toys from RIM this year are the Bold and the Storm. If any phone could have swayed me from my iPhone purchase it would have been one of these. In the end I’m glad I went for the iPhone because the Bold does lean towards business users, and the Storm is taking forever to come out.

The Bold is the newest and greatest Blackberry in town, with a higher resolution than the iPhone but smaller screen this thing is crystal sharp. I have played with it once and it is pretty clear, but you have to wonder what the point of such high resolution is with such a small screen? It’s a nice phone, but it still feels a bit flimsy, I’m not a fan of how easily the Blackberries tend to scratch, but with that said if I had to pick a second best phone, I would probably go with a Blackberry.

The Blackberry Storm may be a different story, this is RIM’s attempt at the consumer market and is a direct competitor to the iPhone. It has what RIM calls “tactile-touch” which is basically a spring loaded screen. You basically have to push all the way down to hit a key, which sounds pretty cool. I’m used to not having to push down, so it might be hard to get used too. So far I have read that the new touch screen is awesome, to not so great, so only time will tell. I think what you are used to will have a lot to do with how much you like the screen. Blackberry is late to the game and a lot of people who use touch screens have gotten used to how they work now, but this may appeal to the users who have not switched to a touchscreen yet.

You can find first impression reviews at Gizmodo and Engadget along with a gallery of PowerPoint slides on The Boy Genius Report.

Sony Ericsson XPERIA X1

Sony’s EXPERIA X1 has been rumoured and talked about so long that I almost forgot about it. Its already available in some places, but still pretty hard to find.

This is a pretty sweet looking phone, but I’ve read a lot of good and bad about it. First it’s Windows Mobile, so depending on how you feel about Windows Mobile, your decision may be already made. There have also been claims of slow response on the touch screen and that the keyboard keys do not provide enough tactile feedback. Either way, I don’t think this phone will be viable until it’s on major carriers. Rumours are that it will be available on AT&T at some point.

Unboxing of XPERIA X1 and some nice high resolution shots and a very early review at The Boy Genuis Report.

HTC and a world of cool smartphones

HTC has so many cool phones it’s hard to mention them all. They build the G1 Android phone and had a hand in the XPERIA X1. They also released the Touch Diamond this year, and the Touch Pro will be out soon. There is also the really cool HTC Touch HD which unfortunately will not be showing up in North America, but it has been called an iPhone killer.

HTC definitely makes a whole lot of cool phones, and I’m sure we will be seeing Google’s Android on a lot more HTC phones.

Nokia

Nokia is huge in a lot of the world, but not so much here in North America. That may all change if they start bringing out slick phones like the Nokia 5800 XpressMusic. It comes with a stylus so you can write out your messages, so if a stylus is your thing, then the XpressMusic might be for you.

Engadget has a hands on review.

Samsung instinct

Samsung has also jumped onto the touch screen smart phone bandwagon, the big one this year was the Samsung Instinct. I’m a huge fan of Samsung products, especially their LCD displays, but for some reason their phones just don’t do it for me. The instinct did perk my interest, but then the reviews came out and laid my anticipation to rest. The Omnia on the other hand seems to score a bit higher, but it’s a windows mobile device and it doesn’t have the prettiest interface. Samsung is also a member of the Open Handset Alliance, so we may see a Google Android phone from them in the future; fingers crossed.

Openmoko, truly open

Although a much smaller player in the smartphone field we cannot forget Openmoko, the truly open source smartphone platform and the device it runs on, Neo FreeRunner. I have been keeping an eye on Openmoko for many of the same reasons I watch Google’s Android platform. I believe in the concept behind these platforms, but Openmoko steps it up a notch, this is a truly open source project, everything from the OS to the phone itself; even the CAD files can be downloaded so you can modify the actual phone itself. Openmoko is definitely a hardcore computer geeks dream.

More information can be found on the wiki entry for Openmoko. The phone can be purchased at the official Openmoko website, and you can also visit the Openmoko wiki website which has much more information.

Apple iPhone, the darling of touch smartphones

And of course this roundup wouldn’t be complete without the iPhone. Apple has lead the way here the same way they lead the way for mp3 players. Whether you love or hate Apple there is no denying that they are market leaders in innovation and have consistently upped the bar delivering a compelling product that’s hard to beat. Almost every review I have read on smartphones uses the iPhone as a measure of quality. You always hear references to Apple’s iPhone or “the iPhone Killer” catch phrase.

That doesn’t mean the iPhone has no flaws, one of the most mentioned features that is missing is “copy and paste” functionality. I don’t know if Apple will ever add this, but it’s a much needed and requested feature, especially for sending web addresses to people in applications such as Twitterific. There is an option to email someone a link from Safari, but copy and paste would be a lot more useful. Another thing that needs fixing is the browser, although it’s a fantastic mini browser, possibly even the best, it does tend to crash an awful lot, at least for me. That said, I am more than happy with my iPhone and it really is the best device I have bought in years. Many of the games are simple but very addictive, just what you want on a small device like this and there is a constant stream of new applications every day. When I was showing my phone to someone once they asked “is there anything it can’t do?”, well yes, it won’t do your laundry yet.

An amazing year for gadgets

It really has been a great year for great gadgets and smartphones in particular. I can’t help but get excited about 2009′s lineup. Where will Apple be this time next year, and the one I’m really keeping an eye on is Google’s Android. It will also be interesting to see how the Blackberry vs Apple battle turns out, I personally think Android is more of a threat than the Blackberry. The Blackberry has a strong loyal consumer base and owns the business sector. They are also making their phones pretty, because lets face it, even business men and women want to have a cool cell phone.

For the third iPhone next year I’m predicting a higher resolution, better GPS and a better camera as obvious places to work on. I hope all the other smartphones have surprises up their sleeves also. 2008 was an amazing year, lets hope 2009 is even more ground breaking.

So how does Google Earth hold up on the iPhone? Well obviously it’s a bit trimmed down, but still much better than I thought it would be. You can see photos, Wikipedia entries and move around the earth in the typical intuitive Multi-touch way that we are all so used too. You can even twist two fingers to rotate, and if you tilt your device the accelerometer kicks in and allows an angled view so you can see the 3D surface of the Earth. You can also use the iPhones GPS to find your current location on planet Earth. The application runs fairly smooth on the iPhone, but I did notice a few hiccups which sometimes even happens on the full Google Earth.

I have taken several screenshots below. You can also check out the official Google announcement on the Google blog which also has video, but the application is free, so check out the app store and get it now.

Toronto via GPS.

Wikipedia entry via iPhone Google Earth

Mount Everest in all its 3D glory

Hot on the heals of the Google Android phone will be the new Blackberry Storm which is a direct competitor to the iPhone. It has a soft touchscreen with built-in tactile feedback. I can’t help but wonder how scratch resistant this will be; I have a Nintendo DS which is a soft touch screen and it is very scratched up. I really wouldn’t want this to be the case for a phone that goes in your pocket for most of the day. The iPhone screen is extremely scratch resistance, so this could be a show stopper for some people but we’ll have to wait and see. The release dates around the Storm are a bit cloudy as Verizon seems to be playing games with everyone. Today many blogs linked to Verizon’s Storm announcement page which was then removed.

Exciting times in deed, although the Android OS has my attention more than any of the phones themselves. Another interesting tidbit was in London today when one of the Android guys was asked if it could run on other devices he replied “why not?”.

The first thing I have noticed about Chrome is that it feels very zippy. I will have to try some more intensive tasking, but so far the tabs seem very responsive. Right now I have over 15 tabs open including game trailers. Game trailers usually slows down Firefox a bit while loading or switching tabs, but in Chrome I rapidly clicked back and forth on the tabs and it was extremely responsive. I also find that pages seem to load faster. 

When you open a new tab with Ctrl T or the plus sign you are presented with a home page of your history with thumbnails of everywhere you have been recently. This is a different approach and I think I like it. You also have access to a search panel and you are asked the first time you install if you would like Google to be the default search engine. 

Google suggest has also been incorporated into the search / URL bar which double up as the same field. There is no separate search field, which really does makes sense once you start playing around with it. The suggestion seems rock solid too. Page search is also very intuitive and has page highlighting as you skip through each occurrence of your word search. 

Developer tools

One of the big reasons a lot of people use Firefox, at least web developers and designers is the developer add-ons, namely Web Developer and Firebug. Chrome does have built in developer tools similar to Web Developer and Firebug and although not quite as full featured they are a far more powerful default tool set than I have seen in any browser to date. To access an inspector type dialog you can right click the page and select Inspect Element. This will give you a Firebug style interface. There’s also the typical view source and a JavaScript debug screen. 

Another interesting addition to the browser world is a task manager. This shows you exactly what is happening in your browser and what pages are being resource hogs. You can end any task here which consist of tabs, flash and other plugins. The browser is supposed to keep running even if something fails in one of the tabs. There is also a link at the bottom of the task manager called Stats for nerds which will give more details about what’s going on. You can also open dialogs and still use the browser at the same time.

Privacy

Of course I know what a lot of people are thinking when they see a page full of pages they have recently visited along with thumbnail screenshots. What about my privacy? Well aside from being able to clear your history there is also an interesting tab mode called “incognito” or “porn mode” as some of the blog sphere have started calling it. Google even adds some funny humour to the description when you go into incognito mode. 

Going incognito doesn’t affect the behavior of other people, servers, or software. Be wary of:

• Websites that collect or share information about you
• Internet service providers or employers that track the pages you visit
• Malicious software that tracks your keystrokes in exchange for free smileys
• Surveillance by secret agents
• People standing behind you

So keep in mind it won’t work when people are standing behind you. 

Is there anything bad about it so far?

I would not go so far as to say there is anything bad, just some things that are missing. When I right click on an image I would like to see more options such as view image or a view background image similar to Firefox. There is however a copy image to new tab. I would also like to see a print preview, I could not find one. An advanced configuration screen like Firefox has would also be nice, maybe there is one, I have not dug very deep yet. Obviously it would also be nice to have my favourite FireFox plugins, but to be honest I can’t say too many bad things about Chrome so far. This may be my new surfing browser of choice. For now Firefox will remain my development browser of choice.

Final thoughts

This is a really polished first release. The interface is lightweight and clean. It does feel very Google like and I can’t wait to see what they will do with Chrome in the future. I’m sure there will be even more reason to use Chrome in the near future, like Gears enabled web sites that offer a lot more than non-gears enabled web sites. Google has created many duds in the past, but I really don’t think this is one of them. So far I am very impressed and I will continue to use the browser for a week or so and see how things work out. Why not give it a try yourself.

This is really big news and probably really bad news for Microsoft. Google has already released Gears a browser add-on which allows Google to jump start browsers ahead into more modern standards. Chrome will use webkit, the same engine that Safari uses, but it will not use the webkit Javascript engine. It will use it’s own, which should make apps run much faster and with more features.

Could this really be Google’s entrance into the desktop market? I believe the future of applications is online. Everything is headed in that direction. More and more people are accessing their apps and data in multiple places and on multiple devices, and right now the major player in that space is Google.

Update: Google Chrome – first impressions are the most important

More info at TechCrunch:
Meet Chrome, Google’s Windows Killer
First Images of Google Chrome
No Joke: Google Introduces The Chrome Browser With A Cartoon

Even though I have an iPhone now I am eagerly awaiting the reviews for the first Android phones. Competition can only be good for everyone. Apple gave the smartphone industry the kick it needed to start innovating and now things are about to be kicked up a notch with Android entering the scene. HTC also seems really serious about releasing great phones as they have proven with the HTC Touch Diamond which was based on Windows mobile. The UI of the Touch Diamond was nicely designed, but only skin deep, hopefully Android gives them the flexability to really flex their muscle and serve up an even better UI.

Google has also finally released an updated Android SDK today.