CODEWITHSUNDEEP
windows-phone-7webbrowser-controlfont-family
kartheek
kartheek

Reputation: 6684

how to apply custom font to web browser content WP7

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

Upvotes: 1

Views: 469

Answers (2)

Zin Min
Zin Min

Reputation: 4685

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("'", "&#39;").Replace("\"", "&#34;");
            string cssRef = "$(\"<style id='myfont' type='text/css'>" + myfontcss_string + "</style>\").appendTo('head');";

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

 }

Upvotes: 0

Joe Healy
Joe Healy

Reputation: 5819

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.

Upvotes: 2

Related Questions