使用多种自定义字体使用@font-face？

You simply add another @font-face rule:

@font-face {
font-family: CustomFont;
src: url('CustomFont.ttf');
}


@font-face {
font-family: CustomFont2;
src: url('CustomFont2.ttf');
}

If your second font still doesn't work, make sure you're spelling its typeface name and its file name correctly, your browser caches are behaving, your OS isn't messing around with a font of the same name, etc.

Check out fontsquirrel. They have a web font generator, which will also spit out a suitable stylesheet for your font (look for "@font-face kit"). This stylesheet can be included in your own, or you can use it as a template.

You can use multiple font faces quite easily. Below is an example of how I used it in the past:

<!--[if (IE)]><!-->
<style type="text/css" media="screen">
@font-face {
font-family: "Century Schoolbook";
src: url(/fonts/century-schoolbook.eot);
}
@font-face {
font-family: "Chalkduster";
src: url(/fonts/chalkduster.eot);
}
</style>
<!--<![endif]-->
<!--[if !(IE)]><!-->
<style type="text/css" media="screen">
@font-face {
font-family: "Century Schoolbook";
src: url(/fonts/century-schoolbook.ttf);
}
@font-face {
font-family: "Chalkduster";
src: url(/fonts/chalkduster.ttf);
}
</style>
<!--<![endif]-->

It is worth noting that fonts can be funny across different Browsers. Font face on earlier browsers works, but you need to use eot files instead of ttf.

That is why I include my fonts in the head of the html file as I can then use conditional IE tags to use eot or ttf files accordingly.

If you need to convert ttf to eot for this purpose there is a brilliant website you can do this for free online, which can be found at http://ttf2eot.sebastiankippe.com/.

Hope that helps.

If you are having a problem with the font working I have also had this in the past and the issue I found was down to the font-family: name. This had to match what font name was actually given.

The easiest way I found to find this out was to install the font and see what display name is given.

For example, I was using Gill Sans on one project, but the actual font was called Gill Sans MT. Spacing and capitlisation was also important to get right.

Hope that helps.

I use this method in my css file

@font-face {
font-family: FontName1;
src: url("fontname1.eot"); /* IE */
src: local('FontName1'), url('fontname1.ttf') format('truetype'); /* others */
}
@font-face {
font-family: FontName2;
src: url("fontname1.eot"); /* IE */
src: local('FontName2'), url('fontname2.ttf') format('truetype'); /* others */
}
@font-face {
font-family: FontName3;
src: url("fontname1.eot"); /* IE */
src: local('FontName3'), url('fontname3.ttf') format('truetype'); /* others */
}