@font-face {
   font-family: "SF Pro Display";
   src: local("San Francisco Pro Display Bold"), local("San-Francisco-Pro-Display-Bold"),
      url("SFProDisplay-Bold.woff2") format("woff2"), url("SFProDisplay-Bold.woff") format("woff"),
      url("SFProDisplay-Bold.ttf") format("truetype");
   font-weight: 700;
   font-style: normal;
}
@font-face {
   font-family: "SF Pro Display";
   src: local("San Francisco Pro Display Regular"), local("San-Francisco-Pro-Display-Regular"),
      url("SFProDisplay-Regular.woff2") format("woff2"), url("SFProDisplay-Regular.woff") format("woff"),
      url("SFProDisplay-Regular.ttf") format("truetype");
   font-weight: 400;
   font-style: normal;
}
@font-face {
   font-family: "SF Pro Display";
   src: local("San Francisco Pro Display Medium"), local("San-Francisco-Pro-Display-Medium"),
      url("SFProDisplay-Medium.woff2") format("woff2"), url("SFProDisplay-Medium.woff") format("woff"),
      url("SFProDisplay-Medium.ttf") format("truetype");
   font-weight: 500;
   font-style: normal;
}
@font-face {
   font-family: "SF Pro Display";
   src: local("San Francisco Pro Display Light"), local("San-Francisco-Pro-Display-Light"),
      url("SFProDisplay-Light.woff2") format("woff2"), url("SFProDisplay-Light.woff") format("woff"),
      url("SFProDisplay-Light.ttf") format("truetype");
   font-weight: 300;
   font-style: normal;
}