Css @font-face not working in ie9
Question
I managed to use a custom font which works in every browser that deserves to be called "browser". Well as always the cool things do not apply to ie (in this case ie9).
I tried the following:
@font-face { font-family: Roboto; src: url('../fonts/roboto/Roboto-Regular.ttf');}
after some hints i found on this on google i tried:
@font-face { font-family: Roboto; src: url('../fonts/roboto/Roboto-Regular.ttf');
src: url('../fonts/roboto/Roboto-Regular.ttf#') format('truetype');
font-weight: normal;
font-style: normal;}
still with no success. Well as i know by experience there will be no "good" solution for this problem but maybe someone found another bad ie hack that gets me out of another ie misery.
4 answers
solution1
12 ACCPTED 2013-05-23 10:05:39
You need to add the format .eot in order to be recognized by IE9.
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
solution2
3 2013-05-23 10:16:08
You should look at Squirrel
It let you convert a font that you upload with the right codes etcetc.. Works great!
Aswell put ?#iefix behind the second src: url, see this link for a right code: Question from "kraftwer1"
solution3
1 2013-05-23 10:09:48
Just serve the font from Google Fonts - click 'Open in Google Fonts' in the top right of that page, select your options, and copy/paste the generated output at the end. Saves you bandwidth and headaches, it'll just work.
To just use the Regular size, c/p this in the <head> of your page:
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
Or from your CSS files:
@import url(http://fonts.googleapis.com/css?family=Roboto);
Or load it at runtime with Javascript:
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Roboto::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
solution4
0 2013-05-23 10:06:52
the answer to this question suggests that IE9 only supports the format('woff') have you tried this ?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.