@font-face declarations for modern browsers

fontface-futureproof.css

/**
 * @font-face declaration for :
 *  - Internet Explorer >= 9.0
 *  - Firefox >= 3.6
 *  - Chrome >= 5
 *  - Safari / iOS >= 5.1
 *  - Opera >= 11.5
 *  - Android >= 4.4
 * */

@font-face {
  font-family: Ma Typo; /* You can call this font in a font stack as "My Typo" or My Typo */
  font-style: normal; /* You can declare several @font-face with the same font-family and differents font-style */
  font-weight: 400; /* You can declare several @font-face with the same font-family and differents font-weight */
  src: local('matypo-regular'), /* PostScript file name for this font variant (i.e. SourceSansPro-Regular) */
       url('URL_TO_FILE.woff2') format('woff2'),
       url('URL_TO_FILE.woff') format('woff');
}


/**
 * A bold variant, for example
 * */

@font-face {
  font-family: Ma Typo;
  font-style: normal; /* You can declare several @font-face with the same font-family and differents font-style */
  font-weight: 700; /* You can declare several @font-face with the same font-family and differents font-weight */
  src: local('matypo-bold'), /* PostScript file name, as exemple SourceSansPro-Semibold */
       url('URL_TO_FILE_BOLD.woff2') format('woff2'),
       url('URL_TO_FILE_BOLD.woff') format('woff');
}

fontface-ie8.css

/**
 * @font-face declaration for :
 *  - Internet Explorer >= 6.0
 *  - Firefox >= 3.6
 *  - Chrome >= 5
 *  - Safari / iOS >= 5.1
 *  - Opera >= 11.5
 *  - Android >= 4.4
 * */

@font-face {
  font-family: Ma Typo;
  font-style: normal; /* You can declare several @font-face with the same font-family and differents font-style */
  font-weight: 400; /* You can declare several @font-face with the same font-family and differents font-weight */
  src: local('matypo-regular'), /* PostScript file name, as exemple SourceSansPro-Regular */
       url('URL_TO_FILE.eot?') format('eot'), /* ? is a small IE fix */
       url('URL_TO_FILE.woff2') format('woff2'),
       url('URL_TO_FILE.woff') format('woff');
}


/**
 * A bold variant, for example
 * */

@font-face {
  font-family: Ma Typo;
  font-style: normal; /* You can declare several @font-face with the same font-family and differents font-style */
  font-weight: 700; /* You can declare several @font-face with the same font-family and differents font-weight */
  src: local('matypo-semibold'), /* PostScript file name, as exemple SourceSansPro-Semibold */
       url('URL_TO_FILE_BOLD.eot?') format('eot'), /* ? is a small IE fix */
       url('URL_TO_FILE_BOLD.woff2') format('woff2'),
       url('URL_TO_FILE_BOLD.woff') format('woff');
}