{"id":8034,"date":"2020-03-21T19:25:08","date_gmt":"2020-03-21T19:25:08","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=8034"},"modified":"2020-03-21T19:32:24","modified_gmt":"2020-03-21T19:32:24","slug":"custom-fonts-in-xamarin-forms","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/custom-fonts-in-xamarin-forms\/","title":{"rendered":"Custom Fonts in Xamarin Forms"},"content":{"rendered":"<p>First off, this post <a href=\"https:\/\/docs.microsoft.com\/en-us\/xamarin\/xamarin-forms\/user-interface\/text\/fonts\" rel=\"noopener noreferrer\" target=\"_blank\">Fonts in Xamarin.Forms<\/a> is a far more complete description of all things font related in Xamarin Forms than this post will be, so go check it out.<\/p>\n<p>In this post I&#8217;m just going to discuss how we can add and use &#8220;custom&#8221; fonts, i.e. fonts not on a device by default. <\/p>\n<p><strong>Custom Fonts<\/strong><\/p>\n<p>In this instance a custom font simply means a font that&#8217;s not, by default, loaded onto a device. <\/p>\n<p>We can find lots of free fonts etc. via <a href=\"https:\/\/fonts.google.com\/\" rel=\"noopener noreferrer\" target=\"_blank\">Google Fonts<\/a>.<\/p>\n<p>As per the previously mentioned Microsoft\/Xamarin post, we&#8217;ll demonstrate things using the Lobster-Regular.ttf font. <\/p>\n<p>Within Google Font simply search for Lobster and then download the Lobster.zip to your machine. If you then unzip this file you&#8217;ll have two files, the .ttf and a license file.<\/p>\n<p>To look at the font and\/or to get the <em>Font name<\/em>, in Windows we can right mouse click the .ttf file and select Preview. Hence we see the following<\/p>\n<ul>\n<li>Font name: Lobster<\/li>\n<li>Version: Version 2.100<\/li>\n<li>OpenType Layout, TrueType Outlines<\/li>\n<\/ul>\n<p>We also see a sample of the font for the alphabet, but more interestingly a sample for different font sizes, 12, 18, 24, 36 etc.<\/p>\n<p><strong>Preview Feature<\/strong><\/p>\n<p>Within the previously mentioned post they talk about adding your custom font to the shared project of your Xamarin Forms application. This was a preview feature and at the time of writing this post, I was unable to see this work. Hence this post will be out of data as soon as this is implemented. However for completeness I&#8217;ll relay what the post says on this.<\/p>\n<p>To add a custom font to your shared project&#8230; <\/p>\n<ul>\n<li>Create a Resources\/Fonts folder (this folder configuration isn&#8217;t a requirement)<\/li>\n<li>Add your .ttf or otf font files to this new folder and mark their properties as Embedded Resource<\/li>\n<li>In the AssemblyInfo.cs file (for example) ad the ExportFont attribute, for example\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\nusing Xamarin.Forms;\r\n\r\n&#x5B;assembly: ExportFont(&quot;Lobster-Regular.ttf&quot;)]\r\n<\/pre>\n<\/li>\n<p>Using the font is then as simple as writing the following<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\n&lt;Label Text=&quot;Hello Xamarin.Forms&quot;\r\n   FontFamily=&quot;Lobster-Regular&quot; \/&gt;\r\n<\/pre>\n<p><strong>Existing\/non-preview usage<\/strong><\/p>\n<p>So, as mentioned, I was unable to get the preview working at this time, so let&#8217;s look at the &#8220;current&#8221; way to implement custom fonts. Let&#8217;s therefore assume we did not do any of the <em>Preview<\/em> steps.<\/p>\n<p><strong><em>For Android&#8230;<\/em><\/strong><\/p>\n<p>Copy your .ttf or .otf files into your Android project&#8217;s Assets folder and mark them as AndroidAsset via the file&#8217;s properties option in Visual Studio. <\/p>\n<p>Now it the shared project we need to reference the font slightly differently<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\n&lt;Label Text=&quot;Hello Xamarin.Forms&quot;\r\n   FontFamily=&quot;Lobster-Regular.ttf#Lobster Regular&quot; \/&gt;\r\n<\/pre>\n<p><strong><em>For iOS&#8230;<\/em><\/strong><\/p>\n<p>Copy your .ttf or .otf files into your iOS project&#8217;s Resources folder and mark them as BundleResource via the file&#8217;s properties option in Visual Studio.<\/p>\n<p>There&#8217;s and addition step, where we need to add the font(s) to the info.plist, i.e.<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\n&lt;key&gt;UIAppFonts&lt;\/key&gt;\r\n&lt;array&gt;\r\n    &lt;string&gt;Lobster-Regular.ttf&lt;\/string&gt;\r\n&lt;\/array&gt;\r\n<\/pre>\n<p>The big difference to the Android example is that the code only has the typeface name, for example<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\n&lt;Label Text=&quot;Hello Xamarin.Forms&quot;\r\n   FontFamily=&quot;Lobster-Regular&quot; \/&gt;\r\n<\/pre>\n<p><strong><em>For UWP&#8230;<\/em><\/strong><\/p>\n<p>Copy your .ttf or .otf files into your UWP project&#8217;s Assets folder and mark them as Content via the file&#8217;s properties option in Visual Studio.<\/p>\n<p>As per the Android example, the code would look like this within the shared project<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\n&lt;Label Text=&quot;Hello Xamarin.Forms&quot;\r\n   FontFamily=&quot;Lobster-Regular.ttf#Lobster Regular&quot; \/&gt;\r\n<\/pre>\n<p><strong>Different fonts for different OS&#8217;s<\/strong><\/p>\n<p>As you&#8217;ve seen in the examples for setting the FontFamily attribute, Android and iOS differ in what they expect, so we&#8217;re going to need a better way to supply this value. Or it may be we actually want different font&#8217;s on different devices. <\/p>\n<p>We can create a style and use <em>OnPlatform<\/em> capabilities of Xamarin Forms to achieve this.<\/p>\n<p>i.e. in this example we&#8217;ll set the fonts <\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\n&lt;ResourceDictionary&gt;\r\n  &lt;OnPlatform x:TypeArguments=&quot;x:String&quot; x:Key=&quot;LabelFont&quot;&gt;\r\n    &lt;On Platform=&quot;Android&quot; Value=&quot;Lobster-Regular.ttf#Lobster Regular&quot; \/&gt;\r\n    &lt;On Platform=&quot;UWP&quot; Value=&quot;\/Assets\/Lobster-Regular.ttf#Lobster Regular&quot; \/&gt;\r\n    &lt;On Platform=&quot;iOS&quot; Value=&quot;Lobster-Regular&quot; \/&gt;\r\n  &lt;\/OnPlatform&gt;\r\n&lt;\/ResourceDictionary&gt;\r\n<\/pre>\n<p>and then we can change our Label sample code to the following<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\n&lt;Label Text=&quot;Hello Xamarin.Forms&quot;\r\n   FontFamily=&quot;{StaticResource LabelFont}&quot; \/&gt;\r\n<\/pre>\n<p><strong>Sample Project<\/strong><\/p>\n<p>See <a href=\"https:\/\/github.com\/putridparrot\/blog-projects\/FontTestApp\" rel=\"noopener noreferrer\" target=\"_blank\">https:\/\/github.com\/putridparrot\/blog-projects\/FontTestApp<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>First off, this post Fonts in Xamarin.Forms is a far more complete description of all things font related in Xamarin Forms than this post will be, so go check it out. In this post I&#8217;m just going to discuss how we can add and use &#8220;custom&#8221; fonts, i.e. fonts not on a device by default. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[289,122],"tags":[],"class_list":["post-8034","post","type-post","status-publish","format-standard","hentry","category-fonts","category-xamarin-forms"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8034","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=8034"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8034\/revisions"}],"predecessor-version":[{"id":8039,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8034\/revisions\/8039"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=8034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=8034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=8034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}