/*use font awesome content on :before pseudo*/
&:before {
font-family: FontAwesome;
content: "\f067";
margin-right: 5px;
}
/*Add font properties in a single line*/
font: 300 16px/1.4 'Trade Gothic';
/*using eot, ttf, woff font*/
@font-face {
font-family: 'Trade Gothic';
src: url('../fonts/trade-gothic-no-18-condensed.eot');
src: url('../fonts/trade-gothic-no-18-condensed.eot?#iefix') format('embedded-opentype'), url('../fonts/trade-gothic-no-18-condensed.woff') format('woff'), url('../fonts/trade-gothic-no-18-condensed.ttf') format('truetype'), url('../fonts/trade-gothic-no-18-condensed.svg#font-name') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Trade Gothic';
src: url('../fonts/trade-gothic-no-20-condensed-bold.eot');
src: url('../fonts/trade-gothic-no-20-condensed-bold.eot?#iefix') format('embedded-opentype'), url('../fonts/trade-gothic-no-20-condensed-bold.woff') format('woff'), url('../fonts/trade-gothic-no-20-condensed-bold.ttf') format('truetype'), url('../fonts/trade-gothic-no-20-condensed-bold#font-name') format('svg');
font-weight: bold;
font-style: italic;
}
/*Add multiple google font's variant*/
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
