@font-face for Firefox


#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)