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
Comments
Post a Comment