So what’s all this about webfonts? Can’t I just have my website display my text in the font I want?

Well, the answer is “yes and no”… You see, the thing about the web is that what your visitor sees entirely dependent on the device they’re using to view a website.

Inconsistency

It sounds a bit odd as we’ve come to think of the web as an alternative to the printed page, but a website can look completely different from one visitor to the next.

The most obvious example of this is the size of their screen, but other things can vary. Here are some quick examples:

How do fonts vary?

When coding a website, the ideal font is specified. If the viewer’s device has this font, it’ll use it to style the text. It’s possible this font might not be installed or available on the viewer’s device, so a fall-back font has to be specified. A list of fonts might look like this:

  1. Helvetica
  2. Arial
  3. Sans-serif

You can assume that anyone using a Mac, iPhone or iPad will have Helvetica available, so they’ll see the text, but Windows users are less likely to have Helvetica, so will see the fall-back font, Arial.

The differences between Helvetica and Arial are subtle so falling back to Arial if Helvetica isn’t available isn’t going to make the website look wildly different.

If neither is available, the system’s default sans-serif font (sans-serif being the grouping that both Helvetica and Arial belong to).

Forcing the matter

There are a few fonts that can be found on pretty much every device that a visitor might use: Arial, Georgia, Verdana, Courier, Times New Roman. You’ve probably heard of some of those if you use a word processing package.

But if your brand uses a stylised font you might want to make sure that’s used instead of a generic fall-back…

There is a solution in the form of webfonts! This is when, instead of depending on the fonts that the visitor has installed on their system, a website can send a font to the visitor and use it to display text! So it doesn’t matter whether the user has the font installed on their device or not!

Disadvantages

That sounds great! Why not just do it for every font on the web!?

Loading times

I mentioned earlier that connection speed is not something that can be counted on. Sending webfonts to someone who’s viewing your site will slow it down.

Everything that a visitor sees when viewing your website is sent from the website itself to their device. All the stuff that’s sent takes time to load, and webfonts add to this.

As with most things on the web, it’s worth weighing up the cost of extra load time against the advantages of them seeing a brand-consistent font.

License cost

Fonts are hard to make.

Design process

First you’ve got to decide what kind of font you’ll be designing– will it be a headline-only font, full of character, or a font for larger chunks and paragraphs of text that’s nice and readable. Also, what feeling will it convey? Friendliness? Elegance? Austerity?

Then comes filling a notebook with sketches and ideas, then collecting all of those ideas into a roughly coherent whole.

Following that, the sketches have to be drawn and refined on an art program on a computer. There are also innumerable other considerations:

Anyway, you get my point. It’s not something I’d ever attempt and those who do are deserving of remuneration!

Buying a webfont

Sometimes webfonts are free; some are free for personal use but not for commercial use. Services like Google Fonts and Font Squirrel offer a wide range of free fonts, but if you need to use a font on your website that’s not free, you have to buy a license. There are a few ways to do this

So do I need a webfont?

As with anything on the web, there are pros and cons to weigh up when considering a font for your site.

Your web designer will keep you right as to the best approach to licensing your webfonts, if that’s going to be necessary.