CSS - font properties & font type

0 votes
421 views
added Jul 18, 2018 in CSS by LC Marshal Captain (25,790 points)
/*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">

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...