Load font from css file using html in android

Question

I have to change only one line to Uthmanic font.I have tried the below code.But the uthmani font wasn't loaded till now.

I have added the Uthmani font to the folder : assets->articles->UthmanicHafs.ttf

done.html:

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>

 <p > Url to load contents </p>

 <p class="uth">Change this text </p>    --->change to uthmani font for this one line

 </body>

style.css:

body {
    margin: 15px;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans'), local('OpenSans'), url(opensans.woff2) format('woff2');
}

@font-face {
  font-family: 'Uthmani';
  font-weight: 500;
  src: local('Uthmani'), local('Uthmani'), url(UthmanicHafs.ttf) format('ttf');
}


.uth {
   font-family: 'Uthmani'
   font-size: 100px;
   font-weight: bold;
}

I dont know why the uthmani font wasn't loaded.Anyone can help me with this.Thank you.

Mibit · Accepted Answer · 2015-08-10 11:25:29Z

2

You have to define the path to your font. Place the desired OTF or TTF font in assets/fonts and define the path as following in your css file:

@font-face {
    font-family: MyFont;
    src: url("file:///android_asset/fonts/MyFont.otf")
}

If your font isn't a latin font, try to convert the font from otf to svg! There were some discussions and bug reports about this issue, but google never responded - please correct me if I'm wrong.

Use a online converter like Everything Fonts and you'll be good. Be sure that the namespace includes xmlns="http://www.w3.org/2000/svg"!

edited Aug 10, 2015 at 11:25

answered Aug 10, 2015 at 10:16

Mibit

3161 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mansuu.... Over a year ago

I have also added this in my style.css file but it's not working @Mibit

AleshaOleg · Accepted Answer · 2015-08-10 10:14:46Z

0

For android and other mobile devices you need an .svg type of your font. Please use it with media queries.

answered Aug 10, 2015 at 10:14

AleshaOleg

2,2111 gold badge16 silver badges29 bronze badges

Collectives™ on Stack Overflow

Load font from css file using html in android

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related