locked
Load fonts from ms-appdata/local

    Question

  • In my HTML and JavaScript based Windows 8.1 app I'm downloading custom ttf and otf font files. The files downloads over https and is stored in the appdata/local folder. Once the font is downloaded I create a stylesheet with @font-face declaration to use the font.

    The font is references with ms-appdata:///local/fontfile.ttf. But, the file can't load due to a "Can’t load <ms-appdata:///local/fontfile.ttf>. An app can’t load remote web content in the local context." error.

    If I download an image and add that to the DOM with the same technique everything works. The font files also works on a regular web site, so it's not the file itself either.

    Any ideas how I can get downloaded font files to work?


    Thursday, December 5, 2013 9:44 AM

All replies

  • Hi johan,

    From the description of the error message, it seems you are referring to remote web content, means the fontfile.ttf point to a remote web content, but not a local item.

    Why not directly use the ttf font file directly instead of download?

    using the following code:

        <style>
            @font-face {
                font-family: myFirstFont;
                src: url(http://yourfontaddress.ttf);
            }
    
           #myfont {
                font-family: myFirstFont;
            }
        </style>
    
    <p id="myfont">Content goes here</p>
    <p>Content goes here</p>

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, December 6, 2013 8:00 AM
    Moderator
  • Thank you for the reply!

    That was the first thing I tried. I also tried adding it a trusted URL using https, but I get the remote web content error then as will. Then I thought that maybe the file needs to be stored locally, so I changed to downloading the file to the local app data folder, that that didn't help. 

    I read somewhere else that ttf files are blocked and that you basically only can load images from the local app data folder and use in a local context. Is that true? 

    When testing this approach with a png image it works without the remote web content error, but with a font I get that error.

    Friday, December 6, 2013 8:57 AM
  • I might add that I create the <style> tag and @font-face declaration at runtime using code and add it to the DOM. Don't know if that might make things more complicated.
    Friday, December 6, 2013 8:59 AM
  • Hi johan,

    I think I made a mistake in my last post, I met  the same error if I use font-face url, I did not recognize it after I saw your reply. 

    I saw the documentation: http://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx, which mentions that the Data URI for fonts is supported while the data is web content, but I cannot make it work.

    I try to use base64 encrypted font but I could not make it work with IE, therefore I think it would not work with Windows Store App too(they use the same render engine). Maybe its not supported? I found a great sample here, the author use the base64 font: http://robert.accettura.com/wp-content/uploads/2009/07/embedded-font-face.html , if you open the page with IE, the font is default, but if opened with Chrome or FireFox, you would able to see the embedded font.

    I will further investigate it.

    --James  


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, December 6, 2013 2:10 PM
    Moderator