Шрифт не работает, но пути правильные

Пытаюсь использовать круговой шрифт, но почему-то возвращается к "arial" Вот мой
файл fonts.css:

/* Light Font */
@font-face {
    font-family: "CircularWeb";
    src: url("../fonts/Circular/CircularWeb-Light.eot");
    src: url("../fonts/Circular/CircularWeb-Light.woff") format("woff"),
         url("../fonts/Circular/CircularWeb-Light.woff2") format("woff2");
    font-weight: 300;
}

@font-face {
    font-family: "CircularWeb";
    src: url("../fonts/Circular/CircularWeb-Light.eot");
    src: url("../fonts/Circular/CircularWeb-Light.woff") format("woff"),
         url("../fonts/Circular/CircularWeb-Light.woff2") format("woff2");
    font-style: italic;
    font-weight: 300;
}
/* End Light Font */


/* Normal Font */
@font-face {
    font-family: "CircularWeb";
    src: url("../fonts/Circular/CircularWeb-Book.eot");
    src: url("../fonts/Circular/CircularWeb-Book.woff") format("woff"),
         url("../fonts/Circular/CircularWeb-Book.woff2") format("woff2");
    font-weight: 400;
}

@font-face {
    font-family: "CircularWeb";
    src: url("../fonts/Circular/CircularWeb-Book.eot");
    src: url("../fonts/Circular/CircularWeb-Book.woff") format("woff"),
         url("../fonts/Circular/CircularWeb-Book.woff2") format("woff2");
    font-style: italic;
    font-weight: 400;
}
/* End Normal Font */


/* Medium Font */
@font-face {
    font-family: "CircularWeb";
    src: url("../fonts/Circular/CircularWeb-Medium.eot");
    src: url("../fonts/Circular/CircularWeb-Medium.woff") format("woff"),
         url("../fonts/Circular/CircularWeb-Medium.woff2") format("woff2");
    font-weight: 500;
}

@font-face {
    font-family: "CircularWeb";
    src: url("../fonts/Circular/CircularWeb-Medium.eot");
    src: url("../fonts/Circular/CircularWeb-Medium.woff") format("woff"),
         url("../fonts/Circular/CircularWeb-Medium.woff2") format("woff2");
    font-style: italic;
    font-weight: 500;
}
/* End Medium Font */


/* Bold Font */
@font-face {
    font-family: "CircularWeb";
    src: url("../fonts/Circular/CircularWeb-Bold.eot");
    src: url("../fonts/Circular/CircularWeb-Bold.woff") format("woff"),
         url("../fonts/Circular/CircularWeb-Bold.woff2") format("woff2");
    font-weight: 700;
}

@font-face {
    font-family: "CircularWeb";
    src: url("../fonts/Circular/CircularWeb-Bold.eot");
    src: url("../fonts/Circular/CircularWeb-Bold.woff") format("woff"),
         url("../fonts/Circular/CircularWeb-Bold.woff2") format("woff2");
    font-style: italic;
    font-weight: 700;
}
/* End Bold Font */


/* Black Font */
@font-face {
   font-family: "CircularWeb";
   src: url("../fonts/Circular/CircularWeb-Black.eot");
   src: url("../fonts/Circular/CircularWeb-Black.woff") format("woff"),
        url("../fonts/Circular/CircularWeb-Black.woff2") format("woff2");
   font-weight: 900;
}

@font-face {
   font-family: "CircularWeb";
   src: url("../fonts/Circular/CircularWeb-Black.eot");
   src: url("../fonts/Circular/CircularWeb-Black.woff") format("woff"),
        url("../fonts/Circular/CircularWeb-Black.woff2") format("woff2");
   font-weight: 900;
   font-style: italic;
}
/* End Black Font */

Вот мой SASS для использования шрифта:

$font-family-primary: "CircularWeb", Arial, sans-serif;

@media print {
  body, html {
    font-family: "CircularWeb", Arial, sans-serif;
  }
}

*,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "CircularWeb", Arial, sans-serif;
}

Я пробовал несколько разных методов для этого, но, похоже, ничего не работает. Возможно, я сделал их неправильно, поэтому я открыт для любых предложений. Мой скомпилированный каталог CSS: root / css. Каталог моих шрифтов: root / fonts

Если я перейду на: mysite.com/fonts/Circular/CircularWeb-Light.eot, он сохранит шрифт, поэтому я знаю, что использую правильный каталог. Любая помощь будет принята с благодарностью. (Я никогда не добавлял шрифт из локального каталога только из fonts.google)