CSS @font-face property

[stormshadow]

After searching the web for methods to use fonts that I have downloaded from the internet and converted to the appropriate web formats (ie:.eot,ttf, svg) I wanted to learn how to make sure that the fonts that I have converted and saved to my web folder show up when other people view my website. So I followed some website tutorials on this and looked at some other website code and this is what I did

	@font-face {
		font-family: 'QuicksandBook';
		src: url('../css/fonts/quicksand_book/quicksand_book-webfont.eot');
		src: url('../css/fonts/quicksand_book/quicksand_book-webfont.eot?iefix') format('eot'),
		     url('../css/fonts/quicksand_book/quicksand_book-webfont.woff') format('woff'),
			 url('../css/fonts/quicksand_book/quicksand_book-webfont.ttf' format('truetype'),
			 url('../css/fonts/quicksand_book/quicksand_book-webfont.svg#webfontZam02nTh') format('svg');
		font-weight: normal;
		font-style: normal; }
		
	@font-face {
		font-family: 'Museo300';
		src: url('../css/fonts/museo_300/Museo300-Regular-webfont.eot');
		src: url('../css/fonts/museo_300/Museo300-Regular-webfont.eot?iefix') format('eot'),
			 url('../css/fonts/museo_300/Museo300-Regular-webfont.woff') format('woff'),
			 url('../css/fonts/museo_300/Museo300-Regular-webfont.ttf') format('truetype'),
			 url('../css/fonts/museo_300/Museo300-Regular-webfont.svg#webfontZam02nTh') format('svg');
		font-weight: normal;
		font-style: normal; }
		
	@font-face {
		font-family: 'Titilliumtext22l003';
		src: url('../css/fonts/titilliumtext22l003/titilliumtext22l003-webfont.eot');
		src: url('../css/fonts/titilliumtext22l003/titilliumtext22l003-webfont.eot?iefix') format('eot'),
		     url('../css/fonts/titilliumtext22l003/titilliumtext22l003-webfont.woff') format('woff'),
			 url('../css/fonts/titilliumtext22l003/titilliumtext22l003-webfont.ttf') format('truetype'),
			 url('../css/fonts/titilliumtext22l003/titilliumtext22l003-webfont.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
		font-style: normal; }

After all of this, it still did not work and I do not know If there is a way I am calling the font wrong in the CSS but I have all the right formats and followed instructions from sites like this http://blog.themeforest.net/tutorial...-face-support/ and still did not get the right result.

When I used the fonts, I would do something like this for the Titilliumtext22l003 font

h1.logo {"Tililliumtext22l003", "titilliumtext22l003", Helvetica, Arial, sans-serif; color:#000000;

[J. H. Rasmussen]

You forgot "font-family:" in the css code:

h1.logo {font-family: "Tililliumtext221003", "titilliumtext221003", Helvetica, Arial, sans-serif; color:#000000;

I'm not sure that it's a good idea to use a pipe character in the font-family name or filename.

[stormshadow]

Those are not piping characters but 1's and l's, are you sure that is all that I need to do? I keep getting this feeling that my sources are written wrong especially if I wanted it to work flawlessly with other browsers, I saw something developed by Paul Irish called the bulletproof method...but I do not know how to implement it here which is part of the issue. Any help there?

[J. H. Rasmussen]

Only two things come to mind:
- I have never heard of an ie fix requiring "?iefix", on the other hand i don't really see it as a problem, since it shouldn't prevent downloading the font.
- Looking at http://www.w3.org/TR/css3-fonts/#src-desc i couldn't find format("eot"), maybe you where thinking about format("embedded-opentype").

[stormshadow]

Thank you, that W3c reference will help a lot for me to make the proper edits.