Шрифт не работает, но пути верны - PullRequest
Новая
       14

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

0 голосов
/ 30 ноября 2018

Я пытаюсь использовать циркулярный шрифт, но по какой-то причине он возвращается к "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)

1 Ответ

0 голосов
/ 30 ноября 2018

Действия по устранению неполадок:

  • протестируйте его онлайн
  • попробуйте другой шрифт
  • попытайтесь с одним объявлением шрифта
  • дважды проверьтепуть к файлу шрифта
  • проверьте в инструменте dev (f12 в Chrome), чтобы увидеть, что шрифт объявляется для объявленных вами элементов
...