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.
Custom Fonts using @font-face in HTML/CSS – Extended
Custom Fonts using @font-face in HTML/CSS
.