@font-face {
  font-family: 'DINPro';
  src: url("./DINPro/DINPro-Bold.eot");
  src: url("./DINPro/DINPro-Bold.eot?#iefix") format("embedded-opentype"),
       url("./DINPro/DINPro-Bold.woff2") format("woff2"),
       url("./DINPro/DINPro-Bold.woff") format("woff"),
       url("./DINPro/DINPro-Bold.ttf") format("truetype"),
       url("./DINPro/DINPro-Bold.svg#DINPro-Bold") format("svg");
  font-weight: bold;
}

@font-face {
  font-family: 'DINPro';
  src: url("./DINPro/DINPro-Light.eot");
  src: url("./DINPro/DINPro-Light.eot?#iefix") format("embedded-opentype"),
       url("./DINPro/DINPro-Light.woff2") format("woff2"),
       url("./DINPro/DINPro-Light.woff") format("woff"),
       url("./DINPro/DINPro-Light.ttf") format("truetype"),
       url("./DINPro/DINPro-Light.svg#DINPro-Light") format("svg");
  font-weight: 200;
}

@font-face {
  font-family: 'DINPro';
  src: url("./DINPro/DINPro-Medium.eot");
  src: url("./DINPro/DINPro-Medium.eot?#iefix") format("embedded-opentype"),
       url("./DINPro/DINPro-Medium.woff2") format("woff2"),
       url("./DINPro/DINPro-Medium.woff") format("woff"),
       url("./DINPro/DINPro-Medium.ttf") format("truetype"),
       url("./DINPro/DINPro-Medium.svg#DINPro-Medium") format("svg");
  font-weight: 300;
}

@font-face {
  font-family: 'DINPro';
  src: url("./DINPro/DINPro-Regular.eot");
  src: url("./DINPro/DINPro-Regular.eot?#iefix") format("embedded-opentype"),
       url("./DINPro/DINPro-Regular.woff2") format("woff2"),
       url("./DINPro/DINPro-Regular.woff") format("woff"),
       url("./DINPro/DINPro-Regular.ttf") format("truetype"),
       url("./DINPro/DINPro-Regular.svg#DINPro-Regular") format("svg");
  font-weight: normal;
}