scss @ font-face #css

Posted 2021-05-18

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

//base64
@font-face {
  font-family   : 'MinionPro Regular';
  src           : local('MinionPro-Regular'), local('MinionPro Regular'),
  url(data:application/font-woff;charset=utf-8;base64, your_base64_here) format('woff2');
}

//google fonts plugs 
//different styles of one font

/* cyrillic-ext */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  src: local('EB Garamond'),
       local('EBGaramond'),
       url(https://fonts.gstatic.com/s/ebgaramond/v7/kYZt1bJ8UsGAPRGnkXPeFTTOQ_MqJVwkKsUn0wKzc2I.woff2) format('woff2'),
       url('myfont.woff') format('woff');;
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  src: local('EB Garamond'),
       local('EBGaramond'),
       url(https://fonts.gstatic.com/s/ebgaramond/v7/kYZt1bJ8UsGAPRGnkXPeFTTOQ_MqJVwkKsUn0wKzc2I.woff2) format('woff2'),
       url('myfont.woff') format('woff');;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}