Cross Browser Web Fonts Using @font-face support

Best way to use custom fonts on your site

cross browser web fonts


If you use custom font in your website using @font-face,then it may possible that it will not display fine in some browsers.


This is due to the font-face browser dependency (every browser supports @font-face slightly differently).


for resolving the cross browser web fonts we have to use different font file for different browser.


Here is the link from where we can get a complete kit of a font files.

font-face Kit Generator


It is very simple to use.
Upload your font file (generally with .ttf extension) with [+Add Fonts] button.
Select your option and check agreement check box.
Click on [Download your kit] button.


Here you will get a prepared zip file for the same.
Download that and use according to your need.


Put font file in a folder, give the path of the same in css file.
Use the css and you will found the same result,you want to get.


You also found a specimen/example to use the font-face in the kit.


Basic web fonts syntax

The @font-face rule


First you insert a block in your CSS, describing a web font you want to embed into your page. This information is all wrapped inside a @font-face block

[sourcecode language=”plain”]
@font-face {
  font-family: ‘Abril Fatface Regular’;
  src: url("AbrilFatface-Regular.otf");


Standard font-family declaration


[sourcecode language=”plain”]
h1 {
font-size: 8em;
font-family: ‘Abril Fatface Regular’, sans-serif;


Other @font-face options


[sourcecode language=”plain”]

@font-face {
font-family: ‘Abril Fatface’;
src: url("AbrilFatface.otf");
font-weight: bold;
font-stretch: condensed;
unicode-range: U+0026;



If you want to know why all this works as above, follow Paul Irish’s Bulletproof @font-face syntax.