Usage : use CSS declarations like below - this should work on Chrome, Firefox, IE7, IE8, IE9 on PC and Apple Mac - iphone/ipad :
@font-face {
font-family: 'newbaskervillestd-italic-webfont';
src: url('/includes/js/fonts/newbaskervillestd-italic-webfont.eot'); /* IE9 Compat Modes */
src: url('/includes/js/fonts/newbaskervillestd-italic-webfont.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: local('?'), url('/includes/js/fonts/newbaskervillestd-italic-webfont.woff') format('woff'), /* Modern Browsers */
url('/includes/js/fonts/newbaskervillestd-italic-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('/includes/js/fonts/newbaskervillestd-italic-webfont.svg') format('svg'); /* Legacy iOS */
font-weight: normal; /* set these to normal in-case of problems */
font-style: normal;
}
@font-face {
font-family: 'avenir-heavy-webfont';
src: url('/includes/js/fonts/avenir-heavy-webfont.eot'); /* IE9 Compat Modes */
src: url('/includes/js/fonts/avenir-heavy-webfont.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: local('?'), url('/includes/js/fonts/avenir-heavy-webfont.woff') format('woff'), /* Modern Browsers */
url('/includes/js/fonts/avenir-heavy-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('/includes/js/fonts/avenir-heavy-webfont.svg') format('svg'); /* Legacy iOS */
font-weight: bold; /* set to normal unless it works fine */
font-style: normal;
}
/* to use fonts in the CSS do this : */
h2 { font-Family: 'Baskerville-Italic','newbaskervillestd-italic-webfont'; font-size:25px; text-transform:none; letter-spacing:normal; }
IMPORTANT TIPS:
if you have problems :
a) make sure the eot, woff, avg are CORRECT. If you've just downloaded them, re-render them using a TTF converter.
b) set font-weight: normal - I had this as a problem on Windows 7 / Chrome.
c) also add the following to .htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
so the browser knows what kind of file it's loading.