Posted on by

Here are some frequently asked questions about using custom fonts in Corona.

1. How do I load custom fonts?

How fonts are loaded depends on which platform you’re using.

iOS

For iOS, add the font file names to the build.settings file.

    iphone =
    {
        plist =
        {
            UIAppFonts =
            {
                "PTF55F.ttf",
                "AvenirLTStd-Black.otf",
                "SourceCodePro-Black.ttf"
            },
            UIApplicationExitsOnSuspend = true
        },
    }

The font file(s) need to be in the resource directory so they get compiled into the iOS app bundle.

Mac

For Mac, you need to install the fonts on your system. Double click on the font file and the Font Book app will install the font. There is nothing added to the build.settings file for Mac.

Android

The font file(s) need to be in the resource directory so they get compiled into the Android app bundle. There is nothing added to the build.settings file for Android.

Windows

Installing custom fonts on Windows is similar to installing on the Mac. You need to install the font in the system before it can be used. Afterward, you must also restart the Corona Simulator for the font to be recognized. Unlike Mac, however, there is nothing that must be added to the build.settings file when using Windows.

2. How do I use the custom fonts in my app?

Mac and iOS

To use the fonts in Mac and iOS, you need to specify the font name (not the file name). There is probably a tool to tell you what the font name is, but I found the easiest way is to load the font and use Corona to tell give you the name. Running the following code will give you a list of names matching your font. You can run this code on the Mac Simulator if you have installed the font on the system.

-- Code to have Corona display the font names found
--
local fonts = native.getFontNames()

count = 0

-- Count the number of total fonts
for i,fontname in ipairs(fonts) do
    count = count+1
end

print( "\rFont count = " .. count )

local name = "pt"     -- part of the Font name we are looking for

name = string.lower( name )

-- Display each font in the terminal console
for i, fontname in ipairs(fonts) do
    j, k = string.find( string.lower( fontname ), name )

    if( j ~= nil ) then

        print( "fontname = " .. tostring( fontname ) )

    end
end
---------------------------------------------------------

For example, the PTF55F comes back as “PTSerif-Regular”, so that is what you need to specify when displaying text in that font.

CustFont = display.newText( "PTSerif-Regular", 40, 20, "PTSerif-Regular", 24 )

Android

In Android the font name is the file name (minus the file extension).

CustFont = display.newText( "PTSerif-Regular", 40, 20, "PTF55F", 24 )

One tip to make the font names the same between Android, iOS and Mac, is to rename the font file to the font name used by iOS/Mac to access the font.

Note: On Android, the font file name is case sensitive and the extension must be lowercase. So “PTF55SF.TTF” used in the above example would not be found. The filename would need to be “PTF55SF.ttf”.

Windows

The font name may be slightly different from Mac/iOS. In come cases spaces are inserted between words in the font name. In the PT Serif example, the font name is “PT Serif”. You can run the code snippet listed under the Mac and iOS section to get the exact name.

CustFont = display.newText( "PTSerif-Regular", 40, 20, "PT Serif", 24 )

Here is a code snippet to handle using fonts for each of the platforms.

if "Win" == system.getInfo( "platformName" ) then
    PTSERIF = "PT Serif"
elseif "Android" == system.getInfo( "platformName" ) then
    PTSERIF = "PTF55F"
else
    -- Mac and iOS
    PTSERIF = "PTSerif-Regular"
end
CustFont = display.newText( "PTSerif-Regular", 40, 20, PTSERIF, 24 )

3. I’ve loaded the fonts but the fonts didn’t load. What’s wrong?

On Android and Windows there will be a warning message in the terminal if it can’t load the font: “WARNING: Could not load font xyz. Using default.” On iOS and Mac it will silently fail (no message) if it can’t load the font.

The two main reasons for fonts not loading is either they are not loaded on the system (Windows and Mac) or using the wrong font name in the display.newText() api. See question 4 for one additional issue with Windows.

4. Are OTF (Open Type Font) fonts supported in Corona?

OTF fonts are supported in Mac and iOS. Android supports OTF starting with build 984. They are not supported on Windows. True Type Fonts (TTF) are supported on all platforms

5. What are the advantages of using Custom Fonts?

Besides custom fonts making your app stand out, the other advantage is consistency of text placement across all platforms. There are lots of variations in font parameters for the same font name across different platforms that make it hard to make sure text items are positioned the same. You will find that custom fonts makes it a lot easier when developing for multiple platforms or between the simulator and device.

That’s it for today’s questions. I hope you enjoyed it and even learned a few things.


Posted by . Thanks for reading...

16 Responses to “Tutorial: Using Custom Fonts”

  1. Andreas

    Hi Tom,

    thanks again for a straight & helpful tutorial.

    We use custom fonts a lot, so I want to share two small tips:

    1. License

    Normally you have to buy an extra license to use a font in your apps, it’s not enough to have bought the license for web publishing or print (if you’re e.g. working on converting kids books into interactive storybooks). It’s not steep, we in average pay about $20-40 for the license per font.

    2. OTF -> TTF

    We use only TTF because we publish for iOS / Android / Kindle / NOOK – hey, that’s what the Coronalabs SDK was made for. :-)
    So we sometimes need to convert OTF -> TTF. A very fast, free (and hassle-free) online converter doing the task nicely is:
    http://www.freefontconverter.com

    Best,
    Andreas

    Reply
  2. Igor

    I’ve discovered that its impossible to include more than ~100 fonts in single build. The app crashes (probably due to memory issues)

    Reply
  3. frank

    Hi Andreas,

    re 1., once we bought the fonts, can we publish the TTF with our application free of charge to unlimited number of users ?

    Thanks
    Frank

    Reply
  4. Stiven

    Hi!

    I Have a question.

    With custom font, on the device font is sometimes misplaced, and appears a couple of pixels higher or lower. Do you know what is the problem or how to fix that?

    the difference also appears to be different on different devices.

    Reply
    • Julius Bangert

      Stiven, did you ever figure this out? I’ve noticed this problem with the text being slightly higher on the device compared to the simulator. I’ve been aware of this the whole time I’ve been developing my game but kind of ignored it as something I could fix at the end. Really need to fix it now though.

      Reply
  5. Chris Leyton

    How about an article on bitmap fonts – if you want to make your game look that little more polished this is really the only route to go. So far as I can teel the only way is to use a pretty outdated community module (bmf.lua) or the third-party Text Candy option. Some advice on this would be pretty helpful.

    Reply
  6. Renato - RBG

    I was trying to use custom font in my Android device (Galaxy S-I) but even following the instructions above the custom font was not working.

    After several tentatives and tests, I found that the problem was that my font file was with its extension in capital letters (.TTF). I changed the font file extension to .ttf and it worked perfectly.

    Reply
    • Ahmad

      i do every thing in my Android app and it’s works on simulator but in my device LG G2 not working why ? help me please

      Reply
  7. Rob

    I was fighting an with a Font on my Droid Razr. Read Renato’s comment above and found that the same issue fixed my problem too.

    The font file extension ( TTF ) must be lower case; ttf

    As soon as I changed that, my font display perfectly on Device.

    Reply
  8. Rithy

    Hi,

    I found this tutorial very useful; however, i’m facing a problem with font family to work in Win. I have 2 fonts, helveticaneue.ttf and HelveticaNeue-Bold.ttf, and i installed them in My Win 7, but i can get only Helvetica Neue font name to work.
    How can i get the Bold one to work? i used the above method to get font name from system font, but there’s no HelveticaNeue-Bold printed. Anyone has solved this?

    By the way, it seems to work fine on Mac and IOS.

    Thanks.

    Reply
  9. Sabir Ahmed

    Hello all,
    I have question.
    Can I display some sentence or word in different format in single string? (like: italic , bold or change the word color)

    Thanks,

    Reply
  10. Dewey

    Can the fonts be in a folder or do they need to be at the project root?
    If in a folder, what needs to change to the syntax of build_settings??

    Thx
    D

    Reply
  11. Federico Pici

    Hi,
    after some test i was able to understand how to use correctly custom fonts under android.
    1) choose a .ttf font file and put it in the root folder (where main.lua is) of your app. File name extension (.ttf) MUST be lowercase
    2) No need to write something in build.setting (for android)
    3) Under emulator font file must be referenced by Font Name but under android font file must be referenced by file name. So in my case i put LUNAKRONIKLIGHT.ttf under root folder of my app, i installed it in my OS and referenced it (in emulator) with “Luna Kronik Light”. Under android device i referenced it with LUNAKRONIKLIGHT. It took me some time to understand. If you change the name of the file and set it equal to font name you won’t need to detect if you are under emulator or under real device. In my case i renamed “LUNAKRONIKLIGHT.ttf” in “Luna Kronik Light.ttf” and have it work under emulator AND under android device with same name convention.
    Hope it helps
    Federico Pici

    Reply
  12. Martin

    Not working. The font is listed via native.getFontNames() but newText does not display.

    swap font to “Arial” (or any of the other preloaded fonts) and everything works… :(

    Reply

Leave a Reply

  • (Will Not Be Published)