css - embedded font on website won't display in IE or Chrome -


i have following font setup in css wordpress based site i'm building , fonts display fine in ff, not @ in ie(9) or chrome(latest).

  /* =typography   -------------------------------------------------------------- */   @font-face {       font-family: 'humanist';       src: url('fonts/humanist521lightbt-webfont.eot');       src: url('fonts/humanist521lightbt-webfont.eot?#iefix') format('embedded-opentype'),            url('fonts/humanist521lightbt-webfont.woff') format('woff'),            url('fonts/humanist521lightbt.ttf') format('truetype'),            url('fonts/humanist521lightbt-webfont.svg#webfontregular') format('svg');       font-weight: normal;       font-style: normal;   }    @font-face {       font-family: 'humanistit';       src: url('fonts/humanist521lightitalicbt-webfont.eot');       src: url('fonts/humanist521lightitalicbt-webfont.eot?#iefix') format('embedded-opentype'),            url('fonts/humanist521lightitalicbt-webfont.woff') format('woff'),            url('fonts/humanist521lightitalicbt.ttf') format('truetype'),            url('fonts/humanist521lightitalicbt-webfont.svg#webfontregular') format('svg');       font-weight: normal;       font-style: normal;   }    @font-face {      font-family: 'humanistbo';      src: url('fonts/humanist777blackbt-webfont.eot');      src: url('fonts/humanist777blackbt-webfont.eot?#iefix') format('embedded-opentype'),      url('fonts/humanist777blackbt-webfont.woff') format('woff'),      url('fonts/humanist777blackbt.ttf') format('truetype'),      url('fonts/humanist777blackbt-webfont.svg#webfontregular') format('svg');      font-weight: normal;      font-style: normal;   } 

when need use font element, add font-family: 'humanist', arial, sans-serif;

the fonts stored in theme's directory in folder called "fonts".

am doing wrong or missing work other browsers?

thanks

internet explorer 9 , less has issues displaying .ttf files. not support embedded fonts via css3 scheme without first converting supported formats (.svg, .ttf, .eot, etc.). however, can tweak @font-face syntax support this.

with chrome not displaying correct font, due different browsers having different needs. can find more information in second link in more information below.

a side note well: if font hosted on google fonts, embed link website instead of hosting yourself.

tldr; need comprehensive list of @font-face types

more information:

so question - ie problems true type font files

so question - font-face problem in chrome

further hardening of bulletproof syntax - fontspring.

bulletproof @font-face syntax - paul irish


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -