Posted By

eklemen on 09/20/12

Tagged

Versions (?)

Last Edited at 09/20/12 05:43am

Statistics

Viewed 583 times

Favorited by 0 user(s)

Related snippets

@font-face multiple type variants

/ Published in: CSS

Using the same font-family name keeps things simple and provides a fallback

By changing the font-weight and font-style declarations of each @font-face rule to match each fontâ€™s properties, and using the same font-family name for each rule, we will no longer need to be overly specific in our CSS:

http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

Highlighted TextExpand

/* Archer */
@font-face {
		font-family: 'Archer';
		src: url('archer-book.eot');
		src: url('archer-book.eot?#iefix') format('embedded-opentype'),
				 url('archer-book.woff') format('woff'),
				 url('archer-book.ttf') format('truetype'),
				 url('archer-book.svg#archer-book') format('svg');
		font-weight: normal;
		font-style: normal;
}
@font-face {
		font-family: 'Archer';
		src: url('archer-bookitalic.eot');
		src: url('archer-bookitalic.eot?#iefix') format('embedded-opentype'),
				 url('archer-bookitalic.woff') format('woff'),
				 url('archer-bookitalic.ttf') format('truetype'),
				 url('archer-bookitalic.svg#archer-bookitalic') format('svg');
		font-weight: normal;
		font-style: italic;
}
@font-face {
		font-family: 'Archer';
		src: url('archer-bold.eot');
		src: url('archer-bold.eot?#iefix') format('embedded-opentype'),
				 url('archer-bold.woff') format('woff'),
				 url('archer-bold.ttf') format('truetype'),
				 url('archer-bold.svg#archer-bold') format('svg');
		font-weight: bold;
		font-style: normal;
}
@font-face {
		font-family: 'Archer';
		src: url('archer-bolditalic.eot');
		src: url('archer-bolditalic.eot?#iefix') format('embedded-opentype'),
				 url('archer-bolditalic.woff') format('woff'),
				 url('archer-bolditalic.ttf') format('truetype'),
				 url('archer-bolditalic.svg#archer-bolditalic') format('svg');
		font-weight: bold;
		font-style: italic;
}

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.