how to apply custom font to web browser content WP

Question

Am developing simple app for learning webBrowser concept in Windows phone. My aim is to display the content in Telugu(Indian language) in my WP7. that web application is displaying Telugu content only

my MainPage.xaml.cs code is :

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
    {
        webBrowser1.Navigate(new Uri("http://www.eenadu.net", UriKind.Absolute));
    }

in MainPage.xaml file

<phone:WebBrowser HorizontalAlignment="Left" Margin="0,92,0,0" Name="webBrowser1"
 VerticalAlignment="Top" Height="575" Width="468" FontFamily="Fonts/eenadu.ttf#Eenadu"  />

and i have included that .ttf file in my project under Fonts folder and assigned Build Action = 'Content'

Am able to call the URL but it displaying unreadable characters.

is there any other way to apply custom font to web browser control?

Thanks in advance

Answer 1

No need to host from remote server, you can use local font embedded CSS and inject to browser control.

(1.) Create the CSS with embedded font

body, a, p, span, div, textarea {
        font-family: MyCustomFont;
}

@font-face {
    font-family: MyCustomFont;
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAXXXXXXXXXXX......) format('woff');
    font-weight: normal;
    font-style: normal;
} 

(2.) Inject jQuery and CSS at WebView_NavigationCompleted method

 private async void MyWebView_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
 {
    // Inject jQuery file which located at local
    StorageFile jquery = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///JavaScripts\\jquery-1.10.2.min.js"));
        string jquery_string = await FileIO.ReadTextAsync(jquery);
        await MyWebView.InvokeScriptAsync("eval", new string[] { jquery_string });


    // Inject custom font embedded CSS 
    StorageFile myfontcss = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///CSS\\mycustomfont.css"));
            string myfontcss_string = await FileIO.ReadTextAsync(myfontcss);

            myfontcss_string = myfontcss_string.Replace("\n", "").Replace("\t", ""); //.Replace("'", "'").Replace("\"", """);
            string cssRef = "$(\"<style id='myfont' type='text/css'>" + myfontcss_string + "</style>\").appendTo('head');";

            await MyWebView.InvokeScriptAsync("eval", new string[] { cssRef });

 }

Answer 2

Windows phone supports web fonts. However, they cannot be embedded in the XAP. Suggested workaround is to host the fonts on a remote server and perhaps use AppCache to keep the font files locally on the device.