locked
Custom fonts for Metro apps

    Question

  • If I install a custom font on DP via desktop control panel so far so good, I can use the font in my Metro app.

    My question is can I distribute such a font as part of my (.Net) Metro app via the Windows store?

    With Silverlight for Windows and WP7 I can bind the font into an assembly but use of the font is limited to my application. I can't install the font into Windows itself to enable content to be copied into other applications.

    It seems to me that one strength of Metro is the contract system to enable applications to work together. There is also traditional copy and paste especially for Metro<->Desktop. Enabling simple font distribution and system installation via store would add a lot to the user experience.

    What is the situation with custom fonts in Metro/WinRT?
     
    Thanks,
    Bob Richmond

     

    Wednesday, September 21, 2011 10:24 AM

Answers

  • Hey Bob, you can package a font with your metro style app in a very similar way to embedding a font in a WPF or Silverlight application. Once a font is packaged with your app, the font will be placed in your apps private directory when it is deployed. After that, only your app will be able to use the font.

    scenario
    create a TextBlock, customFontTextBlock, which uses FooFontFamily to render text.

    xaml
    <TextBlock x:Name=”customFontTextBlock” FontFamily=”/path-to-file/foo.ttf#FooFontFamily”/>

    directory hierarchy
    .
    Files/
       path-to-file/
          foo.ttf
       mainpage.xaml
       mainpage.xaml.cs

    associated bugs we are aware of and would like to fix
    1. This will work in TextBlock and RichTextBlock but NOT TextBox.
    2. “/path-to-file/” must originate in a root level directory named “Files”; however the path “/path-to-file/” used in FontFamily of the TextBlock should not contain “Files”.
    3. When you add the font as a resource to your VS project ensure the resource type is content and copy local is set.


    Wednesday, September 21, 2011 4:18 PM

All replies

  • I think you are asking if your app can serve as a mechanism to ensure a font gets *installed* to the machine?  If so, I don't think that will be supported.

    Your app, however, can include font files in your package and render using those fonts.  There are a few issues around this in XAML with things like edit boxes (TextBox, rich text controls).  However, using a method similar to Silverlight you can have a font in your package (mark it as Content in your project).

    Hope this helps!


    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer
    Wednesday, September 21, 2011 3:57 PM
  • Hey Bob, you can package a font with your metro style app in a very similar way to embedding a font in a WPF or Silverlight application. Once a font is packaged with your app, the font will be placed in your apps private directory when it is deployed. After that, only your app will be able to use the font.

    scenario
    create a TextBlock, customFontTextBlock, which uses FooFontFamily to render text.

    xaml
    <TextBlock x:Name=”customFontTextBlock” FontFamily=”/path-to-file/foo.ttf#FooFontFamily”/>

    directory hierarchy
    .
    Files/
       path-to-file/
          foo.ttf
       mainpage.xaml
       mainpage.xaml.cs

    associated bugs we are aware of and would like to fix
    1. This will work in TextBlock and RichTextBlock but NOT TextBox.
    2. “/path-to-file/” must originate in a root level directory named “Files”; however the path “/path-to-file/” used in FontFamily of the TextBlock should not contain “Files”.
    3. When you add the font as a resource to your VS project ensure the resource type is content and copy local is set.


    Wednesday, September 21, 2011 4:18 PM
  • Thanks Tim.

    I'll check out the in-app features right now.

    As to the font install question, Metro style apps surely need some mechanism whereby they can share fonts with each other and the desktop. It seems if this is not directly supported as you say I need to invite the user to save the font to e.g. their documents folder space and instruct them to use Control panel to install the font by hand. This is workable but not ideal! Have you any other suggestions?

    Fonts are a special case among sharable system resources. Silverlight is one matter but in a curated system such as Metro via Windows store is there any downside to enabling custom fonts to be installed (perhaps with a setting in manifest)?

    Bob Richmond

    Wednesday, September 21, 2011 5:25 PM
  • Thanks Tim.

    I'll check out the in-app features right now.

    As to the font install question, Metro style apps surely need some mechanism whereby they can share fonts with each other and the desktop. It seems if this is not directly supported as you say I need to invite the user to save the font to e.g. their documents folder space and instruct them to use Control panel to install the font by hand. This is workable but not ideal! Have you any other suggestions?

    Fonts are a special case among sharable system resources. Silverlight is one matter but in a curated system such as Metro via Windows store is there any downside to enabling custom fonts to be installed (perhaps with a setting in manifest)?

    Bob Richmond

    Wednesday, September 21, 2011 5:25 PM
  • Thanks Chipalo.

    I tried Fontfamily in TextBlock and RichTextBlock, both appear to work with my font. Note RichTextBox is not yet available in DP. As you noted TextBox does not work yet. In VS Express I set resource to "Copy always".

    Note that the font does not show up in VS Express XAML designer.

    Thanks

    Bob Richmond

     

    Wednesday, September 21, 2011 6:10 PM
  • I'm glad that's working for you. You are correct that a RichTextBox is not available in the developer preview. I meant to type RichTextBlock instead of RichTextBox :-)
    Wednesday, September 21, 2011 7:00 PM
  • Fonts are a special kind of resource. Often an app developer pays a lot of money to license a font and therefore does not want it to be used by other apps. WPF, Silverlight, and now Win8 XAML allow apps to protect the IP of fonts with they use.

    As you point out, this does complicate sharing licensed fonts between apps produced by the same company or sharing free fonts between any app. Our recommendation is that an app should include any fonts it needs (which don’t come with the OS). Access to third party font files should be done through online font foundries where the licensing requirements are specifically called out.

    Wednesday, September 21, 2011 7:09 PM
  • Hi, 

    I am trying to get this to work with VS 11 Developer Preview, and I am not having any Success.  I placed my font in a folder from the root of my app called:

    /Files/Fonts/Yautja.ttf 

    I marked the ttf file as Content, and Copy Always

    and I reference it like so: <TextBlock FontSize="90" FontFamily="/Fonts/Yautja.ttf#Yautja" Text="Hello"/>  

    if I have the font installed on the system, it works.  If not then it defaults back to the system default font (Helvetica or whatever it is).

    I can't see any errors in the output window, any idea what the problem could be, or where I can look to debug?

     

    Thanks

    Lance

     


    • Edited by LanceW Wednesday, September 21, 2011 8:24 PM
    Wednesday, September 21, 2011 8:20 PM
  • Lance, I think you need FontFamily="/Fonts/Yautja.ttf#Yautja"

    Chipalo

    Great to be able to protect the IP where needed.

    In my case I own the fonts or have license to distribute outside the app. What I don't want to do is make them freely downloadable off a web site. I'd probably not allow an installation on the local machine during the free trial.

    I really don't want to set up a separate web service just so my customer can download my fonts outside my app before they can read some specialist text in an internet browser, word processor etc. Defeats the objective of a one stop Windows store.

    I applaud efforts to avoid deliberate or accidental distribution of unlicensed fonts. No reason to stop licensed distribution. I hope you can revisit this topic and reconsider what makes sense for the Metro platform.

    Bob

    Wednesday, September 21, 2011 8:59 PM
  • Thanks, I got it working, but I had to include /Files/ in the path,  so it looks like this now:

    <TextBlock FontSize="90" FontFamily="/Files/ttf/Yautja.ttf#Yautja"/>

    Very strange that it works contrary to the way others seem to have it working.  Perhaps there is a difference between VS Express, and Ultimate?

     

    Lance

     

    Wednesday, September 21, 2011 9:09 PM
  • There shouldn't be any diff between Express and Ultimate (as those are tools anyway, not affecting the runtime behavior).  However I'd caution against using a folder called "Files" in your project.  If you review the BUILD session on world-readiness you'll see that there is a URI scheme for resources, one of which includes "Files" as a keyword.  My guess is in some areas you are getting tripped up here.
    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer
    Wednesday, September 21, 2011 9:58 PM
  • What about with Glyphs.  Can use a custom font and Glyphs in Silverlight.  Don't seem to be able to in Metro.
    Tuesday, December 6, 2011 12:18 AM
  • Thanks for this. I am still trying to make it work.

    So, what if we don't want to place our .xaml files in a Files/ folder? (because it breaks references to resource dictionaries etc). We have the same structure without the Files folder?

    EDIT: I verified that it works if we have our .xaml files in the root. But we still need the Files folder. In this case the only change is that we have to add the /Files part in the url (because it's relative to the .xaml file)

    EDIT 2:  I also noticed that we need to remove any words like "Light" or "Bold" from the end of the name of the font for it to work, even if they appear in the drop down list of the fonts and Blend adds them to the value of a property.


    Streamlined simplicity



    • Edited by tec-goblin Tuesday, April 24, 2012 7:48 AM
    Monday, April 23, 2012 8:56 PM
  • A follow up question: Is it possible to make this work for a custom font that user selects with file picker anywhere on local disk/skydrive/etc?
    Monday, August 20, 2012 1:09 PM
  • How to do the same thing in C#? I followed up here: http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.fontfamily  but couldn't guess how to do it.

    Update: Sorry, I forgot that I can refer those fonts in the same way as any resource. Like:

    Control.FontFamily = new FontFamily("/Files/Fonts/FontFile.ttf#FontTitle");

    This worked like a charm.

    Thanks.

    Regards,

    Mayur Tendulkar


    Mayur Tendulkar | http://blog.mayurtendulkar.com


    • Edited by Mayur Tendulkar Wednesday, September 26, 2012 9:57 AM Issue Solved Update
    • Proposed as answer by Jan Mikeska Sunday, February 10, 2013 3:40 PM
    Monday, September 24, 2012 5:17 PM
  • I can't seem to get a specific font to work:

    Eras Light ITC
    http://fontzone.net/font-details/Eras+Light+ITC/

    Any idea why? 

    Monday, September 24, 2012 5:31 PM
  • Try with or without "ITC" at the end. I had a lot of problems finding the correct font name. Try a few alternatives


    Goblin Dice Roller for your RPG games!

    Tuesday, September 25, 2012 7:58 AM
  • @MJFara the name you want to use after the "#" is "Eras ITC"

    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

    (if my post has answered your question, please consider using the 'mark as answer' feature in the forums to help others)

    • Proposed as answer by MJFara Wednesday, September 26, 2012 1:31 AM
    Tuesday, September 25, 2012 7:03 PM
  • Thank you Tim!

    How would I have known that otherwise?

    Edit:

    Ah, when I do this, I'm using the Eras ITC font, not the Light one.
    So this font is a little thicker then the one I'm trying to use, any idea why I can't use Eras Light ITC?

    • Edited by MJFara Wednesday, September 26, 2012 1:45 AM
    Wednesday, September 26, 2012 1:31 AM
  • If you want the light variant, I'd assume just set the FontWeight on whatever element is using the Font to "Light"

    Wednesday, September 26, 2012 1:29 PM
  • @MJFara - I used a little WPF code to read the "real" FontFamily name.

    As to the light, as John Westlake response indicate you would use FontWeight="Light" here.  However, pointing to the TTF specifically here, it should already be the light font if that is the only variant in the TTF file itself.


    Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

    (if my post has answered your question, please consider using the 'mark as answer' feature in the forums to help others)

    Wednesday, September 26, 2012 2:56 PM
  • Many thanks to the both of you!

    Wednesday, September 26, 2012 7:04 PM
  • Hi guys

    Sorry to hijack the tread here, but I've run into a problem using this. I want to save the text using a custom font. When I save to RTF, the name of the font appears in the RTF but when it is loaded again, the text is not formatted in that font.

    Any idea on how to load text from an RTF stream that makes use of a custom font?

    Saturday, October 6, 2012 7:44 PM
  • Nice that works thanks.

    A bit odd that the default behavior in visual studio produces an invalid state in the font display.

    Wednesday, January 30, 2013 12:29 PM