Adding google font Roboto in svg not displaying desired font

Question

I am trying to use Roboto font from Google fonts and adding it as below but not displaying the correct font. I have added this svg image in .html file as below but not getting desired Roboto font.

There is some issue loading fonts in the svg in .html

I have taken help of Using Google Fonts with SVG <object>

button.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="422" height="55" viewBox="0 0 422 55">
       <defs>
          <style type="text/css">
             @import url('https://fonts.googleapis.com/css?family=Roboto');
          </style>
       </defs>
    <defs>
        <filter id="prefix__a" width="101%" height="109.6%" x="-.5%" y="-3.8%" filterUnits="objectBoundingBox">
            <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
            <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0"/>
            <feOffset in="SourceAlpha" result="shadowOffsetOuter2"/>
            <feGaussianBlur in="shadowOffsetOuter2" result="shadowBlurOuter2" stdDeviation=".5"/>
            <feColorMatrix in="shadowBlurOuter2" result="shadowMatrixOuter2" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
            <feMerge>
                <feMergeNode in="shadowMatrixOuter1"/>
                <feMergeNode in="shadowMatrixOuter2"/>
            </feMerge>
        </filter>
        <rect id="prefix__b" width="420" height="52" x="0" y="0" rx="2"/>
    </defs>
    <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
        <use fill="#000" filter="url(#prefix__a)" xlink:href="#prefix__b"/>
        <use fill="#FFF" xlink:href="#prefix__b"/>
        <g>
            <g>
                <path fill="#4285F4" d="M17.854 9.205c0-.639-.057-1.252-.162-1.841H9.324v3.481h4.782c-.206 1.125-.832 2.078-1.773 2.716v2.259h2.872c1.68-1.567 2.649-3.875 2.649-6.615z" transform="translate(123 16) translate(0 1.3)"/>
                <path fill="#34A853" d="M9.324 18c2.4 0 4.41-.806 5.88-2.18l-2.871-2.259c-.796.54-1.813.86-3.009.86-2.314 0-4.273-1.584-4.972-3.711H1.384v2.332C2.846 15.983 5.85 18 9.324 18z" transform="translate(123 16) translate(0 1.3)"/>
                <path fill="#FBBC05" d="M4.352 10.71c-.177-.54-.278-1.117-.278-1.71s.1-1.17.278-1.71V4.958H1.384C.782 6.173.439 7.548.439 9s.343 2.827.945 4.042l2.968-2.332z" transform="translate(123 16) translate(0 1.3)"/>
                <path fill="#EA4335" d="M9.324 3.58c1.305 0 2.476.454 3.397 1.345l2.548-2.58C13.73.891 11.72 0 9.324 0c-3.473 0-6.478 2.017-7.94 4.958L4.352 7.29c.7-2.127 2.658-3.71 4.972-3.71z" transform="translate(123 16) translate(0 1.3)"/>
                <path d="M0.439 0L17.491 0 17.491 17.273 0.439 17.273z" transform="translate(123 16) translate(0 1.3)"/>
            </g>
            <text fill="#000" fill-opacity=".54"   font-size="17" font-weight="700" letter-spacing=".219" transform="translate(123 16)" style="font-family: 'Roboto'">
                <tspan x="42" y="15">Sign in with Google</tspan>
            </text>
        </g>
    </g>
</svg>

Using this svg in angular app as:-

abc.component.html

<i  class="pull-left googleLoginIconW"></i>

abc.component.css

.googleLoginIconW {
  background: url("#{$images-path}/login/button.svg") no-repeat;
  width: 100%;
  height: 52px;
  background-size: cover;
  max-width: 100%;
  box-shadow: 0 2px 7px 0 rgba(62, 62, 81, 0.16);
  border: solid 0.5px #e7e7ea;
  border-radius: 4px;
  cursor:pointer;
}