@font-face Rule

Web fonts allow the use of other fonts not included among the pre-installed fonts - like Arial, Courier New, Georgia, Lucida Console, Verdana - in the user's computer. The desired custom fonts are uploaded to a web server and are linked via the CSS @font-face rule and downloaded by a browser to use in a web page.

In this tutorial, we will experiment with the Pacifico font. Download it from here by clicking on the DOWNLOAD TTF button.

Extract the downloaded pacifico.zip folder. Inside the extracted directory, find the Pacifico.tff file and place it in the same location where your style file is (of course this is just for the sake of simplicity for our examples below, you can create your own /fonts directory and place the file inside).

We declare a @font-face rule as shown below. To the font-family property, we assign the value PacificoRegular. The src field takes the location of the font file as its value.

				
				@font-face {
				    font-family: PacificoRegular;
				    src: url(Pacifico.tff);
				}
				
			

While applying the style to an element, the font-family property can be assigned the PacificoRegular value, and the text will appear as below

This is written in Pacifico font.

However, for cross-browser compatibility, we need to include other file formats other than the .tff. For example, IE 8 and earlier versions support only the .eot (Embedded OpenType) format and no other. Version 4.1 and below of the Safari browser for iOS supports only the .svg (Scalable Vector Graphics) format. And we have the newer .woff (Web Open Font Format) supported by Firefox (3.5+), Chrome (6.0+), Opera (11.1+), Safari (5.1+) and IE (9+). Considering all the above mentioned font formats, we can make use of an online web font generator like https://www.web-font-generator.com/ to generate them.

Click on the Choose File button and upload the Pacifico.tff file. Next checkmark the agreement field and click the Generate web font button. When the font formats are processed, click on the Download Package button and download the compressed folder. On extracting the zip folder, you will find the other font formats inside -

The @font-face rule can now be rewritten to include multiple font formats as

				
				@font-face {
				    font-family: PacificoRegular;
				    src: url('Pacifico-Regular.eot') format('embedded-opentype'), 
				    	 url('Pacifico-Regular.woff') format('woff'), 
				         url('Pacifico-Regular.ttf')  format('truetype'),
				         url('Pacifico-Regular.svg#Pacifico-Regular') format('svg');
				}
				
			

If you are considering IE8 and versions before it, a question mark has to be added at the end of the URL to the first EOT font type. This is to bypass the 404 error thrown because of a bug in the parser when the src attribute loads more than one font type.

				
				@font-face {
				    font-family: PacificoRegular;
				    src: url('Pacifico-Regular.eot?') format('embedded-opentype'), 
				    	 url('Pacifico-Regular.woff') format('woff'), 
				         url('Pacifico-Regular.ttf')  format('truetype'),
				         url('Pacifico-Regular.svg#Pacifico-Regular') format('svg');
				}