ADDING CUSTOM FONT TO SITE

The @font-face rule allows custom fonts to be loaded on a web page. Most of the modern browser support both TTF, OTF and WOFF font type. But to add the deepest support of browser we have to add following code so that it can support backward compatibility.

@font-face {
font-family: 'MyWebFont';
  src: url('webfont.eot');
 /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), 
 /* IE6-IE8 */
 
 url('webfont.woff2') format('woff2'),  
   /* Super Modern Browsers */
 
 url('webfont.woff') format('woff'), 
 /* Pretty Modern Browsers */

 url('webfont.ttf') format('truetype'), 
/* Safari, Android, iOS */

 url('webfont.svg#svgFontName') format('svg'); 
 /* Legacy iOS */
}

 

To use the following code in style, we need to add font as

body {
   font-family: 'MyWebFont', Fallback, sans-serif;
}

 

But most of the modern browser support, if we add either of this two @font code, will get with all.

@font-face {
   font-family: 'MyWebFont';
   src: url('myfont.woff2') format('woff2'),
   url('myfont.woff') format('woff');
}

@font-face {
   font-family: 'MyWebFont';
   src: url('myfont.woff2') format('woff2'),
   url('myfont.woff') format('woff'),
   url('myfont.ttf') format('truetype');
}