CODEWITHSUNDEEP
androidcssfont-faceandroid-browsercustom-font
parth.hirpara
parth.hirpara

Reputation: 542

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?

Upvotes: 2

Views: 427

Answers (1)

parth.hirpara
parth.hirpara

Reputation: 542

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;

Upvotes: 1

Related Questions