Font

Make a unique website with web fonts

On 14/04/2011

In Help to make a website

Fonts cause a lot of problems, though it’s not necessarily easy to understand why; any old application can understand letters and numbers, but they need to be told exactly how to display them on the screen.

This is of particular concern for people who make a website, and has meant that website font choice had traditionally been pretty limited.

Fortunately, these days things are a little different. By taking advantage of modern website technology standards, it's become a whole lot easier for webmasters to control exactly how their site will look once published online, and to create a truly unique site design.

How do fonts work?

Whenever a computer displays characters on a screen, it uses information contained in a font file to find out exactly how each character should look on-screen: information that needs to be accessible for a computer to use it.

Because each computer has its own collection of installed font files, and because there are literally thousands of different fonts, there is no way to know exactly which fonts are installed for use on any given computer.

Website vs. application fonts

This doesn’t pose a problem for most applications, as their content is displayed and used locally, on the same computer. Websites, on the other hand, are designed for external viewing by anything with a web browser: from computers to phones, and everything in between.

To make sure a website looks exactly the same on all these devices and web browsers, webmasters have traditionally been limited to using fonts that are commonly found on pretty much any browser-enabled device. Using these fonts helps ensure a webpage will look the same from browser to browser, but it also limits the choice of fonts for website designers.

However, there are zero guarantees that any given font - even supposedly “web-safe” fonts like Arial, Times or Courier - will be installed on every browser-enabled device. And if a required font isn’t installed on the device used to view your site, its browser will simply choose a different one.

Web fonts

Instead of relying on fonts installed locally on the computer, smartphone or tablet used to view a website, web fonts are all about telling browsers to use a font file located online. The idea isn’t new, but the widespread use of rapid Internet connections these days means that having to access online font information to display a page won’t adversely affect site usability for most visitors, as the information is downloaded quickly and transparently.

Using a web font instead of a regular font means that site visitors will view your site exactly the way you intended it to look, every time.

 

To use a web font, all you need do is link it from your site code (this tells a web browser where to find the font file you’ll use for your site), then create or modify your existing site CSS to reference the font. It’s that simple. Choosing web fonts To use a web font for your website, it’ll need to be licensed for third-party use - people make fonts, so understandably you’ll need to purchase a license to use most of them (it helps font designers pay rent and buy food, after all).

But there are also “free” fonts, made available for use via open (free) licenses. Google Web Fonts is one such one-stop-shop free font service, and includes everything you’ll need to browse and link chosen fonts.

Putting web fonts to use to create a truly unique website design is a relatively painless procedure, and it only takes a few minutes to create a website (or modify an existing one, such as this site) to take advantage of them. Our web fonts tutorial is a great place to get started on personalizing your site design with web fonts (and if you need a hand, just contact the support team – we’ll point you in the right direction).