CSS in Tizen WebView (EFL WebKit) wouldn't honor font-family

I am rendering some HTML using WebView based on EFL WebKit in Tizen 2.4 and 3.0 SDK.

<div className="hexArea" id="hexArea1">
  Content
</div>

and corresponding CSS:

.hexArea {
  position: relative;
  height: 95%;
  padding: 3px;
  white-space: pre;
  text-overflow: clip;
  overflow: auto;
  border: 1px solid #0F0F0F;
  color: #0F0F0F;
  font-family: "Lucida Console", "Courier New", Courier, monospace;
}

While this works perfectly well on several platforms such as Desktop, Android WebView, iOS WebView, it does not show fixed-font on the Tizen App. I can't seem to set font for anything on the page.

I tried style="font-family: 'monospace'" on the div, I tried to make the CSS just font-family: monospace, but the html on the Tizen WebView just does not seem to honor font-family.

I am trying to display bytes in hex and decimal, and it looks horrible with normal font. Any ideas how to fix it?

EDIT: I even tried <pre> tag but shows in normal font.

Solution

Currently, Fixed font resources seem to be not provided in the Tizen SDK by default. But it's possible to display a fixed-font in app side using CSS @font-face or the Google Font API.

Use CSS @font-face with font resource.

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

I think you can add a fixed font resource in your app and load and display the font using CSS @font-face.
Use Google Font API.

https://developers.google.com/fonts/docs/getting_started

<html>
  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Roboto Mono">
    <style>
      .hexArea {
        font-family: "Roboto Mono";
      }
    </style>
  </head>
  <body>
    <div>normal font:1234567890</div>
    <div class="hexArea">fixed-font:1234567890</div>
  </body>
</html>