@font-face for Firefox

Client-Side Development CSS
1

Pls is there a special code to write 4 @font-face to work on firefox? i’m using firefox 4.

This is the code:
@font-face {
font-family: ‘Steel’;
src: url(’…/_fonts/steeltongs-webfont.eot’);
src: url(’…/_fonts/steeltongs-webfont.eot?#i… format(‘embedded-opentype’),
url(’…/_fonts/steeltongs-webfont.woff’) format(‘woff’),
url(’…/_fonts/steeltongs-webfont.ttf’) format(‘truetype’),
url(’…/_fonts/steeltongs.otf’) format(‘opentype’),
url(’…/_fonts/steeltongs-webfont.svg#St… format(‘svg’);
font-weight: normal;
font-style: normal;
}

Its working on all browsers even except Firefox

2

The last @font-face i used worked fine in all d browsers. the only thing i noticed is that safar is not so good with rendering @font-face, although it works oh! i didnt just like it like other browsers, maybe its just me sha. find below my own @font-face code:

@font-face {
font-family: ‘ColaborateThinRegular’;
src: url(‘fonts/ColabThi-webfont.eot’);
src: local(‘:slight_smile:’), url(‘fonts/ColabThi-webfont.woff’) format(‘woff’), url(‘fonts/ColabThi-webfont.ttf’) format(‘truetype’), url(‘fonts/ColabThi-webfont.svg#webfontSEfQG68S’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘ColaborateLightRegular’;
src: url(‘fonts/ColabLig-webfont.eot’);
src: local(‘:slight_smile:’), url(‘fonts/ColabLig-webfont.woff’) format(‘woff’), url(‘fonts/ColabLig-webfont.ttf’) format(‘truetype’), url(‘fonts/ColabLig-webfont.svg#webfontgciz0ufw’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘ColaborateRegular’;
src: url(‘fonts/ColabReg-webfont.eot’);
src: local(‘:slight_smile:’), url(‘fonts/ColabReg-webfont.woff’) format(‘woff’), url(‘fonts/ColabReg-webfont.ttf’) format(‘truetype’), url(‘fonts/ColabReg-webfont.svg#webfontWdaHmihC’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘ColaborateMediumRegular’;
src: url(‘fonts/ColabMed-webfont.eot’);
src: local(‘:slight_smile:’), url(‘fonts/ColabMed-webfont.woff’) format(‘woff’), url(‘fonts/ColabMed-webfont.ttf’) format(‘truetype’), url(‘fonts/ColabMed-webfont.svg#webfont1novJQcj’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘ColaborateBoldRegular’;
src: url(‘fonts/ColabBol-webfont.eot’);
src: local(‘:slight_smile:’), url(‘fonts/ColabBol-webfont.woff’) format(‘woff’), url(‘fonts/ColabBol-webfont.ttf’) format(‘truetype’), url(‘fonts/ColabBol-webfont.svg#webfontoJN3msoP’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

.ColaborateThinRegular {
font-weight: normal;
font-style: normal;
line-height:normal;
font-family: ‘ColaborateThinRegular’, Arial, Helvetica, sans-serif;
font-size-adjust: 0.5;}
.ColaborateLightRegular {
font-weight: normal;
font-style: normal;
line-height:normal;
font-family: ‘ColaborateLightRegular’, Arial, Helvetica, sans-serif;
font-size-adjust: 0.5;}
.ColaborateRegular {
font-weight: normal;
font-style: normal;
line-height:normal;
font-family: ‘ColaborateRegular’, Arial, Helvetica, sans-serif;
font-size-adjust: 0.5;}
.ColaborateMediumRegular {
font-weight: normal;
font-style: normal;
line-height:normal;
font-family: ‘ColaborateMediumRegular’, Arial, Helvetica, sans-serif;
font-size-adjust: 0.5;}
.ColaborateBoldRegular {
font-weight: normal;
font-style: normal;
line-height:normal;
font-family: ‘ColaborateBoldRegular’, Arial, Helvetica, sans-serif;
font-size-adjust: 0.5;}

@font-face {
font-family: ‘FontinSansRegular’;
src: url(‘fonts/fontin_sans_r_45b-webfont.eot’);
src: local(‘:slight_smile:’), url(‘fonts/fontin_sans_r_45b-webfont.woff’) format(‘woff’), url(‘fonts/fontin_sans_r_45b-webfont.ttf’) format(‘truetype’), url(‘fonts/fontin_sans_r_45b-webfont.svg#webfontdHsn6otA’) format(‘svg’);
font-weight: normal;
font-style: normal;}
.FontinSansRegular {
font-weight: normal;
font-style: normal;
line-height:normal;
font-family: ‘FontinSansRegular’, sans-serif;
font-size-adjust: 0.5;}

3

If you are having issues with rendering your own font-face style, why not use Google font( if the font you want is avail) .

Visit http://www.google.com/webfonts - > select your font and import/embed, simple.

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold);

4

@OLSylas what do u use this for, is it meant to overwrite the conventional font-family property in css

5

It’s used to embed font on client browser; after importing, you can then ref the font in the font-family as in font-family:“Yanone Kaffeesatz”, arial, serif;

6

so the coventional font-family property in css still remains?

7

Yes. It’s just a faster way of using font-face. Search google to read about font-face.

8

ok, ve done, quite interesting

9

@OLSylas: this is realy interesting, am loving it, it means i can embed more fonts…so nice

10

only bad side is that google webfont service is still lacking behind in terms of numbers of fonts available. www.fontsquirrel.com offers larger fonts

11

@Dayaki
You are right but they’ve added more lately and the best part is the reliable google C.D.N.

12

whats C.D.N? too much to know and read! haba?

13

Content Delivery Network or Content Distribution Network (CDN)