Setting Weights And Styles With The @font-face Declaration

@font-face {
   font-family: 'UbuntuItalic';
      src: url('Ubuntu-RI-webfont.eot');
      src: url('Ubuntu-RI-webfont.eot?#iefix') format('embedded-opentype'),
           url('Ubuntu-RI-webfont.woff') format('woff'),
           url('Ubuntu-RI-webfont.ttf') format('truetype'),
           url('Ubuntu-RI-webfont.svg#UbuntuItalic') format('svg');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'UbuntuBold';
      src: url('Ubuntu-B-webfont.eot');
      src: url('Ubuntu-B-webfont.eot?#iefix') format('embedded-opentype'),
           url('Ubuntu-B-webfont.woff') format('woff'),
           url('Ubuntu-B-webfont.ttf') format('truetype'),
           url('Ubuntu-B-webfont.svg#UbuntuBold') format('svg');
   font-weight: normal;
   font-style: normal;
}

.u400 {
   font-family: 'UbuntuRegular', arial, sans-serif;
   font-weight: normal;
   font-style: normal;
}

.u400i {
   font-family: 'UbuntuRegularItalic', arial, sans-serif;
   font-weight: normal;
   font-style: normal;
}

.u700 {
   font-family: 'UbuntuBold', arial, sans-serif;
   font-weight: normal;
   font-style: normal;
}

.u700i {
   font-family: 'UbuntuBoldItalic', arial, sans-serif;
   font-weight: normal;
   font-style: normal;
}

References
https://www.smashingmagazine.com/2013/02/setting-weights-and-styles-at-font-face-declaration/

Related