Webfonts

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:

• Colours: a colour can look bright and vibrant on one screen and muted and understated on another;
• Screen resolution: high definition screens are getting more and more common – a site may look fine on a standard definition screen, but when viewed on a HD/Retina smartphone screen the images can often look blurry and out of place
• Connection speed: are they on 3G or wi-fi? A slow loading site over a broadband connection can be tolerable but on 3G it can be hugely frustrating;
• Browser capability: newer browsers bring new features, meaning a site might not look as polished or as rich in an older browser (the content should still be accessible though, but that’s a whole other post!);
• Enforced limitations: those viewing your site from their web browser at work might have certain features limited, so might not have the full experience (again, the content should still be available to them);
• Fonts: the fonts a visitor sees when viewing your site can also vary from device to device.

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:

• How legible is it?
• How will each and every letter flow into every other letter?
• What about accents like ‘é’, ‘å’, ‘ü’ and ‘ñ’?
• What about special characters like ‘&’, ‘™’, ‘®’, ‘@’ and ‘½’?

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

• Some services charge a flat yearly subscription
• Others charge for a set number of visitors to your site
• Others charge a one-off fee

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 brand fonts may be in that small list of fonts that pretty much every computer already has installed, so no webfonts are needed
• Maybe your web designer only uses your brand font for headlines, not paragraphs, etc., as the extra load time would mean less visitors would wait to view your site.
• It could be that it’s worth all of your brand fonts being installed as webfonts

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