{"id":46895,"date":"2020-04-03T10:31:22","date_gmt":"2020-04-03T17:31:22","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/xamarin\/?p=46895"},"modified":"2020-04-23T01:23:12","modified_gmt":"2020-04-23T08:23:12","slug":"embedded-fonts-xamarin-forms","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/embedded-fonts-xamarin-forms\/","title":{"rendered":"Embedded Fonts: Custom Fonts in Xamarin.Forms"},"content":{"rendered":"

There are a number of posts<\/a> about using custom fonts<\/a> 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.<\/p>\n

Life Before Embedded Fonts<\/h2>\n

As mentioned, there are a couple of posts on using custom fonts already. The most recent one can be found here<\/a>. 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.<\/p>\n

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.<\/p>\n

How To Use Embedded Fonts<\/h2>\n

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.<\/p>\n

1. Add the font file (otf or ttf) to your shared project and mark it as embedded resource<\/h3>\n

Simply add the font file Samantha.ttf<\/code> to any folder in your project and set the Build Action to EmbeddedResource<\/code>. In this case, find it here<\/a>.<\/p>\n

\"Screenshot<\/center> <\/p>\n

2. Add ExportFont attribute in your shared project<\/h3>\n

The most obvious place would be inside your App.xaml.cs<\/code> or AssemblyInfo.cs<\/code>. 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.<\/p>\n

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

3. Consume the new font in your controls<\/h3>\n

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!<\/p>\n

Note that adding an entry in your info.plist<\/code> was not added for iOS. That is also not needed anymore.<\/p>\n

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

[assembly: ExportFont(\"Samantha.ttf\", Alias = \"MyAwesomeCustomFont\")]<\/code><\/pre>\n
Now reference this font by using MyAwesomeCustomFont<\/code>.<\/p>\n
Here is an example of using it with a Label<\/code>. Where it says MyAwesomeCustomFont<\/code>, it could also have said Samantha<\/code> when you want to simply use the filename.<\/p>\n
<Label Text=\"Welcome to Xamarin.Forms!\" \r\n    FontFamily=\"MyAwesomeCustomFont\" FontSize=\"50\" \r\n    HorizontalOptions=\"Center\" VerticalOptions=\"CenterAndExpand\" \/><\/code><\/pre>\n
\"Screenshot<\/center> <\/p>\n
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.<\/p>\n
All the information on using custom fonts in Xamarin.Forms can also be found in the docs<\/a>.<\/p>\n
Recap of Embedding Fonts<\/h2>\n
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.<\/p>\n
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.<\/p>\n
Want to learn more about what is new in the latest Xamarin.Forms release? Check out the release notes<\/a>.<\/p>\n
Besides fonts there is more you can do to create stunning apps. Check out this earlier post<\/a> about Snppts for pre-made designs. Maybe you want a set of controls ready to go, like Grial Kit<\/a>. Now is the time to create beautiful apps with Forms.<\/p>\n
Take a look at the code used in this post in this GitHub Repo: https:\/\/github.com\/jfversluis\/EmbeddedFontsSample<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Embedded fonts means no more platform-specific handling of fonts or adding font files in three different projects. In this post we will see how to use this in Xamarin.Forms 4.5.530 and up.<\/p>\n","protected":false},"author":13350,"featured_media":46911,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[367],"tags":[8402,8403,8102],"class_list":["post-46895","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-xamarin-forms","tag-embedded-fonts","tag-fonts","tag-xamarin-forms-4-5"],"acf":[],"blog_post_summary":"
Embedded fonts means no more platform-specific handling of fonts or adding font files in three different projects. In this post we will see how to use this in Xamarin.Forms 4.5.530 and up.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/46895","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/13350"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=46895"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/46895\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/46911"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=46895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=46895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=46895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}