How to set the system font to Bold or Italic?

How-to Discussions
1

I thought that setting a <Text> to bold would have been simple as adding:

 Weight="Bold" Style="Italic"

but, as it did not worked, after looking to the Docs and to the examples I understood it isn’t.

As I prefer to use the system fonts (Android and iOS), I found that there’s the <Systemfont> class that may be used. Taking the following code from the Docs I thought that I could change the Weight to Bold, but again this appears not to be the correct way:

<Android>
    <SystemFont Family="monospace" Style="Normal" Weight="Bold" ux:Key="Monospace" />
</Android>
<iOS>
    <SystemFont Family="Courier" Style="Normal" Weight="Bold" ux:Key="Monospace" />
</iOS>
<Text Font="{Resource Monospace}">Hello, world!</Text>

How do I set Bold and/or Italic for a Text?

2

Seems to me that you’re doing the right thing, only that italic and bold are not available for the monospace font. (At least on Android, where I tested).

If you switch from monospace to sans-serif then it seems to work as expected.

3

Hi!

A new way of setting bold/italic for system fonts has been implemented and rolling out soon; it will basically be <Text Font="Bold", <Text Font="ThinItalic" etc

Beyond the system font, things get a bit tricky in a cross-platform perspective. There is no guarantee that any other fonts are available cross platform, so you have to provide your own .ttf of the fonts (and weights/styles) you want to use.

4

Ok, understood. For those who have the same doubts I downloaded a TrueType Font, save it into /Assets and added <Font> under <App> :

<App>
    <Font File="Assets/roboto-regular.ttf" ux:Global="RegularFont" />    
    <Font File="Assets/roboto-bold.ttf" ux:Global="BoldFont" />

and then switch to the font as explained:

<Text Font="BoldFont" />