Embedding custom fonts

You can embed a custom font in your app. This feature's been in for a little while, but wasn't documented. So I thought it'd be worth bringing it to your attention.

Please provide an example showing a complete build.settings file for Android that includes a custom font. Or point to a reference that explains all the elements of the build settings.

Here was my wild guess trying to adapt the iphone version shown in the ansca example for embedding font

settings =
{
androidPermissions =
{
"android.permission.INTERNET"
},

android =
{
plist =
{
UIAppFonts =
{
"VeraMono.ttf"
}
},
},
}

You don't need an entry on Android. I updated the docs to reflect that.

That explains why I was going through the docs yesterday, noticed it and thought... whoah I didn't know you could do that!

Can anyone verify that this works on an actual device? Following the instructions here I can see and use my custom font in the Corona Sim and the Xcode Sim, but when I build for an actual device the font is absent. (ie - buttons that use the font for text labels look correct on both sims, but on the iPhone itself the buttons are blank.)

THis works for me. In simulaator AND on my iPhone 3GS. Here is my build.settings file:

settings = {
iphone = {
plist = {
UIApplicationExitsOnSuspend = true,
UIAppFonts = {
"SFDigitalReadout-Heavy.ttf"
}
},
},
}

And in my project folder along with all source (*.lua), graphics, and sound files is:

SFDigitalReadout-Heavy.ttf

Yes I can also confirm it works. Though you'll need iOS 3.2. It's worth noting if you're planning to support the original iphone (can't install 3.2.), you'd be better off with bitmap text.

Thanks for the confirmation, tokyodan and Ignaciolturra.

It turns out the font I was trying to use had the extention ".TTF" as opposed to ".ttf", which is how I had it in my build.settings. I guess OSX (and the simulators) are smart enough to handle that, but iOS isn't.

Also, Ignaciol, thanks for the heads up about the compatibility issue with original iPhone. I'm on the fence about supporting it since, currently, my game runs at about half speed on it vs. 3GS and 4. I wonder if there's a way to detect which phone is being used and fallback to a system font if it's an original iPhone.

My custom font is now working on the devices, but there's another problem. Text using the custom font is shifted up a few pixels. It looks particularly bad when using the font for button label text since the font creeps over the top edge of my button graphic.

I Googled around and it seems this is a problem for people trying to use custom fonts on iPhones after iOS 3, when Apple changed the UPM for fonts from 1000 to 2048. I don't understand the problem, or what the solution might be, all I know is the font is aligned correctly in the Corona simulator and OSX, but is misaligned vertically on my iPhone. Anyone else notice their custom fonts misaligned on an actual device? Is this a bug for Ansca?

is there something Im missing? I have done everything pretty much to the letter what was written here. Was the font supposed to be in a certain folder?

Yes, you have to copy it to your project's root folder as well.

yes, did that as well as all the other directions to the letter

The only other thing I can think of is that you have the name of the font wrong. It's not necessarily the name of the file, but how it shows in other programs. Try using the font in something else and see what it's called (Also try different fonts to try and narrow down the issue).

I used FONTBOOK in osx to find the font name...although I used the sample code on showing native fonts on the device, and my font wasnt in there...no matter what the name was exactly. even the harrowprint exmple font provided didnt show, and my ipad has the latest iOS ver.

Hi, following up here in case someone else has a similar problem.

Another thing to check in your build.settings file is that the UIAppFonts entry needs to be a list, even if it only has one entry. In other words, it should look like this:

UIAppFonts = {
"SFDigitalReadout-Heavy.ttf"
}

This will not work:

UIAppFonts = "SFDigitalReadout-Heavy.ttf"

Ok, so now the font finally shows up...thanks for the heads up on how to get it right in the build file, but it would appear that I am having the same issue as XenonBL where the text is fine on Corona Sim but on the device its shifted up. Is this a bug for ANSCA? I would hate to have to go through and change all this around when its just a bug to be fixed.

Dumb question: where can I find the build.settings file? Or do I create on in my project directory?

@Nick: you create the build.settings file yourself in the root project directory.

dumber question, when I use a ttf font the font size is fixed, it doesn't matter how big I make the font in display.newText, it will stay the same size. Why is it doing that? It IS the correct font, but the size is unchangable.

Shaunathan, I had no trouble changing font size when using a custom font on a button. Want to paste in your code? Maybe there's a problem there.

Does this work with the Windows Simulator? I am having trouble trying to get a custom font on my windows machine working. Of course this is Android only.

turns out it's the font, "linesquare rounded extended" on dafont.com it's a free font, so you can try it yourself. Perhaps it's a problem because it's a .ttf. Does Corona only work with .otf?

UPDATE:

Different .ttf worked fine. Maybe it has trouble with pixelized Flash compatible fonts?

Shanathan, I was able to get that linesquare rounded extended font to work in the simulator. Haven't tried it on an iPhone.

Three things to check.

1. Make sure you have a copy of the font in your library/fonts folder

2. Make sure you have a build.settings file at the same level as your main.lua file. It needs to have this code in it:

1
2
3
4
5
6
7
8
9
        iphone =
        {
                plist=
                {
                        UIAppFonts = {
                                "linesquare_rounded_extended.ttf",
                        },
                },
        },

I've tried all possible solutions but I can't get my custom font working on the device, it works fine in the simulator but on the device no text will display at all :(

Urme, I've had mixed results with fonts. Some worked for me and some didn't. See if you can get any custom fonts to work, like the Harrowprint example described here.

If you can get that one to work, then you could try your own. But I've found that at least 2/3 of the fonts I've tried didn't work, maybe because they're not TrueType, or some other issue. You could then zip up your project, including the font, upload it to your website, and link to it here so others can take a look.

Hi guyz

I have been reading this comments since morning up and down if i am missing something or not but i am yet not able to get the custom fonts on my device !!

Made changes in the build.setting file with the fonts in the root directory. which made the application work in Xcode sim but when the same thing was transferred to the Ipad the font is invisible

Dont know exactly how it would work.

If you guyz can upload a small example with the custom font which works just fine would be if a great help

Update...

I used the example provided above in my windows simulator downloading the ttf font and installed it in my fonts directory and also kept it in my root file used the exact same code provided above to test it

but the fonts wont load.

later i used a few other fonts which didnt had space in middle of their name and they were working just fine
which gives me a conclusion there is some issue with spaced name of the fonts which gives a conflict can you please confirm this back or if i am wrong can you provide solution.

Thanks and Regards
Atheros

Atheros, I had trouble with certain fonts while others worked fine. Never figured out why. So best place to start is with a font that we know works and see if you can get that to work on your device. Then try replacing with other fonts. Start by downloading the Harrowprint font that's linked from this page

http://developer.anscamobile.com/content/display-objects#Using_a_custom_font

Once you can get that one working, you at least know you have the settings correct.

I'm guessing that only Truetype fonts work... I've asked about this but haven't gotten a confirmation.

Hey David,

local text = display.newText( "Hello Harrowprint font!", 0, 0, "Harrowprint", 50 )

I saw the "Harrowprint" does not have a space in the middle i am sure this will work fine i tried many fonts i wish there was a a option to attach the file i would have attached the example so that ansca people can figure out the actual reason behind it

Regards
Atheros

Atheros, I also recall wondering if there might be an issue with fonts with a space in their name. I suggest you report this as a bug. There you can attach a zip file of your project (including the font) so the Ansca staff can try and duplicate the problem.

Click on "Report a Bug" in the upper right corner of this page, or go here:

http://developer.anscamobile.com/content/bug-submission

An alternative (with both advantages and disadvantages) to compiling a TTS font into your project may be to use a pre-rendered bitmap font.

You can read about and download my implementation in this thread:
https://developer.anscamobile.com/forum/2011/02/05/bitmap-font

The advantages of a bitmap font are:
- You can have fonts which include baked-in effects like drop-shadow and gradient fill.
- You can use custom fonts without worrying about the tricky TTF embedding.
- You can save space by including only those letters that you will need.

The disadvantages of a bitmap font are:
- You cannot display text at arbitrary sizes
- You cannot display text in arbitrary colors
You can work around these two issues by creating multiple font files in different colors and sizes or by creating a large font file and scaling the text down.

I am a windows user and am building for Android, it is my understanding then that for android, you do not need to add the font in your build settings correct? I still cant seem to get it to work in my game. here is my code:

1
local mytime = display.newText("0",  0, 0, "Harrowprint", 35)

Any news or official docs on how to embed fonts and sample code?
Am using Windows and trying to build for Android.

I finally got mine to work, but like others have said, it seems that only fonts that are single word named will work. All you need to do is install the font in your windows/fonts folder. then also make a copy to put in the root of your project folder, and then in your code you would replace Harrowpoint with whatever your font is named. (use the name that is shown in microsoft word, not the fonts file name)

should do the trick

I am getting nowhere trying to get font embedded using Windows build for Android.
My font is ravie.ttf (single name) and is in the root directory.
It works fine in the simulator but not when built. I am using the trail version (377) of corona might that be an issue.
Any help greatly appreciated

Ansca?

Any updates on helping this out? I'm stuck like g.harrison. Tried everything... or so it seems. I even re-encoded it with fontLab. Still no luck.

3cord, as I mentioned above, if you are desperate for a custom font and can't get the TTF fonts to embed, you can try using my BMF library (free) or TextCandy to display a bitmap font.

You can generate bitmap fonts from TTF fonts using BMFont (free, Windows) or GlyphDesigner (better program, paid, Mac).

Thanks for the idea p120.

I actually just now got it working. It was an error in my build settings. I had a comma and a curly brace in the wrong spot. So it works on my device now.

If anyone wants to use my build settings here they are:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
settings = {
        orientation = {
                default = "landscapeRight",
                supported = { "landscapeLeft", "landscapeRight"}
        },
        iphone = {
                plist = {
                        CFBundleIconFile = "Icon.png",
                        CFBundleIconFiles = {
                                "Icon.png" , 
                                "Icon@2x.png" , 
                                "Icon-72.png" , 
                                "Icon-Small-50.png" , 
                                "Icon-Small.png" , 
                                "Icon-Small@2x.png"
                        },
                        UIStatusBarHidden = true,
                        UIPrerenderedIcon = true,
                        UIApplicationExitsOnSuspend = true,
                        UIAppFonts = {"YourFontHere.ttf"}
                },
        }
}

Another quick tip (This is probably a no-brainer to those with a little more experience):
I needed a custom font on an Android app, so I downloaded the font, installed it on Windows, and copied the .ttf file to the app root directory. It still wasn't working, even after I had read and reread the above thread to make sure I was doing it right.
Turns out I just had to completely close and reopen the simulator. Once I did that it worked perfectly.

brainsofsteel answer is the one that got it working for me ..... All the others are good, but no one else mentioned shutting the SIM and restarting.....

Hi,

who wants to embed the whole Unicode font file? In practice I need in my app only some symbols out of this font! How can I limit the character set that is embeded without having to create a complete new ttf file?

Regards,
Devarai

i have this same problem as well... did you ever find a solution??

views:2228 update:2011/9/19 13:40:57
corona forums © 2003-2011