Custom Fonts?
Hi,
Is there a way to embed a custom font in iPhone/iPad apps?
thanks,
B.
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).
-
For anyone interested, Nolan mentioned that this may be a possibility in the future, but not at present.
B.
-
In a WebView you can embed an SVG-font - a bit far-fetched, but it's the only way right now.
-
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
-
Try this method if everything else fails.
-
-
make sure your font file has estension in lower case (.otf and not .OTF)