Font support on IE 11

Question

I have a problem with font on IE 11. Some of my element can't accept font-family. I had .woff and .woff2 but it's not accepting my fonts. How can I solve this? Here's my CSS code:

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

And I'm using the font-family rule like below:

body {
  font-family: Roboto;
}

Here is a result:

[https://stackoverflow.com/questions/30174622/font-face-not-working-with-specific-version-of-internet-explorer-11](https://stackoverflow.com/questions/30174622/font-face-not-working-with-specific-version-of-internet-explorer-11) check if it can help you — Sfili_81, Sep 11 '18 at 06:46

score 0 · Answer 1 · answered Sep 11 '18 at 03:18

0

Your problem is you're assuming Roboto is a built-in web font, which it's not. You need quotation marks:

body {
    font-family: 'Roboto';
}

answered Sep 11 '18 at 03:18

Jack Bashford

43,180
11
50
79

Look in Developer Tools and find out which styles are being applied to the text, and look from there. Or could you please post your entire HTML + CSS code? – Jack Bashford Sep 11 '18 at 03:24
My given style applied all texts but some elements can not accepting it – batgerel.e Sep 11 '18 at 03:33
What versions of HTML are you using? – Jack Bashford Sep 11 '18 at 03:34
HTML5 here is screen when i uncheck style http://tinyimg.io/i/JkoS0Xp.PNG – batgerel.e Sep 11 '18 at 03:36
I agree, it seems to work in Safari. Maybe add an IE declaration (like `-webkit-` but for IE) – Jack Bashford Sep 11 '18 at 03:43

score 0 · Answer 2 · answered Sep 11 '18 at 07:44

Did you check the network tab in DevTools (F12)? You shouldn't have any 404 at load.

If you support IE10+ (IE9- isn't supported by MS itself), you only need WOFF2 and WOFF formats. SVG for example is for iOS3-4 or something like that…

You should first test with an uncommon font family name and super normal parameters (no italic, no thin or bold):

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

It allows you to test for correct path relative to your CSS (compiled CSS if you use Sass and _partials or LESS or PostCSS or Stylus!).
Then you can add font-weight: 100; to both your @-declaration and rules (and remove test bits like body * and !important :p) .
Then change the name of the font family.

I solved my problem. It was the `font-weight: problem` btw thanks :) — batgerel.e, Sep 11 '18 at 08:19

Font support on IE 11

2 Answers2