Use multiple custom fonts using @font-face?

Css Problem Overview

I'm sure I'm missing something really straight forward. Been using a single custom font with normal font face:

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

All works fine when I use it but if I want to add another custom font what do I do? I've tried separating by comma the next one or adding a whole other font face but can't get the second font working.

Css Solutions

Solution 1 - Css

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.

Solution 2 - Css

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.

Solution 3 - Css

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 */
}

Solution 4 - Css

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.

Solution 5 - Css

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/.