Reputation: 332
I am working with custom fonts right now and currently a font named: "Yellowtail-Regular.tff". I created a map called Fonts
in my iOS folder and I added the tff file in there. After that I went to my Info.plist and created a Fonts provided by application
and in there I created a new string called Fonts/Yellowtail-Regular.ttf
.
When I now try to use it like this:
<Label FontFamily = "Yellowtail" Text = "Testing my label" />
The standard font (Helvetica Neue) still remains. I also tried with:
<Label FontFamily = "Yellowtail-Regular" Text = "Testing my label" />
But with the same outcome.
Am I missing a step or am I doing something wrong?
Upvotes: 3
Views: 3862
Reputation: 74209
If you are using Yellowtail-Regular.ttf
from http://www.1001freefonts.com/yellowtail.font, then that font name under iOS
would be just Yellowtail
.
Each platform has different naming conventions, so using Device.OnPlatform
might look something like:
public Label()
{
FontFamily = Device.OnPlatform("Yellowtail", "Yellowtail-Regular", "/Assets/Yellowtail-Regular.ttf#Yellowtail-Regular");
}
To confirm your iOS font family name, on macOS
open your .ttf
using Font Book
and the name that macOS
/iOS
will use is the one in the title bar of the app.
Upvotes: 7
Reputation: 101
Some times font book will display the name with spaces.
In my case:
Font name is : SFProDisplay-Ultralight
. But the font book shown the
name as "SF Pro Display Ultralight". Due to this custom font is not working in iOS.
So you can use the below code to find the correct font name and apply it in the iOS. Add this code in the AppDelegate launch method. Then you can find the list of viable font names in the Application output.
foreach (var family in UIFont.FamilyNames)
{
System.Diagnostics.Debug.WriteLine($"{family}");
foreach (var names in UIFont.FontNamesForFamilyName(family))
{
System.Diagnostics.Debug.WriteLine($"{names}");
}
}
After that you can use xaml to refer the font.
<OnPlatform x:Key="SFProDisplayUltraLight" x:TypeArguments="x:String">
<On Platform="iOS" Value="SFProDisplay-Ultralight" />
<On Platform="Android" Value="SF-Pro-Display-Ultralight.otf#SF Pro Display Ultralight" />
</OnPlatform>
Then Apply it for the control.
<Lable Text="Welcome" FontFamily="{StaticResource SFProDisplayUltraLight}"/>
Upvotes: 7