.eot not working in IE
solved the problem, it was not problem of the eot file. It seems IE has a problem finding the .eot file if the family name is different as the full name of the font. In my case font name was bello-script and font family was bello. Changed both of them and everything worked fine.
IE loads sometimes WOFF and sometimes EOT font type
Well, I have finally changed the way to use Material Icon font.
I deleted the following line in my index.html file :
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
I installed material-design-icons package via NPM and I configured the styles section of my angular-cli.json file to point on the css file like this :
"styles": [
"<relative_path>/node_modules/material-design-icons/iconfont/material-icons.css"
]
Now, IE11 always loads WOFF type.
Problem solved!
Font ttf file not working with IE
Some IE versions don't play nicely with ttf, see here:
What is the status of TTF support in Internet Explorer?
You will likely need a .eot fallback:
@font-face
{
font-family: 'CAROBTN';
src: url('fonts/CAROBTN_.ttf'),
url('fonts/CAROBTN_.eot');
}
You can convert font files here: https://www.fontsquirrel.com/tools/webfont-generator
Font-face not working in IE, otf font
Internet explorer use eot format (legacy) or woff.
See MSDN
Anyway i use this code for maximum compatibility:
@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 */
}
@Font-Face won't load via https in IE
So, I just figured out a way that is working for IE, Safara, Firefox and Chrome as far as I can see.
Since all the things I tried did not work out, I was trying to find a way that could "embed" the fonts eitherway to my websites, to my CSS or to my server. Added the font to my server wasn't an option according to my server-guy so I decided to get back to Font-Squirrel and see if there was an option they offered in converting the fonts.
I reuploaded my fonts en chose the export mode. Somewhere around the bottom of the settings fields it says "Base64 Encode", luckily I knew what this meant (I can imagine someone who doesn't easily looks over this option) so I genereted my CSS files with base64 embdedded fonts.
This works flawlessly. Ofcourse this made my CSS files some kb's bigger (5kb vs 129kb). But I don't see a big adventage of 100kb extra with the current internet connections.
Just to compare, non base64 encoded CSS:
@font-face {
font-family: 'ProximaNovaSemibolds';
src: url('../font-face/proximanova-semibold-webfont.eot');
src: url('../font-face/proximanova-semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('../font-face/proximanova-semibold-webfont.woff') format('woff'),
url('../font-face/proximanova-semibold-webfont.ttf') format('truetype'),
url('../font-face/proximanova-semibold-webfont.svg#ProximaNovaSemibold') format('svg');
font-weight: normal;
font-style: normal;
}
Base64 encoded CSS:
@font-face {
font-family: 'ProximaNovaBold';
src: url('proximanova-bold-webfont-webfont.eot');
}
@font-face {
font-family: 'ProximaNovaBold';
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF+8ABMAAAAArzAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcYT+YZ0dERUYAAAHEAAAALQAAADIC+wHsR1BPUwAAAfQAAAf7AAAURoqljoZHU1VCAAAJ8AAAACAAAAAgbJF0j09TLzIAAAoQAAAAWwAAAGB+FsNBY21hcAAACmwAAAGdAAAB+uY47ZljdnQgAAAMDAAAADoAAAA..alotmorecharacters...FDmYlYoTkE8HdsTFF2cwU74AAU/lecUAAA==) format('woff'),
url('proximanova-bold-webfont-webfont.ttf') format('truetype'),
url('proximanova-bold-webfont-webfont.svg#ProximaNovaBold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face works in IE8 but not IE9
No answer, just confirmation: I have a similar kind of problem. Font works in all other IE versions except IE9, both using IETester and original browser. When changing Document Mode (F12 dev tools) font works. Not how I'd like it though.
Update: With some trickery I managed to get it working. Seems like IE9 is using the .woff version of the font (which I had excluded) over the .eot that I thought it would. I used the @font-face generator from fontsquirrel to get all the different font variations and included them in my project, using the smileyface-local. Did not have to alter my .htaccess file. Now works fine and looks the same in all IE versions:
@font-face {
font-family: "LucidaFax-bold";
src: url("_font/LucidaFax-bold.eot");
src: local("☺"),
url("_font/LucidaFax-bold.woff") format("woff"),
url("_font/LucidaFax-bold.ttf") format("truetype"),
url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg");
}
h1 { font-family: "LucidaFax-bold", serif;}
(I even got mad fresh using Mark "Tarquin" Wilton-Jones' text-shadow hack, applying same look to IE versions as rest of the browser world. Old school? Looks great! Was it worth it? Well, learned a lot. ;)
Related Topics
Why Clear: Right Doesn't Work as Intended
Make Flex Item Full Width After It's Been Wrapped Without Using Media Queries
Check If Parent Has Class Using Less
PHP/HTML/CSS - If Firefox, If Chrome, If Safari
Em Vs Px... for Mobile Browsers
How to Center The Zurb Foundation Top Bar Nav
Remove or Add Class in Angular
Internet Explorer Doesn't Honor My Min-Height: 100% with Flexbox
CSS 2.1 Spec: 8.3.1 Collapsing Margins: Cannot Properly Interpret Special Case: Clarification Sought
CSS Gradients in Ie7 & Ie8 Is Causing Text to Become Aliased
Sharepoint 2013 Deleting Contents of <Style> in Embed Code When Saving
Sorting CSS Properties into an Arbitrary Order
Update Source File When CSS Is Changed Through Chrome Developer Tools
Web Safe Font Weights - How to Get Thinner