Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML5

Custom Web Fonts - Cross Browser Supported

2.00/5 (1 vote)
14 Sep 2017CPOL2 min read 3.4K  
A Cross Browser Supported solution for Custom Fonts on the Web

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 FormatMozilla FamilyGoogle ChromeOperaInternet ExplorerSafari
    .tff3.52.010No3.1
    .otf3.5No10No3.1
    .eotNoNoNo4No
    .svgNov. 0.39.0No3.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:
    CSS
    @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:
    CSS
    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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)