Choosing Fonts for Your Mobile Website

Choosing fonts for your mobile website

EDITOR’S NOTE: There is an update to this blog post, see it here.

So you are building your first mobile website for your business and you have a kick-ass design from your designer. You are ready to go build out this thing but there’s one slight problem—your designer used some fancy schmancy non-web-safe fonts throughout the whole design. By slight problem, I actually meant the worst nightmare for developers. How do you prevent this from happening? You should first educate your designer on choosing fonts compatible for the mobile web.

So let’s rewind and go back in time—back to before your designer started designing. Know the facts and learn when to use restraint. Restraint can keep creativity alive, a good designer should be able to value them instead of defying them. Now let’s talk about fonts.

Web Safe Fonts

It’s good to know about the regular web safe fonts before diving into mobile. Let me list them for you:

  • Arial/Helvetica
  • Arial Black
  • Comic Sans MS
  • Courier/Courier New
  • Georgia
  • Impact
  • Times/Times New Roman
  • Trebuchet MS
  • Verdana

Mobile Web Safe Fonts

Now let’s take iPhone, Android, and Blackberry into consideration. All these mobile devices come with different system fonts, so your safest bets for mobile would be the following:

  • Arial/Helvetica
  • Courier/Courier New
  • Georgia
  • Times/Times New Roman
  • Trebuchet MS
  • Verdana

Also note that on some older Androids, they will replace any serif fonts with Droid Serif and sans-serif fonts with Droid Sans.

Custom Web Fonts Services

You are probably saying, “I don’t want my brand to be bland, my mobile website needs fancier fonts!” Well, don’t worry, below I will review some of the best custom web fonts services out there. Do keep this in mind though, not a single one of them is guaranteed to work across all mobile devices.

@font-face

This is not really a service, it’s just a CSS property. With Font Squirrel’s @font-face generator, this technique can be easily implemented. This is a favorite among many designers.

Pros

  • Easy setup (only if you’re using Font Squirrel’s @font-face generator)
  • Widely compatible
  • You can use ANY fonts you own the licenses to
  • The fonts ares hosted on your own server. The only downtime for the fonts is when your mobile website is down

Cons

  • It requires massive amount of CSS codes which would hinder performance
  • Even though you can use practically any fonts you want but you have to own the font licenses and make sure the licenses allow for @font-face embed. This could get very expensive

Cost: Depends on the price of the fonts you use

Google Web Fonts

This is easily my favorite service. Its library is ever growing and the setup only requires one line of code in the HTML for each font you use.
Google Web Fonts

Pros

  • Easy setup
  • Works with most iPhone, Android, and Blackberry devices
  • Slim chance of any downtime since it’s hosted by Google
  • Google lets you download the fonts to your desktop. This is convenient for your designer during the design process
  • Font Previewer on their site is great for playing with the fonts before implementing them
  • No bandwidth limitations and you can use as many fonts as you wish on a specific site!

Cons

  • The library is still relatively small, it only consists of a little over 100 fonts, but it is growing consistently. EDIT 2/16/12: it’s grown to 400+ now
  • Some fonts don’t work on anything below iOS 4

Cost: FREE

Typekit

Typekit is pretty cool. It came out couple years ago when there weren’t much competitions for custom web fonts services.
Typekit

Pros

  • Huge library with over 4000 fonts
  • Has specific mobile settings for iPhone and Android devices
  • Once you include the Typekit javascript on your HTML, you don’t need access to the HTML and CSS to change fonts. You can use the Editor on typekit.com, which means you can make fonts changes from any computers anywhere
  • There’s a free version

Cons

  • The heavy javascript hinders performance
  • No Blackberry support
  • The free version puts a branded tag on the corner of your mobile website
  • Changes sometimes take a while to go into effects
  • Cannot download fonts to desktop
  • Pricing plans are on a per year basis
  • There are limitations on bandwidth and number of fonts used according to the plans you select

Cost: $24.99 ~ $99.99 per year

Fonts.com

I remember using Fonts.com’s web fonts service while it was in beta last year. It has launched publicly since then, but the problem is it still feels like it’s in beta.
Fonts.com

Pros

  • Massive library with over 10000 fonts
  • Supports more languages than any of their competitors
  • Works with most iPhone, Android, and Blackberry devices
  • Highest pricing plan provides desktop download of fonts

Cons

  • The heavy javascript hinders performance
  • Painful implementation process
  • The font browsing experience on their site is horrendous
  • Their website is very slow. It’s hard to access to editor
  • Too many features in the editor creates confusion for the less-tech-savvy users
  • There are limitations on bandwidth according to the plans you select

Cost: $10 ~ $500 per month

Fontdeck

You can tell Fontdeck is made by designers for designers, their website is beautifully done. Their service is pretty good, too.
Fontdeck

Pros

  • Has over 700 quality fonts
  • Easy to implement
  • Works with most iPhone, Android, and Blackberry devices
  • The pricing plan is on a per font basis, and it’s really cheap
  • Fonts browsing experience is superb on their website

Cons

  • There are limitations on page views per month

Cost: As low as $2.50/year per font, each font’s price varies. Enterprise pricing is available for websites exceeding 1 million page views per month

Other Services Worth Noting

  • FontServe
  • FontsLive
  • Just Another Foundry
  • TypeFront
  • Typonine
  • Typotheque
  • Web fonts Kernest
  • WebINK
  • Webtype

Best Practices

While fancy fonts are cool and slick, they should be used sparingly. The best practice for mobile websites is to use custom fonts on only headers and any kinds of big typography layout elements. On body text, it’s best to stick with the mobile web safe fonts listed above.

Now that you are educated on what fonts you can use on mobile websites, make sure to pass the knowledge to your designers. Hit the share buttons or leave your thoughts in the comment section down below.


About the Author

Mike Mai operates the train of creative thoughts at Bluetrain Mobile. He loves web, mobile and social media. Language skills include Mandarin, Cantonese, and HTML5.
@mikemai2awesome

Related: