Sass синтаксис font-face не загружает семейство шрифтов

Question

Может кто-нибудь сказать мне, почему это не загружается вообще? Когда я проверяю элемент, инспектор показывает «Times Roman», используемый как «Times»

Это из моего основного файла.s.s 1023 *:

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;
  }
}

Затем он преобразуется через sass watch phpstorm:

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; }

Нет ошибок или предупреждений, но я также не вижу загружаемых шрифтов на вкладке сети.

Нужно ли устанавливать chmod из шрифтов что-то особенное? В настоящее время они 755

первое редактирование - я изменил файлы на chmod 777 proxima_nova_reg. * Пока они выглядят, они изменились, но на вкладке шрифты он по-прежнему читается как Times

Как обычно, заранее спасибо

Answer 1

Благодаря комментариям @ Ry- это поставило меня на правильный путь. Я изменил свой файл s css на следующий, который помещает правила font-face перед 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';
    }
  }
}

В результате, sas часов phpstorm создает следующий файл css , который правильно отображает шрифты:

@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 */

Спасибо всем за помощь