Roboto font gets substituted for a default Time News Roman on only one DOM element in Windows Edge and IE10 on Win7

Question

I made an svg animated banner using html, css and GSAP tweenies. Everything's perfectly fine up until a point where a counter starts counting up using simple innerHTML property. All texts in the banner should be Roboto and they are except for this element which gets substituted with default Times New Roman. This happens only in Windows browsers: Edge and IE10, all other vendors browsers render it as it should be.

You can see on the last image the 70% stands waaaay out

css part:

    .perc-counter {
>       position: absolute;
>       color: rgb(32, 33, 36);
>       font-family: Roboto-Regular;
>       font-size: 2.5em;
>       top: 185px;
>       text-align: right;
>       right: 138px;
>       opacity: 0;
>     }

.percentage {
  position: absolute;
  color: rgb(32, 33, 36);
  font-family: Roboto-Regular;
  font-size: 2.5em;
  top: 185px;
  text-align: left;
  left: 162px;
  opacity: 0;
}

html part:

<div class="perc-counter" id="perc-counter">0</div>
<div class="percentage" id="percent">%</div>

js part:

var percCounter = document.getElementById("perc-counter");
var percent = document.getElementById("percent");

.to(counter, 1.2, {
          val: newVal,
          roundProps: "val",
          onUpdate: function() {
            percCounter.innerHTML = counter.val
          })

Edit: specified this issue happens only in Windows browsers (initial question was confusing)

Answer 1

Perhaps can you try for IE :

<link href='http://fonts.googleapis.com/css?family=Roboto&subset=latin,greek,greek-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>