Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Use multiple custom fonts using @font-face?

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.

like image 846
James MV Avatar asked Aug 10 '11 22:08

James MV


People also ask

How do I use multiple fonts in CSS?

Multiple variations of a font family can be declared by changing the font-weight and src property of @font-face rule.


4 Answers

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.

like image 192
BoltClock Avatar answered Oct 15 '22 19:10

BoltClock


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.

like image 23
Adam Stacey Avatar answered Oct 15 '22 19:10

Adam Stacey


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 */
}
like image 33
5ulo Avatar answered Oct 15 '22 17:10

5ulo


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.

like image 40
tdammers Avatar answered Oct 15 '22 17:10

tdammers