Guide of seo and UX

Web Friendly Fonts – Managing Fonts for Accurate Website Designs

How many times has it happened that you designed your website, only to have it not render the way you expected? Unfortunately, there are only a few fonts that are safe to use. If you thought you could just pick up a “pretty” font from your computer and use it on your website, you’re wrong! You have to do the required research first. Let us make this a little easy for you!

What are Web Safe Fonts?

Some fonts are pre-installed by many operating systems – known as web safe fonts. However, not all systems will have the same fonts installed. To make things convenient, you can use a web safe font stack to choose several fonts that look similar, and are installed on the systems that you want to support.

As recommended by awwards.com, some of the top recommended fonts from Google Web Fonts are given below. Their technical and visual characteristics make them more readable and compatible with a variety of devices and operating systems.

  • Open Sans
  • Josefin Slab
  • Arvo
  • Lato
  • Vollkorn
  • AbrilFatface
  • Ubuntu
  • PT Sans + PT Serif
  • Old Standard TT
  • Droid Sans

Top recommended fonts from Font Squirrel are:

  • Anivers
  • Junction
  • Fertigo
  • Aller
  • Audimat
  • Delicious
  • Prociono
  • Fontin
  • Fontin-Sans
  • Chunkfive

If you want to use fonts other than ones that are pre-installed on the system, you can opt for CSS3 and use Web Fonts.

What are Web Fonts?

Unlike web safe fonts, web fonts are not pre-installed on your system. These fonts need to be downloaded by your browser while rendering the webpage, and then applied to your text.
However, using these web fonts come with a few drawbacks:

  1. It will increase your website’s load time.
  2. Limited support for CSS3 (which is required to use web fonts) in older browsers.

To solve the issue (b), you can use a font stack, similar to the web safe font stacks, but include a web font as the first font of the stack. For any reason, if the browser is unable to use the web font it will fall back on the web safe fonts in the stack.

Font Family

The font family property of a text should hold several font names as a “fallback” option. In this manner, if the browser does not support the first font, it tries the next font, and so on.

Ideally, you start with the font of your choice gradually ending with a generic family. This allows the browser to pick a font similar to the required font from the generic family (if no other fonts are available).

In basic CSS format, it can be defined like this:

body {
font-family: Arial, Helvetica, Sans-Serif;
font-weight: bold;
font-size: 8px;
}

The best way to ensure this, however, is to upload the required font to your website server and use it. This way it will always show on the client browser.

TIP: With the new @font-face rule, web designers are no longer restricted to using the “web-safe” fonts. You only have to define a name for the font (e.g. myFirstFont), and then point to the font file.

Type Services

Finding the right font family can be difficult. More challenging is finding a font family that can be used legally on the web.

If you need a free font, you can look through the library on fontsquirrel.com. This website not only offers a font generator, but provides fonts that are completely free for commercial use. The fonts are of high quality too!

Another alternative for free fonts is the Google Font Directory (code.google.com/webfonts). It is quite simple to use the fonts they offer using the API available. One benefit of using these is minimal load time as the fonts are hosted by Google itself.

Whichever option you choose, always remember to provide a fallback font! There could be a server problem, and the browser might not be able to retrieve the custom font. Using font stacks, you can provide a fallback to a font you know is available.

If Font Squirrel or the Google Font Directory is not able to provide the font you are looking for, look out for other services, but be aware of licensing formalities. Services like FontDeck and TypeKit enable you to choose from a range of fonts, all of which are tweaked for better legibility on the screen. Both services allow you to create free accounts with some limitations, and offer various pricing packages.

If you thought web design was as simple as print, we are sorry to burst your bubble – your font choices are, unfortunately, limited. But that cannot stop you from making mind blowing designs, can it? Apply some good color choices, good framing, follow the guidelines given above and you are all set.

Good luck!

Mobile SEO

THE IMPORTANCE OF MOBILE SEO IN 2020

Being ‘mobile-first’ in 2020 will mean so much more than having a responsive website design. Mobile devices have surged ahead of traditional computers when it comes to consumer demand and online traffic. More mobile devices are shipped than desktops and laptops, and mobile will soon account for the majority of overall website visits. Mobile has […]

Voice Search Optimization

VOICE SEARCH OPTIMIZATION: HERE’S EVERYTHING YOU NEED TO KNOW

Voice search has long been considered as a luxury, but now since more users are navigating the internet via voice commands, it has become something of a voice search optimization as a basic requirement. Why would we sit down and type out details when you can speak them and get answers immediately? In this respect, […]

Digital Marketing

TOP 9 REASONS DIGITAL MARKETING EFFORTS FAIL

Online marketing acts as a paradigm for other web marketing programs. Businesses leverage digital marketing channels such as search engines, social media, email, personal websites, and online advertising to fulfil their brands’ marketing motives, product awareness, user engagement, social connection, and much more. In reality, digital marketing strategies are routes to meet digital marketing objectives. […]

Join us for a cup of coffee!