Sass font-face syntax not loading font-family - css

Question

Can anyone tell me why this is not loading at all? When I inspect the element, the inspector is showing "Times Roman" Used as "Times"
This is from my main.scss file:
body,
html {
height: 100%;
font-size: 100%;
#font-face {
font-family: 'proxima_nova_reg';
src: url('../media/fonts/proxima_nova_reg.eot'); /* IE9 Compat Modes */
src: url('../media/fonts/proxima_nova_reg.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../media/fonts/proxima_nova_reg.woff') format('woff'), /* Modern Browsers */
url('../media/fonts/proxima_nova_reg.ttf') format('truetype'), /* Safari, Android, iOS */
url('../media/fonts/proxima_nova_reg.svg#svgFontName') format('svg'); /* Legacy iOS */
}
section{
font-family: 'proxima_nova_reg' !important;
}
}
It is then converted to the following via phpstorm's sass watch:
body,
html {
height: 100%;
font-size: 100%; }
#font-face {
body,
html {
font-family: 'proxima_nova_reg';
src: url("../media/fonts/proxima_nova_reg.eot");
/* IE9 Compat Modes */
src: url("../media/fonts/proxima_nova_reg.eot?#iefix") format("embedded-opentype"), url("../media/fonts/proxima_nova_reg.woff") format("woff"), url("../media/fonts/proxima_nova_reg.ttf") format("truetype"), url("../media/fonts/proxima_nova_reg.svg#svgFontName") format("svg");
/* Legacy iOS */ } }
body section,
html section {
font-family: 'proxima_nova_reg' !important; }
No errors or warnings, but I also do not see any fonts being downloaded under the network tab.
Do I need to set the chmod of fonts to something special? They are currently 755
first edit - I changed the files to chmod 777 proxima_nova_reg.* while they look they have changed, but under the fonts tab, it still reads as Times
As usual, thanks in advance

Answer 1

Thanks to comments from #Ry- it put me on the right track. I changed my scss file to the following, which places the font-face rules before the html, body:
#font-face {
font-family: 'proxima_nova_reg';
src: url('../media/fonts/proxima_nova_reg.eot'); /* IE9 Compat Modes */
src: url('../media/fonts/proxima_nova_reg.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../media/fonts/proxima_nova_reg.woff') format('woff'), /* Modern Browsers */
url('../media/fonts/proxima_nova_reg.ttf') format('truetype'), /* Safari, Android, iOS */
url('../media/fonts/proxima_nova_reg.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body,
html {
height: 100%;
font-size: 100%;
section{
span{
font-family: 'proxima_nova_reg';
}
}
}
As a result, phpstorm's watch sass creates the following css file, which renders the fonts correctly:
#font-face {
#font-face {
font-family: 'proxima_nova_reg';
src: url("../media/fonts/proxima_nova_reg.eot");
/* IE9 Compat Modes */
src: url("../media/fonts/proxima_nova_reg.eot?#iefix") format("embedded-opentype"), url("../media/fonts/proxima_nova_reg.woff") format("woff"), url("../media/fonts/proxima_nova_reg.ttf") format("truetype"), url("../media/fonts/proxima_nova_reg.svg#svgFontName") format("svg");
/* Legacy iOS */ }
body,
html {
height: 100%;
font-size: 100%; }
body section span,
html section span {
font-family: 'proxima_nova_reg'; }
/*# sourceMappingURL=main.css.map */
Thank you all for your help