CODEWITHSUNDEEP
asp.net-mvcrazorasp.net-mvc-4font-face
GotiBandhu Huda
GotiBandhu Huda

Reputation: 109

How to install custom font before loading website?

I’ve some custom fonts like Trade Gothic Oblique.ttf, now I’m using this in our website but it does not install before loading the website for installing this font I’ve used the following code:

@font-face

{

font-family: "TadeGothic" , TradeGothic, TradeGothic LT Std;

src: url(../fonts/Trade Gothic LT Std Condensed No. 18.ttf);
src: url(../fonts/Trade Gothic Oblique.ttf);

}

But it does not work. Can you tell me what’s wrong with it?

Upvotes: 3

Views: 9079

Answers (3)

Amin Saqi
Amin Saqi

Reputation: 18977

.eot is only for IE. For others, you should use .otf or .ttf files. The following should work:

@font-face {
    font-family: 'Font 1';
    src: url('Font1.eot?') format('eot'), url('Font1.ttf') format('truetype');

}

another way is like the following:

@font-face{
    font-family:'Font 1';
    src: url('Font1.eot'); // For IE
}

@font-face{
    font-family:'Font 1';
    src: url('Font1.otf'); // For others
}

Upvotes: 1

Tim B James
Tim B James

Reputation: 20364

Simply using a .ttf file type will not work cross browser. If you take a look at this blog post by Paul Irish, you might get a better understanding for embedding fonts in your website.

There are also many other websites out there with instructions, and a simple search will give you a lot of information.

Upvotes: 1

Roy Dictus
Roy Dictus

Reputation: 33149

You might want to check out FontSquirrel at http://www.fontsquirrel.com/fontface. They show you how to do it.

Note, though, that it works differently with IE than with other browsers. I believe IE requires TTF and other browsers require OTF as the embedded font standard.

Upvotes: 1

Related Questions