How to load font awesome ie8 w / Font loading is disabled
I tried to load Font Awsome via google webfont so it works on ie8 with fonts loaded (under Internet Options> Security> Downloads). I've experimented with different versions of this code, but still only see empty fields where the font should be. When I turn on Font Download, the icons are there.
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>window.WebFont || document.write('<script src="javascripts/webfont.js"><\/script>')</script>
<script>
WebFont.load({
fontinactive: function (family, fvd) {
if (family === 'Flamenco' && 'FontAwesome') {
WebFont.load({
custom: {
families: ['Flamenco', 'FontAwesome'],
urls: [ '/stylesheets/font-awesome.min.css' ]
}
})
}
},
google: {
families: ['Flamenco'],
},
custom: {
families: ['FontAwesome'],
urls: [ '//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css' ]
}
});
</script>
+3
source to share
1 answer
Best used @Font-face
in CSS when adding fonts. Have done this before and works really well.
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Source: CSS-Tricks
-2
source to share