Custom Web Fonts - Cross Browser Supported

Introduction

As the title says, we are going to build a Cross Browser Supported solution for Custom Fonts on the Web. So let us begin with these simple steps.

Background

I was looking to use Custom Fonts on Web, as there is only a small list of fonts available for Web. I was working for a client who asked to use very innovative fonts that are usually available for Desktop only, and not available in web out of the box. So I decided to find a workaround. Well, here it is, we can use Custom Web Fonts in Web too!

Step One: Get Your Font

• There are plenty of sites on the web that provide variety of fonts. Of course, some of them have a price tag for commercial usage, but still tons of them are free to use. FontSquirrel.com is a good font provider.
• Have a look at the below table:

  Font Format	Mozilla Family	Google Chrome	Opera	Internet Explorer	Safari
  .tff	3.5	2.0	10	No	3.1
  .otf	3.5	No	10	No	3.1
  .eot	No	No	No	4	No
  .svg	No	v. 0.3	9.0	No	3.1

• Make sure you have all the required font formats for all the concerned browsers. If we do not have any of the required formats, FontSquirrel.com has a tool called Web Font Generator that can convert TFF to all other formats.

(Reference: http://www.fontsquirrel.com/tools/webfont-generator)

Step Two: Create the CSS

• There is a CSS syntax called Bulletproof @font-face Syntax by Paul Irish, and we will use that syntax.

  (Reference: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/)

• The syntax has also been tweaked by other folks, and now we can use it in our CSS as follows:

  @font-face {
  font-family: 'report1942';
  src: url(Fonts/1942-webfont.eot); /* IE9 Compat Modes */
  src: url(Fonts/1942-webfont.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
  url(Fonts/1942-webfont.woff) format('woff'), /* Modern Browsers */
  url(Fonts/1942-webfont.ttf) format('truetype'), /* Safari, Android, iOS */
  url(Fonts/1942-webfont.svg#1942_report1942_report) format('svg'); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
  }

• Now we can use the font in our markup, as follows:

  font-family:'report1942';

Browser Compatibility

Tested On Firefox, Chrome, Opera, Safari, IE 11, IE7, and IE 6-10 (Compatibility Modes in IE 11). I hope it will also be supported on Windows Phone, Android, and iOS.

I hope that you probably have learned something new today, and I hope you liked it. Thanks for reading.

History

• v1.0: First try