Поддержка шрифтов в IE 11

Question

У меня проблема со шрифтом в IE 11. Некоторые элементы не могут принять font-family. У меня были .woff и .woff2, но он не принимает мои шрифты. Как я могу решить это? Вот мой код CSS:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;

  src: url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.eot'); /* IE9 Compat Modes */
  src: local('Roboto Thin'), local('Roboto-Thin'),
  url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.woff2') format('woff2'), /* Super Modern Browsers */
  url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.woff') format('woff'), /* Modern Browsers */
  url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
}

И я использую правило font-family, как показано ниже:

body {
  font-family: Roboto;
}

Вот результат:

Answer 1

Вы проверяли вкладку сети в DevTools (F12)?При загрузке у вас не должно быть 404.

Если вы поддерживаете IE10 + (IE9- не поддерживается самой MS), вам нужны только форматы WOFF2 и WOFF.SVG, например, для iOS3-4 или чего-то в этом роде ...

Сначала вы должны протестировать с необычным именем семейства шрифтов и супер нормальными параметрами (без курсива, без тонкого или жирного шрифта):

@font-face {
  font-family: 'test';
  font-style: normal;
  font-weight: 400;

  src: url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.woff2') format('woff2'), /* Super Modern Browsers */
  url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.woff') format('woff') /* Modern Browsers */
;
}

body,
body * {
  font-family: 'test' !important;
}

Это позволяет вам проверять правильность пути относительно вашего CSS (скомпилированный CSS, если вы используете Sass и _partials или LESS, PostCSS или Stylus!).
Затем вы можете добавить font-weight: 100; как к @ -объявлению, так и к правилам.(и удалите тестовые биты, такие как body * и! важный: p).
Затем измените имя семейства шрифтов.

Answer 2

Вы думаете, что Roboto - это встроенный веб-шрифт, которого нет. Вам нужны кавычки:

body {
    font-family: 'Roboto';
}