How do you determine the correct local font names when preloading webfonts?
css, fonts, performance, webfonts
Solution
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).
Problem
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?