<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,
And defined two class in the header
It works well in Firefox, Chrome, Safari, but only not working in IE 8 or IE 9.
Then I searched in google, and from http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp I got below information:
But it's impossible, 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
http://www.font2web.com/
After copy the new .woff font file into css/ folder, then add one more row into main.css, like below.
The issue fixed.
For someone may have same issue.
@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 8 or IE 9.
Then I searched in google, and from http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp I got below information:
Quote
The @font-face rule is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
However, Internet Explorer 9 only supports .eot type fonts, while Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts.
Note: Internet Explorer 8 and earlier versions, do not support the @font-face rule.
However, Internet Explorer 9 only supports .eot type fonts, while Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts.
Note: Internet Explorer 8 and earlier versions, do not support the @font-face rule.
But it's impossible, 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
http://www.font2web.com/
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.