<Scenario>: We have the customer want to show their company’s font into web page. They provided me the ttf font file. I simply insert below code into main.css file,
@font-face {
font-family: "Ericsson";
src: url("EricssonCapitalTT.ttf");
}
And defined two class in the header
#header h1
{
margin: 10px 0 0 5px;
font-family: "Ericsson", Helvetica;
color: #326;
font-size: 48px;
font-weight: normal
}
#header h2
{
margin: -12px 0 0 22px;
font-family: "Ericsson", Helvetica;
color: #326;
font-size: 16px;
font-weight: normal
}
It works well in Firefox, Chrome, Safari, but only not working in IE 9 or IE 10.
Then I searched in google, and from http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp I got below information:
But the client did not provide me the .eot file. Because the client’s all other web page is working in IE, so I tracked the client’s page, and found the client is using .woff font file instead of ttf or otf file.
So I need a tool to convert ttf into woff.
Very luck, that I found one online tool to convert ttf font into woff. It’s
After copy the new .woff font file into css/ folder, then add one more row into main.css, like below.
@font-face {
font-family: "Ericsson";
src: url("EricssonCapitalTT.woff"),
url("EricssonCapitalTT.ttf");
}
The issue fixed.
For someone may have same issue.