Using Fonts in Web Development

Submitted by damar on Sun, 07/02/2017 - 11:47

Damar. Thapa

MaaDi's

Legal Notice

Copyright © 2017 | DT's Den |
Disclaimer: I provide no warranty of any kind, express or implied, that the information provided is complete, accurate, and reliable. So, you use the information at your own risk.

Abstract

A font, with its properties, plays an important role in making our web pages attractive, providing ease of reading, highlighting our important points, targeting the intended groups of audiences, etc. CSS3 has enabled web developers to force client machines to download and use the intended fonts from the Internet. It truly is a big breakthrough.
In this article, I will introduce fonts, font-family structure, font formats, CSS3's @font-face rule, and a brief procedure to use google fonts on our web pages.

1. Introduction

We can change the look and feel of our text in a document by changing its font and its related properties. A font and its related properties of a block of text (or document) represent the visual representation of the text/document.
I found it interesting and helpful that the terms 'typeface' and 'font' came from the centuries-long history of the printing industry. In the fifteenth century, printing workers had to create pages of a book/article on frames using individual metal characters, laboriously, one by one. Those metal characters used to be called fonts. The fonts were designed differently to give different visual tastes, and they were grouped into different categories called 'typefaces'.
In today's digital age, we still use the term 'font' that represents the visual representation of a set of all characters (letters, numbers, signs, symbols, etc.). As for the 'typeface', we, generally, use the term 'font-family' to represent certain families of fonts.
In short, a font is a set of all printable characters in a specific style and size, and a font-family is a family (collection) of related fonts.
In this article, I am going to explain how to setup and use google fonts in web pages.

2. The 'font' file formats

The computer fonts were there before the World Wide Web (web), so we can, naturally, imagine the existence of a number of different font formats for different operating systems, and applications. In the web, there are mainly following formats
  • TrueType Fonts (TTF) :This format was developed by Apple and was eventually licensed to Microsoft.
  • OpenType Fonts (OTF) : This format was built on the TrueType format with advance typesetting features. It was developed by Adobe and Microsoft.
  • The Web Open Font Format (WOFF) : This format was developed, specifically, to use on the web.It is basically TTF and OTF with compression and additional metadata.
  • The Web Open Font Format (WOFF 2.0) : This format is based on WOFF to provide better compression.
  • SVG Fonts : This format uses, as name suggests, Scalable Vector Graphics (SVG) to be used as glyphs when displaying text.
  • Embedded OpenType Fonts (EOT) : This format is a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.
In the subsequent sections, you will find:
  • firstly, we have to download the relevant font files on our web server or point directly to those files on their own servers before we can use them on our pages; and
  • secondly, in the process of downloading or pointing to the font files, we have included the same font file in multiple formats.
The latter is needed, at least for now, for browser compatibility. As web developers, we tend to go for the latest and most efficient format, say WOFF2, but not all browsers support this format, and in some worst case scenario, our clients may still be using legacy browsers, like Microsoft's Internet Explorer Version 8, IE8.

3. 'Fonts' and 'font-family' structure

A font-family represents a group of related fonts.
It (font-family) is also a CSS property to specify a prioritised list of one or more font family names and/or generic family names for the selected element.
In this section, I am using Google's 'Open Sans' font, as an example, and I have the following details:
  • The 'Open Sans' is the 'font-family' name of this font, and it has a collection of related fonts.
  • The 'Open Sans' font has two font-style, namely normal (regular) and italic. The 'normal' and 'italic' are two different styles of the same 'Open Sans' font.
  • Each style has multiple fonts representing the font-weight, represented by numbers, like 100, 200, 300, and so on. The numbers determine the stroke size of the font -- the higher the number thicker the stroke -- so, changing the font-weight alone only changes the thickness/thinness of the selected fonts
In the subsequent sections, I will explain how to setup google fonts to use on the website. For now, I assume it is all done and ready. Once a font has been fully configured to use, we can use like:
 p{
	font-family: 'Open Sans';
        font-style: italic;
        font-weight: 100;
    }
The above CSS code specifies that we are going to use the font-family of 'Open Sans' that has the style of 'italic' and font-weight of 100 (relatively thinner stroke) for the document paragraph (<p> tag). Changing 'font-weight', for example, '100' to '800', will not change the style -- it just will be bolder (thicker stroke).
The 'font-family' property, by the way, can accept multiple font-family names, and the names have to be listed in the order of priority. If the system could not find or download the first font-family, it tries the second in the list and so on.

4. The CSS @font-face Rule

Before CSS3, a web developer could only use fonts installed on the client computers to style his/her web pages. There was no mechanism to make a client computer to download fonts from web servers and use them to style the pages it downloaded. It was a pretty bad limitation. Hence, the term 'web-safe' fonts -- the fonts most likely to be on the most of the computers on the Internet -- used to be the tips of the trade in those days.
Now, with CSS3, a developer can choose any fonts of his/her liking, and make the receiving client machines to download and use them to style the pages. The CSS3 has implemented this feature in the @font-face rule, and it can be applied as follows:
@font-face {
        font-family: 'fontname';
	src: url('fontname.woff2') format('woff2'),
	url('fontname.woff') format('woff');
            }
The above rule has the following details:
  • It needs the 'font-family' name, and 'src' with at least one 'url' pointing to a font file.
  • The 'src' can have multiple urls pointing to font files in different formats, targeting different browsers.
  • The url can point to a file on a local (the same server hosting the page being downloaded) directory or remote server.
The above rule, basically, ensures that client machines accessing the web server pages download the specified font files from the server, and use them to style the (downloaded) pages.

5. Serving the google font files from the website, locally

I am a fan of Google fonts and I found the heroduapp.com site helpful to download google fonts in different formats, and create the relevant rules, automatically.
The following is one example of heroduapp.com created rule in the process of downloading one of the Lato fonts:
@font-face {
        font-family: 'Lato';
        font-style: normal;
        font-weight: 300;
        src: url('fonts/lato-v13-latin-300.eot');
        /* IE9 Compat Modes */
        src: local('Lato Light'), local('Lato-Light'), 
        url('fonts/lato-v13-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('fonts/lato-v13-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
        url('fonts/lato-v13-latin-300.woff') format('woff'), /* Modern Browsers */
        url('fonts/lato-v13-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
        url('fonts/lato-v13-latin-300.svg#Lato') format('svg');
        /* Legacy iOS */
    }
Once the chosen font or fonts are selected, and 'Customise folder prefix (optional)' field is set, the website (heroduapp.com) creates a zip file with all selected fonts for download and the relevant @font-face rule. The 'Customise folder prefix (optional)' field represents the folder structure where all font files will be stored relative to the CSS file of the page.
In my example, my css file 'style.css' is located in 'css' directory, so all font files have to be copied to 'css/fonts' directory. So, I unzipped all the downloaded font files in 'css/fonts/' folder, and copied and pasted the @font-face rule in 'css/style.css' file. Once these two things have been done, the fonts can be used in the pages, like:
p {
        font-family: 'Lato';
        font-style: normal;
        font-weight: 300;  
        font-size: 20px;
    } 
In the above CSS rule, the document paragragh -- text within <p> and </p> -- will use 'Lato' font of 'normal' style with the font-weight of '300'. And, the font-size will be 20 pixel.

6. Using google fonts directly from google font server

As indicated above, we do not have to download font files from google font server to our web server to use in our web pages. In a 'src' propety of a '@font-face' rule, we simply can point to a font file in the google server, instead of pointing to a file in local directory.
To use google fonts, using this method, I found the google font site helpful. Once the chosen font/fonts are selected, the website creates the relevant codes, automatically. Here are two codes created when I chose 'Lato, Regular, 300' font:
  1. <link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
  2. <style>
    	@import url('https://fonts.googleapis.com/css?family=Lato:300');
    </style>
To use the above specified font in our page, we have to copy one of the two above codes inside the html's <head> tag.
Instead of copying the above codes inside <head> tag, the second code's @import rule can be copied in our css file too. Basically, both codes are pointing to a CSS rule that in turn uses @font-face rule to direct the receiving clients to down and use the relevant font files.
The css rules pointed by the above two codes are as follows:
@font-face {
        font-family: 'Lato';
        font-style: normal;
        font-weight: 300;
        src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v13/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2)
        format('woff2');
        unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
        }
    @font-face {
        font-family: 'Lato';
        font-style: normal;
        font-weight: 300;
        src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v13/EsvMC5un3kjyUhB9ZEPPwg.woff2) 
        format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, 
        U+2074, U+20AC, U+2212, U+2215;
}
The question of serving font files from the same web server where the contents are or pointing directly to the Goole font server or any other servers depends on the different circumstances. Both methods have pros and cons. As indicated above, I will cover these topics separately in future articles.

7. Which Font, Serif or San Serif, To Use?

Most of the websites on the Internet mainly use two types of fonts: 'Serif' and 'San Serif'.
Serif Fonts: In Typography, extended decorative lines or projections at the edges of the characters are called serif. So, the fonts with serifs are categorised as 'serif' type fonts.
San Serif Fonts: The 'San Serif' literally mean 'without serif' (in French). So, the fonts without serif are called San Serif fonts.
Traditionally, it used to be accepted practice to use 'serif' fonts for printing media and 'san serif' for computer displays.
The serifs (decorative edges) in fonts were perceived to be helpful enhancing legibility and readability. For this reason, we have seen most of the books and other print media in serif fonts. As for the 'san serif' fonts' support for computer displays, some experts claimed that the computer screens, because of its relatively lower resolution (Pixel Per Inch), cannot render serifs in its best form to be effective.
The studies carried out on 'serif vs. san serif', however, have given inconclusive results. Some studies sided on 'san serif' fonts suggesting that serifs (decorative edges) on 'serif fonts' do not enhance legibility and readability, they rather hinder, while other studies claimed that serif fonts are superiour to san serif both on print and computer screen media.
Only message I can get from the inconclusive studies is that we are, possibly, safe to break the tradition, and decide 'serif' vs. 'san serif' debate based on our own personal taste.

8. Summary

Before the arrival of CSS3, web publishers and developers had a limited number of fonts to play with, and 'web-safe' fonts used to be the 'matra' to remember. Now, we have hundreds, if not thousands, of fonts to choose from. It can be overwhelming.
I started this article with a brief introduction of fonts and fonts-family, and covered the steps to setup web environment to use Google fonts. If you are not happy with Google fonts, there are other alternatives too, including paid ones. Regardless of what you choose - Google fonts, other free resources, or premium fonts, setting up procedure should be the same.
I touched on the 'serif vs. san serif' debate, and arrived at the conclusion we are safe to choose either one of them, or choose both. After all, we are breaking the tradition.
Lastly, typography is a discipline of its own with a long and rich history. As web developers, we are just font users, so let's leave the font design and typography debates to its own rightful professionals; graphic designers, typographers and related scholars.

A. Revision History

Revision History
Revision 0.0-0 Sun, 02 July 2017 Damar Thapa
category
internet