How do you use custom font families with Xamarin CSS?

Question

Xamarin CSS lets you specify a font-family using a syntax similar to CSS. I need to set a custom font. Usually that looks like this:

<Style x:Key="RockwellFontLabel" TargetType="Label">
    <Setter Property="FontFamily">
        <OnPlatform x:TypeArguments="x:String">
            <On Platform="Android" Value="RockwellStd.otf#RockwellStd.otf" />
            <On Platform="iOS" Value="RockwellStd" />
        </OnPlatform>
    </Setter>
</Style>

...

<Label Style="{StaticResource RockwellFontLabel}" Text="I AM TEXT"/>

Which, while verbose, does work. But Xamarin CSS promises so much more. I can do things like set the font family for a whole section with just one "CSS" rule, right? RIGHT?!

#myElement * {
    font-family: 'RockwellStd';
    color: hotpink;
}

But that only sets the color. It doesn't set my custom font family at all. Obviously on Android the font is located under /Assets/RockwellStd.otf with a Build Action set to AndroidAsset and /Resources/Fonts/RockwellStd.otf with a build action of BundleResource.

Is it possible to use a custom font with Xamarin CSS? If so, how?

If you are using .otf you need set to label text "\uyourIconCode" (for example: "\uf0c5") .Here is a similar issue forums.xamarin.com/discussion/138430/… — Lucas Zhang

Depechie Depechie · Accepted Answer · 2018-10-16T13:02:28

So the question here about CSS is very valid, it would be one of the big advantages of using Styling in Xamarin Forms > applying to all children in a set.

But the current ( as of writing ) state of CSS inside Xamarin Forms is still what limited. In that sense that targeting a possible StaticResource for custom font definition per plaform inside CSS styling is still not possible. Reference of said question to David Ortinau the Xamarin Forms PM at the time ( https://twitter.com/Depechie/status/1001944818543718400 ).

So for now we can only solve this with some xaml styling, I suggest you do keep your original StaticResource style definition for the custom font per platform. But instead of applying it inside the general App.xaml, try only setting it inside the ResourceDictionary property of the View or UI element where you want it only to occur.

If you try to use Implicit Styling inside that ResourceDictionary, you won't need to add the Style="{StaticResource RockwellFontLabel}" tag to each Label element.

How do you use custom font families with Xamarin CSS?

1 Answers