@font-face got better – integrate multiple fonts in a single CSS

I been asked a very common question by my reader on my blog as well as through other sources that if it is possible to add more than one font family to a CSS file and if it is possible to declare it in a single font-family rule. So i felt that i should write about this on my blog and let people know that its much easier to integrate multiple fonts in a single CSS all you have to do is

@font-face {
    font-family: 'Font Family';
    src: url('../fonts/font.eot');
    src: url('../fonts/font.eot?#iefix') format('embedded-opentype'),
         url('../fonts/font.woff') format('woff'),
         url('../fonts/font.ttf') format('truetype'),
         url('../fonts/font.svg#Font Family') format('svg');
    font-weight: normal/bold/inherit/custom;
    font-style: inherit/italic/oblique;
}

if you want to define another font family 

@font-face {
    font-family: 'Font Family 2';
    src: url('../fonts/font2.eot');
    src: url('../fonts/font2.eot?#iefix') format('embedded-opentype'),
         url('../fonts/font2.woff') format('woff'),
         url('../fonts/font2.ttf') format('truetype'),
         url('../fonts/font2.svg#Font Family 2') format('svg');
    font-weight: normal/bold/inherit/custom;
    font-style: inherit/italic/oblique;
}

Now lets say you want to call both font’s in a single font-family declaration

class my-custom-font {
     font-family: 'Font Family', 'Font Family 2';

There is a comon mistake amongst declaring font-family in CSS, that is not enclosing font-family names where there is more than one word is used for the font-family. like it wont work if we use font-family:

 Font Family, Font Family 2

We have to use it like

 'Font Family', "Font Family 2"

its fine if you use single quote or double quote they are 100{1197d871b3640c07f1363a669d891f22f4178284910abd37b0b76b7a10d61d3b} safe.

note you can view my older posts on @font-face basics here:

Custom Fonts using @font-face in HTML/CSS – Extended
Custom Fonts using @font-face in HTML/CSS
.