problem with font-face in fire fox

minaalamshahi

what is problem of this code? dont work in fire fox onlu

@font-face
{
font-family: 'B Yekan';
src: url('../../../DirFont/Yekan.eot?#') format('eot'),
url('../../../DirFont/Yekan.woff') format('woff'),
url('../../../DirFont/Yekan.ttf') format('truetype');
}

body
{
font-family:'B Yekan' ,BYekan,Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #666;

font-size: 12px;
line-height: 1.5em; 
background-color: #eeeff3; background-repeat: repeat-x; background-position: top

}

jkirkerx

I make a dedicated CSS file for each font, this is what I use and it works fine in all browsers, no complaints in 2 years.

/* EN-US_Berylium.css */

@font-face {
font-family: 'beryliumRG';
src: url('/fonts/Berylium/berylium_rg-webfont.eot');
src: url('/fonts/Berylium/berylium_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/Berylium/berylium_rg-webfont.woff') format('woff'),
url('/fonts/Berylium/berylium_rg-webfont.ttf') format('truetype'),
url('/fonts/Berylium/berylium_rg-webfont.svg#beryliumRG') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'beryliumRG_IT';
src: url('/fonts/Berylium/berylium_rg_it-webfont.eot');
src: url('/fonts/Berylium/berylium_rg_it-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/Berylium/berylium_rg_it-webfont.woff') format('woff'),
url('/fonts/Berylium/berylium_rg_it-webfont.ttf') format('truetype'),
url('/fonts/Berylium/berylium_rg_it-webfont.svg#beryliumRG_IT') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'berylium_BD';
src: url('/fonts/Berylium/berylium_bd-webfont.eot');
src: url('/fonts/Berylium/berylium_bd-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/Berylium/berylium_bd-webfont.woff') format('woff'),
url('/fonts/Berylium/berylium_bd-webfont.ttf') format('truetype'),
url('/fonts/Berylium/berylium_bd-webfont.svg#berylium_BD') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'beryliumBD_IT';
src: url('/fonts/Berylium/berylium_bd_it-webfont.eot');
src: url('/fonts/Berylium/berylium_bd_it-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/Berylium/berylium_bd_it-webfont.woff') format('woff'),
url('/fonts/Berylium/berylium_bd_it-webfont.ttf') format('truetype'),
url('/fonts/Berylium/berylium_bd_it-webfont.svg#beryliumBD_IT') format('svg');
font-weight: normal;
font-style: normal;

}

Then I use it in another CSS File

.txt_BeryliumRG
{
color: rgb(0,0,0);
font-family: "beryliumRG", Georgia, Serif;
font-size: 1.2em;
font-weight: normal;
text-indent: 0.25em;
text-align:justify;
}

Boipelo

I am interested.., I normally get fonts as .ttf, do I also need them in .eot, .woff and .svg format? I read somewhere that all browsers support .ttf formats.

I remain joe!

jkirkerx

You have to get all 4 versions of the font eot svg ttf woff There's a font website that will convert fonts to all 4 formats and you can download the font package in a zip file. [font squirrel^]

Bernhard Hiller

Two points to check: - space in name of font-family "B Yekan" - I'd prefer "BYekan" instead. - relative URL to the location: url('../../../DirFont/Yekan.ttf') format('truetype'); - I'd prefer an absolute URL instead: how do the browsers / the web server behave when you use too many "../"?