Quantcast
Channel: Yii Framework Forum
Viewing all articles
Browse latest Browse all 18717

Font2Web Solved The Issue That Customer Font Is Not Working In Ie

$
0
0
<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 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.

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.

Viewing all articles
Browse latest Browse all 18717

Trending Articles