@ fontface in FF5

HI,

I had issue with @fontface in FF5.

i used 2 fonts

  1. for menu
  2. for Big Headding.

Big Headding works fine but for menu @fontface not appy.

can any one find arround this.

Thank you
Sidd

Do you have a link to your site or code to show?

As FPMSI said, no code, no help… Though stupid question: are you including ALL FOUR formats so the one FF supports is actually present? Are you using a tool like google fonts or font-squirrel or are you trying to hand do it?

If you’re just saying .eot like another poster with a similar title here, then of course it doesn’t work in FF… or Safari… or Chrome… or Opera…

But again, without seeing your code, we’re guessing wildly in the dark.

@font-face {
font-family: oldsansblack;
local(“OldSansBlack.ttf”);
src: url(‘http://www.waspmarketing.com/OldSansBlack.ttf’);
src: url(‘http://www.waspmarketing.com/OldSansBlackUnderline.ttf’);

font-family: rockwell;
	local("ROCK.TTF");
	src: url('http://www.waspmarketing.com/ROCK.TTF');

}

Here is css code

@font-face {
font-family: oldsansblack;
local(“OldSansBlack.ttf”);
src: url(‘http://www.waspmarketing.com/OldSansBlack.ttf’);
src: url(‘http://www.waspmarketing.com/OldSansBlackUnderline.ttf’);

font-family: rockwell;
	local("ROCK.TTF");
	src: url('http://www.waspmarketing.com/ROCK.TTF');

}

Yup, your’e only embedding TTF – which many browsers DO NOT SUPPORT. You have to convert that TTF to all the properly formats. You’re embed is also invalid, as you’re embedding the underline and normal versions twice, meaning you should only be getting the underline version.

My advice: upload your TTF to font squirell’s webfont generator.
Font Squirrel | Create Your Own @font-face Kits

So it can convert it into all the all the appropriate file formats for all browsers and give you a working example css of the PROPER way to embed a font.

Hell, you’re even doing multiple font-families in a single @font-face… which I think (not certain) is also invalid… so that might not even work in the browsers that support TTF.

Thank you deathshadow60.

Can you give some sample code how to use multiple fonts in @fontface

Thank you
Sidd

You should be able to use multiple fonts by listing them all first with the @font-face near the top of your stylesheet (kinda like you did) but then on the elements where you want the fonts, list that font first.

h2 {
font: ‘goofy new font’, backup font, backup font, serif;
}

someOtherElementy {
font: ‘some other goofy new font’, backup font, backup font, sans-serif;
}

Or so I thought, it’s been a while since i’ve seen @font-face code.

Here is a sample of code using all the types of fonts:


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

}

Check out: Font Squirrel | Create Your Own @font-face Kits

Thanks all,

But i did’t found Answer.

How to use 1) oldsansblack 2) Rrockwell

these fonts in @fontface ?

You would use the code provided above for the font “QuicksandLight” but using all variants of the fonts you want to use.

Unfortunately i don’t see that those two fonts are ready for @fontface without all the variants of the fonts besides just the *ttf true types.

I may be wrong - with more searching you may find a way to convert the ttf or find the other file types. Or you may want to check out fonts that are already working and proven across all browsers.

Check out google font api and fontsquirrel if you decide on changing the font.