Font support on IE 11

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-family

.woff

.woff2

@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:

font-family

body
font-family: Roboto;



Here is a result:

2 Answers
2

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

Roboto

body
font-family: 'Roboto';



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.

font-weight: 100;

font-weight: problem

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.