Search code examples
c#xamlfontsuno-platform

Custom Font working in Uno.WASM, but not working in Uno.UWP


Since i have not seen something helpful after searching for a while, i decided to ask here:

I have a small testing Project, just to import a custom Icon Font from the interwebs. Current Proedure is the following: my MainApp.xaml consists of a single Textblock, which is referencing a Style-element in Styles.xaml, which in turn references a FontFamily where i load the ttf file per platform.

In WASM it works great (base64 URI), but in UWP i just cant get the font-icon to display at all. The Style.xaml gets imported perfectly by the App.xaml, the Size gets applied, but it seems there is something wrong with the FontFamily-Tags.

I tried:

  1. Installing my font by hand => Worked like a charm. So its probably not the font file?
  2. https://platform.uno/docs/articles/features/custom-fonts.html , but it didn't help.
  3. https://blog.mzikmund.com/2020/01/custom-fonts-in-uno-platform/ which in turn, didn't change much.
  4. https://github.com/MartinZikmund/blog-2020/tree/master/Uno.CustomFonts even after cross-referencing here, i couldn't get it to work.
  5. https://github.com/unoplatform/calculator/blob/uno/src/Calculator.Shared/Styles.xaml i also cross-checked with the official calculator-port, but even after setting things up like they did, nothing changed.
  6. Reinstall VS (i use the Community Version). Here's my Code:

MainApp.xaml:

<Page
    x:Class="Testing.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Testing"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="L"  Style="{ThemeResource IconTextStyle}" />
    </Grid>
</Page>

Styles.xaml:

<ResourceDictionary
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
            xmlns:xamarin="http://uno.ui/xamarin"
            xmlns:macos="http://uno.ui/macos"
            xmlns:wasm="http://uno.ui/wasm"
            xmlns:skia="http://uno.ui/skia"
            xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            mc:Ignorable="xamarin wasm macos skia"
    >


    <win:FontFamily x:Key="IconScratchedFontFamily">ms-appx:///Assets/PWSmallIcons.ttf#Small-Icons-Scratched</win:FontFamily>
    <macos:FontFamily x:Key="IconScratchedFontFamily">ms-appx:///Assets/PWSmallIcons.ttf#Small-Icons-Scratched</macos:FontFamily>
    <wasm:FontFamily x:Key="IconScratchedFontFamily">Small-Icons-Scratched</wasm:FontFamily>
    <skia:FontFamily x:Key="IconScratchedFontFamily">ms-appx:///Assets/PWSmallIcons.ttf#Small-Icons-Scratched</skia:FontFamily>

    <win:FontFamily x:Key="IconClearFontFamily">ms-appx:///Assets/PWSmallIconsFree.ttf#Small-Icons-Free</win:FontFamily>
    <macos:FontFamily x:Key="IconClearFontFamily">ms-appx:///Assets/PWSmallIconsFree.ttf#Small-Icons-Free</macos:FontFamily>
    <wasm:FontFamily x:Key="IconClearFontFamily">Small-Icons-Free</wasm:FontFamily>
    <skia:FontFamily x:Key="IconClearFontFamily">ms-appx:///Assets/PWSmallIconsFree.ttf#Small-Icons-Free</skia:FontFamily>

    <Style TargetType="TextBlock" x:Key="IconTextStyle">
        <Setter Property="FontFamily"
            Value="{StaticResource IconScratchedFontFamily}" />
        <Setter Property="FontWeight"
            Value="Normal" />
        <Setter Property="FontSize"
            Value="116" />
    </Style>
</ResourceDictionary>

App.xaml:

<Application
    x:Class="Testing.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Testing">

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ms-appx:///Styles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

</Application>

Solution

  • Found the solution:

        <win:FontFamily x:Key="IconScratchedFontFamily">ms-appx:///Assets/PWSmallIcons.ttf#PWSmallIcons</win:FontFamily>
        <macos:FontFamily x:Key="IconScratchedFontFamily">ms-appx:///Assets/PWSmallIcons.ttf#PWSmallIcons</macos:FontFamily>
    
    

    Background: The part after the # indicates the name of the font, as it is written in the .ttf File, not name of the Font as I want to reference it, which is pretty obvious if you think about it.

    It was nearly impossible to figure out with my provided code, so I decided to update my question for anyone else running into this problem.