Advanced Search

Return to Snippet

Revision: 59618
at September 20, 2012 05:43 by eklemen
Initial Code 
/* 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;
}
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
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/

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
@font-face multiple type variants

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS