Ask Charly Leetham

Online Business Implementation Expert - Helping Businesses Harness The Internet As A Channel To Market

Online Business Implementation | Website Design and Development | Web Hosting | Domain Names

  • Home
  • About
  • Our Services
    • Our Work
    • Nice Things People Say
  • Resources For Online Businesses
  • Shop
  • Blog
  • Contact Us
  • Legal Policies
  • My Account

Web Fonts & Typography in 2014….

January 11, 2014 by Charly Leetham Leave a Comment

design-concept-brightBack in 2010, I wrote about using Websafe Fonts for your website to ensure that the display integrity was maintained.  This article is long overdue and will revisit ‘websafe fonts’ and the use of Web Fonts to really spice up the look of your website.

A quick refresh on websafe fonts and why you want to use them.  Until recently, when you selected a font to use on your website it was important to ensure that it could be displayed on the visitors computers.  This was a function of the browser – and if you chose a font that was not loaded on the visitors computer, the visitors computer would substitute it’s own font… thus messing with the display integrity of your website.

However, the advent of Web Fonts means that a web designer can use a much wider range of fonts and do some pretty funky things to spice up a design.

Just what is a Web Font?

Web Fonts are a way to download fonts to the visitors computer.  The font is hosted either on the webserver where the website resides or in a third party library.  One of the first techniques to do this was known as the @font-face rule.

Web Fonts were introduced in the CSS2 specifications.

Basically, you can specify which font to use in your style sheet and download it to the visitors computer – so it doesn’t matter if the font is on the visitors computer or not.

Doesn’t that sound fantastic?  It is – it really is.

However, there are two catches when using Web Fonts:

The browser has to support Web Fonts 

For Web Fonts to work, the browser the visitor uses must support the implementation.  Generally, Firefox; Chrome; Safari; Opera; Internet Explorer Version 9; Internet Explorer Version 10; and Internet Explorer Version 11 support Web Fonts.  There is limited support in Internet Explorer Versions 5 through 8.

It’s important to define a ‘fall back’ websafe font in your stylesheet for browsers that can’t do Web Fonts.

The font you choose must be licensed for use on the Web

As with most things – you need to have a license to use the font as a Web Font; or the font has to be open source.  Not all fonts carry a web font license and site owners and developers need to be aware of this fact.  Always check that the font you are using has a license that lets you use it on your website.

Web Font Libraries

One of the best things about web fonts is that there are a number of web font services that you can choose from. The different services offer a range of options including font hosting.

Google Fonts

My personal preference is Google Fonts.  Google Fonts has been incorporated into a number of WordPress Themes as standard, making it really easy to use.

The google font library is free and currently offers around 630 fonts.

The other benefit of Google Fonts is that you can download and use the fonts on your computer and in print work, giving you a seamless design process

Typekit

Typekit was purchased by Adobe in 2011 and is now part of the Creative Suite subscription.

Offering access to Adobe fonts, the Typekit library has specific licensing requirements depending on the level of subscription you take.

Font Squirrel

I quite like Font Squirrel.  Font Squirrel is a site where you can identify free web fonts to use.  Font Squirrel provides a WebFont generator where you can upload a font and create your own web font.

My only comment is that not all fonts lend themselves to Web Fonts and can become a bit patchy.  Do some testing when you choose a font to use.

For more services check out the Hongkiats’ WebFont comparison and Smashing Magazines Review (it’s a little dated but still good).

How Do I Use Web Fonts

How you use Web Fonts depends on the type of service you’ve chosen to use.

For Google fonts, you can include fonts in 1 of 3 ways:

  • A standard <link> code in the header of your website
  • A Javascript include
  • An @import function

or, if you have a WordPress website that doesn’t already include Google fonts or the Google font you want to use, you can use a plugin like WP Google Fonts

For Typekit, you’ll need to follow the instructions provded on the Typekit website and include the javascript provided.

Web fonts through Font Squirrel need to be uploaded to the webserver, or Content Delivery Network, for hosting and delivery.  The inclusion of the fonts is then achieved through the style sheet for your website – I found FontSpring have an excellent explanation of how to include web fonts using the @font-face definition.

Websafe Fonts are a thing of the past

As more browsers support Web fonts, the use of websafe fonts are becoming a thing of the past. However, this doesn’t mean you shouldn’t consider using a websafe font – it means that you can use another, nicer, font as your primary font.  Just make sure you define a standard websafe font as fallback, in case things go wrong.

 

Share this:

  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to print (Opens in new window)
  • Click to email this to a friend (Opens in new window)

Filed Under: Website Design & Development, Wordpress As A Website Tagged With: web fonts, web safe fonts, websafe fonts, website design and development

Want To Use This Article?

You can as long as you include the following (links must be active):

Charly Leetham, from Ask Charly Leetham, is an Online Business Implementation Expert who helps Small Businesses and Solopreneurs harness the power of the Internet as a Sales Channel or Channel To Market. Get your dose of business inspiration and motivation to help you along. Compiled from the generous contributions of over 79 authors. Grab a free copy today. Motivating Your Mind, Inspiring Your Spirit by visiting www.AskCharlyLeetham.com today

Leave a Reply Cancel reply

  • Home
  • About
  • Shop
  • Legal Policies
Help Yourself

I Want To Start Blogging

Improve Website Email Deliverability [Video]

Configure WordPress To Use SSL [Video]

Create And Install A SSL Certificate on CPanel [Video]

Optimize Your Images For Best Results [Video]

© Copyright Leetham Trust 2007 - 2017 | All prices quote are in Australian Dollars (AUD) and inclusive of GST unless otherwise stated

Business Website Designed by Ask Charly Leetham

eWAY Payment Gateway
loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.