Custom Gujarati font (GopikaTwo) is not supported on Android mobile browser and hybrid application

I am trying to use custom font GopikaTwo in my hybrid application. I have added below code in my css :-

@font-face {
    font-family: 'GopikaTwo' !important;
    src: url('GopikaTwo.eot') !important;
    src: url('GopikaTwo.eot?#iefix') format('embedded-opentype'),  url('GopikaTwo.woff2') format('woff2'), url('GopikaTwo.woff') format('woff'), url('GopikaTwo.ttf') format('truetype'), url('GopikaTwo.svg#GopikaTwo') format('svg') !important;
    font-weight: normal;
    font-style: normal;
}

.gopika-two {
    font-family: "GopikaTwo", "Roboto", "Helvetica Neue", sans-serif !important;
} 

This is working fine on desktop browser (like Chrome, Firefox) but not on android mobile browser (like chrome). My end goal is to make it running on hybrid mobile application in Android.

Is there any configuration needs to be done?

This worked.

variable.scss

@font-face {
  font-family: 'GopikaTwo';
  src: url('../assets/fonts/GopikaTwo.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/GopikaTwo.woff') format('woff'), url('../assets/fonts/GopikaTwo.ttf') format('truetype'), url('../assets/fonts/GopikaTwo.svg#GopikaTwo') format('svg');
  font-weight: normal;
  font-style: normal;
}
 $font-family-base: "GopikaTwo";
 $font-family-ios-base: $font-family-base;
 $font-family-md-base: $font-family-base;
 $font-family-wp-base: $font-family-base;