Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Custom Fonts?

Hi,

Is there a way to embed a custom font in iPhone/iPad apps?

thanks,
B.

— asked April 5th 2010 by Brendan Gallagher
  • custom
  • fonts
  • ipad
  • iphone
0 Comments

7 Answers

  • You can embed fonts as of iPhone SDK 3.2. Here's how you do it:

    In you Titanium app directory, navigate to /build/iphone and open Info.plist.template (it is important that you use the template file since info.plist will be overwritten when you compile).

    In Info.plist.template list the fonts you want to embed as follows:

        <key>UIAppFonts</key>
                <array>
                <string>TradeGothicLTStd.otf</string>
                <string>TradeGothicLTStd-Bold.otf</string>
            <string>TradeGothicLTStd-Light.otf</string>
            <string>TradeGothicLTStd-BoldObl.otf</string>
                </array>
    

    Copy the fonts to YourAppDirectory/Resources/ (note this is the resources folder containing your app.js file, not the Resources folder in the build directory.

    To use the fonts in your application refer to them without the extention (for example 'TradeGothicLTStd-Bold').

    You can use them in a web view as well in css, just like you would for a system font. Here's an example:

        .front > p.step {
            font-family: "TradeGothicLTStd-Bold";
            font-size: 40px;
            color: #BE1E2D;
        }
    

    @font-face doesn't work with Titanium, however you can still use it if you are using the same code for a web app (outside of Titanium - for example if you want to test and debug with Safari). In that case in the @font-face declaration use the same font-family name as the variation of the font you are using… for example:

    @font-face {
        font-family: 'TradeGothicLTStd-Bold';
        src: url('fonts/TradeGothicLTStd-Bold.otf');
    }
    

    That way I can view the app in safari and also wrap it in Titanium and have the same results.

    Now if someone would only add drop shadows and gradients (actually a graphics api would be really nice) to Titanium then we'd be able to design some really beautiful apps with it (without having to wrap everything with custom graphics in a web view).

    — answered May 8th 2010 by Jeff Hoefs
    permalink
    1 Comment
    • I can't get this to work. I've checked and re-checked that I'm doing everything correctly. There's another post in the forum where it appears no one can get it to work either.

      Anyone have any luck?

      — commented July 14th 2010 by Clifton Labrum
  • For anyone interested, Nolan mentioned that this may be a possibility in the future, but not at present.

    B.

    — answered April 6th 2010 by Brendan Gallagher
    permalink
    0 Comments
  • In a WebView you can embed an SVG-font - a bit far-fetched, but it's the only way right now.

    — answered April 6th 2010 by Jacob Waller
    permalink
    0 Comments
  • I've updated the post here on how to do this with 1.3+

    http://developer.appcelerator.com/blog/2010/04/adding-custom-fonts-to-ipad.html

    — answered July 21st 2010 by Jeff Haynie
    permalink
    1 Comment
    • Hi Jeff.

      Followed the instructions on the post but no luck at all getting a ttf font to show up.

      I took the plist file from the build directory placed it in the resources directory added

       <key>UIAppFonts</key>
              <array>
                  <string>my_font.ttf</string>
              </array>
      

      I made sure when creating the lable that the font familiy is what is show as the name of the font in fontbook. but still no luck.

      Is there a ticket open for this at the moment or you think I might be missing a step.
      Titanium 1.3.x , iOS4.0

      — commented July 25th 2010 by Juan Bermudez
  • Try this method if everything else fails.

    — answered July 29th 2010 by Caio Iglesias
    permalink
    0 Comments
  • make sure your font file has estension in lower case (.otf and not .OTF)

    — answered February 17th 2011 by Enrico Luciano
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.