Embedded Fonts: Custom Fonts in Xamarin.Forms

Gerald Versluis

There are a number of posts about using custom fonts in Xamarin.Forms. However, embedded fonts definitely takes the cake. No more platform-specific handling of fonts and adding font files in three different projects. Just one file and an attribute in your shared code and your font is ready to go. In this post we will see how to use it in Xamarin.Forms 4.5.530 and up.

Life Before Embedded Fonts

As mentioned, there are a couple of posts on using custom fonts already. The most recent one can be found here. In that post, you will see, that depending on the platform, you would need to go through some hoops. Such as adding an entry to the metadata or adding the font file to each target platform project. As well as setting the right build action, finding out the correct font name, and then cross your fingers everything was right the first time.

Written down like this, it doesn’t seem like a lot of work and granted. You only have to do it once (per font), but it can still be a hassle. Especially the part about finding the correct font-family name (or postscript name), involves some trail-and-error. If you have worked with custom fonts before, you already know these embedded fonts will be a big improvement.

How To Use Embedded Fonts

As of Xamarin.Forms 4.5, we will make your life a bit easier yet again. In just three simple steps, we will add a font to use across iOS, Android and UWP.

1. Add the font file (otf or ttf) to your shared project and mark it as embedded resource

Simply add the font file Samantha.ttf to any folder in your project and set the Build Action to EmbeddedResource. In this case, find it here.

Screenshot of Visual Studio for Mac showing how to set the font file build action to EmbeddedResource
 

2. Add ExportFont attribute in your shared project

The most obvious place would be inside your App.xaml.cs or AssemblyInfo.cs. However, since the attribute will register this on assembly level, you can put this anywhere. The placement of the attribute depends on how visible you want to make it to other/future developers.

Anywhere outside a namespace will work. Just add this, you don’t need to include the subfolders: [assembly: ExportFont("Samantha.ttf")]

3. Consume the new font in your controls

That’s it! You are now ready to consume the font in your app. Through code or XAML, and directly on a control or through a style. Notice that you don’t need to find out the postscript font name anymore. Just use the fonts filename. Which will just work on all platforms!

Note that adding an entry in your info.plist was not added for iOS. That is also not needed anymore.

To use a more custom name, alternatively, use the Alias property. There you can specify a name to reference this font by. For example:

[assembly: ExportFont("Samantha.ttf", Alias = "MyAwesomeCustomFont")]

Now reference this font by using MyAwesomeCustomFont.

Here is an example of using it with a Label. Where it says MyAwesomeCustomFont, it could also have said Samantha when you want to simply use the filename.

<Label Text="Welcome to Xamarin.Forms!" 
    FontFamily="MyAwesomeCustomFont" FontSize="50" 
    HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />

Screenshot of the iOS Simulator showing an example of custom font usage with embedded fonts on iOS
 

Under the hood, the font is loaded and cached whenever you start the app. Because of that, be mindful of how many custom fonts you are adding. Although, this is no different than how it works on the native platforms today.

All the information on using custom fonts in Xamarin.Forms can also be found in the docs.

Recap of Embedding Fonts

In closing, the “old” way still works fine. Your code can remain exactly the same and nothing will change. In fact; if you have custom fonts in place right now, just leave it like that unless you have a good reason to change it. If you are starting a new project or want to tweak maintainability, embedded fonts is for you.

We hope this functionality will make the experience when working with fonts much simpler. Needless to say, this also works with icon fonts like Font Awesome, seen in the sample project below.

Want to learn more about what is new in the latest Xamarin.Forms release? Check out the release notes.

Besides fonts there is more you can do to create stunning apps. Check out this earlier post about Snppts for pre-made designs. Maybe you want a set of controls ready to go, like Grial Kit. Now is the time to create beautiful apps with Forms.

Take a look at the code used in this post in this GitHub Repo: https://github.com/jfversluis/EmbeddedFontsSample

19 comments

Discussion is closed. Login to edit/delete existing comments.

  • René Simonsen 0

    Is it still really hard to change font in places like NavigationPage title?

    • Gerald VersluisMicrosoft employee 0

      Of course I don’t know what you are comparing to 🙂 There might’ve been some work done to make it easier. However this functionality only targets adding the actual fonts.

      • Fit Boy 0

        Rather of using any device default, custom fonts involves use a 3rd party font file (* .ttf) on your ios app. Because designers tend to have more effect on app design, custom fonts are increasingly important, especially because they want the app to look like it on multiple platforms.

    • Andreas Lichtsinn 0

      you can use Shell.TitleView and do all your styling

  • Eric Ouellet 0

    Hi Gerald,

    Thanks for keeping us inform of new easier way to use custom resource in our Xamarin project.
    1 – I think you have a mismatch into the version required. Could it be possible you forget a 0? 4.5.530 => 4.5.0.530?
    2 – When I define [assembly: ExportFont(“DSEG7ModernRegular.ttf”, Alias =”Test2″)] into AssemblyInfo.cs and run the code, I get an exception:

    class MainActivity:

    OnCreate(Bundle savedInstanceState)
    {
    TabLayoutResource = Resource.Layout.Tabbar;
    ToolbarResource = Resource.Layout.Toolbar;

    base.OnCreate(savedInstanceState);

    Xamarin.Essentials.Platform.Init(this, savedInstanceState);
    global::Xamarin.Forms.Forms.Init(this, savedInstanceState); // Here: SystemLoadException: ‘Could not resolve type with broken 010000a6 from typeref (expected class ‘Xamarin.Forms.ExportFontAttribute’ in assembly ‘Xamarin.Forms.Core, Version=2.0.0.0, Culture=neutral, PublicKeyToken=null’)’
    LoadApplication(new App());

    Any idea?

    • Eric Ouellet 0

      I found my bug, I updated nuget packages only on my main project, not on Android, IOS and UWP. After updating everywhere, everything was fine. Thanks a lot!!!

      • Gerald VersluisMicrosoft employee 0

        Glad you figured it out Eric!

  • Krisztián Jankó 0

    Hi,

    Thank you for the post, it’s really awesome. How the FontAttributes would work if they’re different files?

    • Gerald VersluisMicrosoft employee 0

      Thank you! I’m afraid I don’t quite understand your question. You can have multiple ExportFont attributes for multiple files.

  • Sudherson Vetrichelvan 0

    Thank you Gerald for this post. My XamarinForms version is 4.5.0.617, Android works as expected, but iOS doesn’t. Any thoughts?

    • Gerald VersluisMicrosoft employee 0

      It is my pleasure Sudherson!

      We have merged some new fixes for this in 4.6 that should make it work for iOS better as well. 4.6 stable should arrive very soon, if you would be able to try that and let us know how that goes? If you would want to try it now, 4.6-pre4 already has those fixes so you can try it today 🙂

  • Thomas Haukland 0

    Great stuff!
    Minor detail: you are adding an alias for your font, but when you are using it you are NOT using the alias(but still fontfamily=samantha), I assume thats a typo?

    • Gerald VersluisMicrosoft employee 0

      I was just trying to show you could do both, but I can see how that was a bit unclear. Updated the post a bit to make that better.

      Thanks!

  • John Dinnen 0

    Great article, helped me a lot… One question or observation… I use a Material Design Icons font to show icons on Images, ImageButtons and Buttons. On iOS and Android this works great but on UWP the FontImageSource doesn’t seem to render. Is that a known issue?

    • John Dinnen 0

      FYI, I downloaded your demo and tried it on UWP and i still don’t see the Font icon on UWP

    • Bryan Taylor 0

      Same issue I’m having, I thought it was something I was doing wrong. Glad I found this post.

  • Tom Abrams 0

    Hey Gerald,
    thanks for post. It’s now easier than it was before (all stuff with assets, resources and plists). Anyway, what’s the name of the font on your screenshot? 🙂

    Thank you,

    Tom

Feedback usabilla icon