About WebView and Fonts...

In my previous blog post, I posted some information about using a font which is included as part of the appx package (point #9) which turned out to be not correct. I took that information from this post on the Windows Store C# forum. Since then, I've received requests to more fully explain how to achieve this functionality, and so I researched the information and can give you a fully-vetted tutorial on this matter. There are two ways that I know of to go about doing this, each one for the type of font being used.

 

  1. Using a WOFF font:

    Of the two methods, using the WOFF font is a bit easier. It consists of three steps:

    1. Add the WOFF font to your project. As if you were adding any other existing item, right-click on the project, "Add Existing Item", and point to the .WOFF file so it shows up as part of your project:

    2. Set the "Build Action" under properties to "Content". 

    3. Write the HTML/CSS that will use this font:

       <head>
       <meta charset="utf-8" />
       <title>Using Embedded Fonts - WOFF</title>
       <style type="text/css">
       @font-face {
       font-family: 'Gloria Hallelujah';
       font-style: normal;
       font-weight: 400;
       src: url(Gloria.woff);
       }
      
       .gloria {
       font-family: "Gloria Hallelujah";
       font-size: xx-large;
       }
       </style>
       </head>
       <body>
       <div class="gloria">Gloria Hallelujah</div>
       </body>
       </html>
      

      Interestingly about this, it does not need the "ms-appx-web:///" protocol when it looks in the appx package for the font.

  2. Using a TTF font:

    The method shows above does not work for TTF fonts. However, it is still possible to embed a font into your webpage for use in the webview

    1. Convert your font to a base-64 encoded format. I am sure there are a lot of base-64 encoders out there, but I found one here that auto-generates everything for you.

    2. Using the base-64 encoded format, embed the font directly into your page using the @font-face css tag like this (this was auto-generated using the link above, using the advanced features to specific base-64 encoding):

      @font-face { font-family: 'harry_pregular'; src: url('harryp__-webfont.eot'); } @font-face { font-family: 'harry_pregular'; src: url(data:application/x-font-woff;charset=utf-8;base64, <BASE 64 ENCODED TEXT GOES HERE)> ; format('woff'), url('harryp__-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; }The application will now show your HTML using the embedded fonts. 

 

 

I've attached a working sample to this post. Please let me know (comment or tweet @WinDevMatt) if you have any further questions about this. If you tweet about this, please use our hashtag: #wsdevsol.

UsingFonts.zip