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);
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');
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