There are several inherent font issues that you deal with when designing a website. Many of these issues resulted in very few fonts being available to the designer and effectively used on the web pages. Web designers had to specify multiple fonts some as backup or fallback fonts and to rely on font families. None of these were the ideal solution to the issue of guaranteeing the exact same look and feel across browsers and operating systems.

Some of these issues were related to:

Availability: There is no guarantee that the font that you have used on the webpage is installed on the user machine. Some fonts came standard with most operating systems and were generally considered as “web safe“. These include the well known fonts such as Times Roman, Georgia and Arial.

Page Size: A known way to get around the issue of availability is to bundle the required fonts along with the webpage. This makes the page larger in size and thus increasing the page load times and often affecting your page SEO. Also, often times these fonts are not optimized for web use, but rather for desktops.

Compatibility: Even if you can deliver the required font reliably, different browsers use different file formats for fonts. It could be eot, ttf or svg among others. This meant that you had to bundle all of these formats with the page.

All of these issues lead to the development of web fonts. Web fonts are specifically optimized fonts for use in web pages. Web fonts have several desirable features, many of which tries to solve the issues described earlier. You could use any of the web font services almost all of which provide similar functionality. The main differences lay usually in the pricing, some are free while some are subscription based.

Most of the web fonts are highly optimized for size and fine tuned to display better in webpage and browsers. There are served from highly scaled servers with very good reliability and up time. These optimized fonts are mostly small in size, thus reducing the page size and network latency. Most of the services also provide an easy to API which allows for easy implementation with out worrying about the varying formats used by operating systems and browsers.

Using Google Fonts

We will use the Google Fonts as an example for the reminder of the post, as it is easily available and free to use. You may use any other web font services in lieu of Google Fonts, such as Adobe Edge Web Fonts, Typekit or Webtype. There are a lot more available.

1. Go to the Google Fonts website. It is located at http://www.google.com/fonts
2. Find the fonts that you like and want to use. It is best to keep it to a maximum of 3 fonts. You can filter the fonts by the options provided in the left hand side menu. You can filter by categories, thickness, and/or slant among others.
3. Click “Add to Collection” button to add the font to the your list. Similarly add all the fonts that you intend to use.
4. All your selected fonts can be seen at the bottom of the screen under Collections. You can further review the selected fonts by clicking on the Review button. You can also delete the fonts you do not need from there.
5. Once you have finalized the list of Google fonts, click on the Use button to see your options.

Implementing Google Fonts

You have three different options when it comes to implementing Google fonts on your website.

Html Link Tag: This uses the link tag in HTML header to include the fonts on your page. You can get the code by clicking on the tab named standard in the third section of the page.

The code will look something like
<link href='http://fonts.googleapis.com/css?family=Revalia|Cambo|Esteban|Varela+Round' rel='stylesheet' type='text/css'>

This is the recommended option in terms of ease of use and also from an SEO perspective. You should include this as the first element inside the header tag on your webpages. If you have common file that is inserted into every page, then you can include this into that.

Javascript: if you like to implement it inside your javascript, click on the tab named Javascript to get the code. Again, you can include the code inside your header tag or inside another javascript file that is included.

CSS Import: Another option is to use a CSS import statement in your code. This again can be included inside a style tag in your header. It can also be used inside a included CSS file.

@import url(http://fonts.googleapis.com/css?family=Revalia|Gafata|Varela+Round);

However you decide to implement it, make sure that it gets executed very early in the rendering process. This allows the fonts to be downloaded and used by the time the browser starts to render the page.

Once you have imported the Google fonts using Google’s Font APIs, you can use them on your pages just as you would use any other fonts. You will use the name of the font as specified in the code that you copied and included in the page.

For example, to use the font Revalia from the example above on a h1 heading you can use the following tag

<h1 style="font-family: 'Revalia', serif" >

or use it in a CSS file as shown below

h1 { font-family:'Revalia', Serif; }