title: How do you determine the correct local font names when preloading webfonts?
body: <p>This article: <a href="https://stackoverflow.com/questions/13249773/when-do-web-fonts-load-and-can-you-pre-load-them">When do web-fonts load and can you pre-load them?</a>, says to use local to take advantage of already loaded fonts. I can't find any other way to preload webfonts. </p>
  
  <p>However, I can't figure out what names I am supposed to use for the local references. In MacOSX multiple variants show up as the same font name.  e.g. what i would think would be local("Helvetica Neue Light") is available in font book as "Helvetica Neue"... how do i refer to different variants? </p>
  
  <pre><code>@font-face {
    font-family: 'ProximaNova';
    font-weight: normal;
    font-style: normal;
    src: url('/fonts/proximanova/ProximaNova-Reg-webfont.eot');
    src:  local("Proxima Nova Regular"), url('/fonts/proximanova/ProximaNova-Reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/proximanova/ProximaNova-Reg-webfont.woff') format('woff'),
         url('/fonts/proximanova/ProximaNova-Reg-webfont.ttf') format('truetype'),
         url('/fonts/proximanova/ProximaNova-Reg-webfont.svg#webfont') format('svg');
  }
  
  @font-face {
    font-family: 'ProximaNova';
    font-weight: $light_weight;
    font-style: normal;
    src: url('/fonts/proximanova/ProximaNova-Light-webfont.eot');
    src: url('/fonts/proximanova/ProximaNova-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/proximanova/ProximaNova-Light-webfont.woff') format('woff'),
         url('/fonts/proximanova/ProximaNova-Light-webfont.ttf') format('truetype'),
         url('/fonts/proximanova/ProximaNova-Light-webfont.svg#webfont') format('svg');
  }
  </code></pre>
  
  <p>All variations still result in requests for the woff files in chrome. Additionally, I can't find any recent or current best practices on web fonts or how to optimize their performance, how can I prevent these requests? </p>