{"id":5231,"date":"2013-05-07T13:16:57","date_gmt":"2013-05-07T17:16:57","guid":{"rendered":"http:\/\/blog.xamarin.com\/?p=5231"},"modified":"2013-05-07T13:16:57","modified_gmt":"2013-05-07T17:16:57","slug":"custom-fonts-in-ios","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/custom-fonts-in-ios\/","title":{"rendered":"Using custom Fonts in Xamarin.iOS"},"content":{"rendered":"

\t\t\t\tApple introduced a great feature when it released the iOS 3.2 SDK way back in 2009: support for adding custom fonts to apps. Since then, developers have made their apps stand out by using different fonts.<\/p>\n

Although adding fonts should be a very simple process, developers often express confusion over how to do it for Xamarin.iOS apps. The process has a few “gotcha’s” that might catch you off guard if you skipped your morning coffee or you are trying to get a release out late at night.<\/p>\n

\"CustomIOSFonts\"<\/p>\n

In this blog post, I describe how to add a custom font to a label. This should give you an understanding of the process and help you if you’re stuck.<\/p>\n

First, find yourself a font with a suitable license. I use dafont.com<\/a>, a great resource for finding awesome-looking fonts. You can quickly find free fonts that you can use in your application at no cost; however, if you find a premium font you like, you may be able to license it. In this example, I am going to use a free font titled HollywoodHills.ttf. You can download a copy yourself if you wish to follow along.<\/p>\n

\"FontSample\"<\/a><\/p>\n

When searching\u00a0for suitable fonts, it’s worth remembering that iOS only supports TTF and OTF. This shouldn’t be a problem as most fonts available online come in these two formats.<\/p>\n

Add the font<\/h3>\n

You should add the font to your project by either dragging and dropping it to a folder or right clicking and selecting ‘Add existing file.’ In this example, I have added the font to the Resources folder. You can, of course, add the font to any folder\u2014including the root directory if you so choose.<\/p>\n

Once you’ve added the font, you should then right click it and select the ‘Properties’ menu option. You will need to change the build property \u2018Copy to output directory\u2019 to \u2018Always copy.’ If you forget to do this, you will get a null exception error when trying to reference the font at runtime. This will cause your App to crash.<\/p>\n

\"fontProperties\"
Highlighted property for clarity<\/figcaption><\/figure><\/p>\n

Info.plist<\/h3>\n

The next step is to tell iOS where your custom font is stored. iOS will load these fonts at startup, so it pays to use custom fonts sparingly\u2014it can slow the startup time of your App.<\/p>\n

To tell iOS you are using custom fonts, you should open the Info.plist file and select \u2018Source\u2019 at the bottom of the view. This will change the UI to be more inline with Xcode’s property editor.<\/p>\n

Once you’ve done this, you should then double click on \u2018Add new entry\u2019 and select the \u2018Fonts provided by application\u2019 option. It is here that you input the location of the font so that iOS knows where to look when loading the fonts at startup. Because I have put the font in Resources, I can simply type ‘HollywoodHills.ttf’ as the value. If I had put the font in Resources\/Fonts, then I would set the value to ‘Fonts\/HollywoodHills.ttf’.<\/p>\n

Using the custom font<\/h3>\n

Now comes the interesting part: using the font. Let’s create two labels, one with our custom font and the other with the default. I’ve included code below that will make and place these labels for you. You can copy and paste the following code into your application’s ViewDidLoad method. Try running the app to see how it looks. If you configured your project as I described above, it should work with no issues.<\/p>\n

\n\/\/Get size of screen\nvar height = UIScreen.MainScreen.Bounds.Height;\nvar width = UIScreen.MainScreen.Bounds.Width;\n\n\/\/Labels\nvar lab1 = new UILabel(new RectangleF(0,0, width, height \/2));\nlab1.Text = "This is some sample text";\nlab1.Font = UIFont.FromName("HollywoodHills", 20f);\nthis.Add(lab1);\n\nvar lab2 = new UILabel(new RectangleF(0,height \/2, width, height \/2));\nlab2.Text = "This is some more sample text";\nthis.Add(lab2);\n<\/pre>\n
When you run your App, you will now see that the top label uses the custom font you downloaded from Dafont. It’s as easy as that. If you are having problems, you should double-check that you have selected the \u2018Always copy\u2019 build property for the font and that the path is correct in the Info.plist.<\/p>\n
I hope you enjoy using custom fonts in Apps as much as I have.\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"
Apple introduced a great feature when it released the iOS 3.2 SDK way back in 2009: support for adding custom fonts to apps. Since then, developers have made their apps stand out by using different fonts. Although adding fonts should be a very simple process, developers often express confusion over how to do it for […]<\/p>\n","protected":false},"author":1929,"featured_media":39167,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[6,4],"class_list":["post-5231","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-ios","tag-xamarin-platform"],"acf":[],"blog_post_summary":"
Apple introduced a great feature when it released the iOS 3.2 SDK way back in 2009: support for adding custom fonts to apps. Since then, developers have made their apps stand out by using different fonts. Although adding fonts should be a very simple process, developers often express confusion over how to do it for […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/5231","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\/1929"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=5231"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/5231\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/39167"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=5231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=5231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=5231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}