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.