How do you determine the correct local font names when preloading webfonts?

Question

This article: When do web-fonts load and can you pre-load them?, says to use local to take advantage of already loaded fonts. I can't find any other way to preload webfonts.

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?

@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');
}

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?

Answer 1

As a supplement to Jukka's answer, you can use the FontBook app on Mac OS to find the various names for a font. To see the names, select the font and then select the info tab (CMD+i).

Answer 2

Web fonts are subject to caching under normal rules, so if a user has recently visited a page that refers to a web font, then a copy cached the browser may be used when another page is visited and it uses the same URL for the web font.

The use of local(...) relates to something else, namely to the possibility that the font might exist in a system as an installed font. This depends on system settings and user actions; as an author, you cannot make users’ systems install fonts.

Technically, in local(...), you should use a name for a specific typeface (not font family), and the name should be either the PostScript name or the full name of the typeface. These names can be found in the names table of the font as corresponding to nameID values 6 and 4. To find out such names, you can use e.g. the DTL OTMaster Light program.

But this will only affect systems with the font installed. That is, for systems where the user has purchased and installed the font.