Pixelspring Design, Brighton UK


Custom Fonts In NimbleKit Projects

Introduced in iOS 3.2, we now have the ability to include custom fonts (ttf & otf) in a NimbleKit project. It’s easy to do & only takes a few steps.

Add The Font File

In this example, I’m using Nevis as the font. In your “Groups & Files” pane in Xcode, drag ‘nevis.ttf’ into your ‘Resources’ folder, ticking the “Copy items into destination group’s folder (if needed)”, if your font file isn’t already in the folder.

Add Entry to info.plist

Now in your info.plist file, add a new key. Click on the last item and then click the + sign that appears on the r/h side. In your new key, you can select “Font provided by application” or type “UIAppFonts” (which should resolve to ‘Font provided by application’), then in the value box for ‘Item 0′ enter your fonts full name & extension – in this case, “nevis.ttf”.

Style your text with CSS

For the purposes of this demo, I’m using an inline style but feel free to define it how you like:

body {
   font: normal 60px/150% nevis;
   color: #fff;
   text-shadow: 0px -1px 0px #000;
   background-image: url(nk_background.png);
}

That’s pretty much it – any questions, feel free to leave a comment.

One comment on ‘Custom Fonts In NimbleKit Projects’

Stephen — 22 July 2011 16:46
Hmmm doesn't seem to work for me. My css is:- h1 { font: kristen; font-size: 100%; color: white; padding: 10px; background-color: #c1c1c1; } and I've also tried h1 { font: "kristen"; font-size: 100%; color: white; padding: 10px; background-color: #c1c1c1; } and h1 { font-family: "kristen"; font-size: 100%; color: white; padding: 10px; background-color: #c1c1c1; } any ideas?