Set custom font family in WebView


#1

Hi
I am using a WebView to display some HTML content in my app. I ma not being able to display a custom font in the webview inspite of including the font in the fonts folder.
My template code looks like this

<WebView src="<span><b><font color='#ff515e' size='2' face='Abel'>{{item.Text}}</font></b></span>"></WebView>

Any suggestions on how I can display a custom font in the WebView.


#2

I believe your issue is with Android. The HTML content inside your WebView doesn’t know about your local fonts. You may insert CSS in your html content that maps to the font. For example,

<style type="text/css">
@font-face {
    font-family: Abel;
    src: url("file:///android_asset/app/fonts/Abel.ttf")
}
</style>

#3

HI @manojdcoder
I tried the same and does not seem to be working on both Android as well as on iOS.
I added the custom font Helvetica Neue LT Std 45 Light in app/fonts. The font works well across the application. However, it doesn’t work inside the webview plugin.
Given below is the html that I am using on iOS: -

this.aboutContent = <html> <head> <style type="text/css"> body { font-family: "Helvetica Neue LT Std"; font-size: 20px; text-align: justify; } </style></head> <body>About my application <table style="font-size:12px"> <tr> <td>myapplication version:</td> <td>1.0</td> </tr> </table> </body></html>;

The html that I am using in Android is as follows: -

this.aboutContent = <html> <head> <style type="text/css"> @font-face { font-family: Helvetica Neue LT Std 45 Light; src: url("file:///android_asset/app/fonts/HelveticaNeueLTStd-Lt.otf") } body { font-family: "Helvetica Neue LT Std"; font-size: 20px; text-align: justify; } </style></head> <body>About my application <table style="font-size:12px"> <tr> <td>myapplication version:</td> <td>1.0</td> </tr> </table> </body></html>;

and below given is the view (Html as I am using angular and typescript): -

  <StackLayout class="content-section"  >
    <GridLayout  rows="*,auto" columns="*" >
      <WebView row="0" id="aboutWebView" (loadFinished)="loadFinished($event)" (loadStarted)="loadStarted($event)"
       [src]="aboutContent" class="info-page-content" ></WebView>
    </GridLayout>
  </StackLayout>

It does not work on either platforms. Any help would be much appreciated.

Thank You.