Loading custom fonts on iOS

dbrian

Are custom fonts supported on iOS? I am attempting to load a font packaged in a .qrc file using a FontLoader element in QtQuick 1.1

The application deploys and runs fine but my font is not loaded and the console complains that
"This plugin does not support application fonts", followed by
"QML FontLoader: Cannot load font: 'qrc:///fonts/CustomFont.TTF'"

@
import QtQuick 1.1

Rectangle {
id: container
width: 950
height: 700

FontLoader { 
    id: myFont
    source: "fonts/CustomFont.TTF" 
}

TitleBar {
    id: topToolbar
    height: 40
}

}
@

I found "this":https://bugreports.qt-project.org/browse/QTBUG-34490 bug report that seems to be related but it hasn't been evaluated yet so I was wondering if anyone on this forum has any debugging tips or can confirm that this is actually a known issue and I'm not just doing something wrong.

SGaist

Hi and welcome to devnet,

After a quick look at the sources, it's not been yet implemented for iOS

bercik

@dbrian have you found any solution? I'm not able to load font file with qt 5.2 for iOS

Thanks

dbrian

I eventually got it working thanks to the post "here":https://bugreports.qt-project.org/browse/QTBUG-34490?focusedCommentId=223751&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-223751 but it was a bit tricky.

I had to do 3 things.

Add something to your project file like this, telling it to bundle the fonts with the application:
@
fonts.files = {{font1Path}}/MyFont1.ttf {{font2Path}}/MyFont2.ttf
fonts.path = {{fontInstallPath}}
QMAKE_BUNDLE_DATA += fonts
@
Add the fonts to the UIAppFonts key in the application's Info.plist:
@
<plist version="1.0">
<dict>
...
<key>UIAppFonts</key>
<array>
<string>{{fontInstallPath}}MyFont1.ttf</string>
<string>{{fontInstallPath}}MyFont2.ttf</string>
</array>
...
</dict>
</plist>
@

This step gets annoying fast because QtCreator recreates the Info.plist file on every build (or maybe just on qmake...idk), so I found it pretty useful to write a pre-build bash script that bundles all my fonts and imports them into the .plist

@BUILD_DIR=$1
RESOURCE_DIR=../Resources
FONT_FILES=../../fonts/*.ttf

touch $RESOURCE_DIR/fonts.plist

/usr/libexec/PlistBuddy ../Resources/fonts.plist -c "Clear array"

fileNum=0
for font in $FONT_FILES
do
file=basename $font
cmd="Add :$fileNum string \"fonts/$file""
echo $cmd
/usr/libexec/PlistBuddy ../Resources/fonts.plist -c "$cmd"
((fileNum++))
done

/usr/libexec/PlistBuddy ../Resources/fonts.plist -c "Save"

/usr/libexec/PlistBuddy "$BUILD_DIR/Info.plist" -c "Delete :UIAppFonts"
/usr/libexec/PlistBuddy "$BUILD_DIR/Info.plist" -c "Add :UIAppFonts array"
/usr/libexec/PlistBuddy "$BUILD_DIR/Info.plist" -c "Merge $RESOURCE_DIR/fonts.plist :UIAppFonts"
@

It would actually probably be a better idea to have this script reading the required fonts directly from the project file entry in step 1. I should do that.

Add the font files to a .qrc file. I'm not entirely convinced this is necessary, but I tried taking them out and my application stopped loading the fonts so I just decided to stick with what was working. If your app isn't already using a resource file though, you might try without one first.

Then you should just be able to use your fonts like any other system font. If they don't load, try explicitly loading them with a FontLoader or checking the QFontDatabase to make sure they're available. Hope this helps!

bercik

Thank you very much! I will give it a try.

hint: if you want to use custom .plist file you can place one in your project directory and add following line to your .pro file

QMAKE_INFO_PLIST = MyApp.plist

Cheers

jraichouni

Hope it is going to be implemented in Qt 5.2.1;-)

bercik

Yeah, would be great :)

...but for now solution given by dbrian works like a charm, thanks for that.

P.S. i haven't used resource file, just plain ttf and it worked without using font loader, i've just listed all available font families by

@
QFontDatabase db;
foreach (const QString &family, db.families()) {
qDebug() << family;
}
@

...and picked my custom font's family name

Cheers

jraichouni

Will give it a try in the evening

jraichouni

Tried it.

In the .pro file I added:

@
ios: {
fonts.files = ../../src/qml/fonts/SourceCodePro-Regular.ttf
fonts.path = .fonts
QMAKE_BUNDLE_DATA += fonts
}
@

On the iOS device or simulator QFontDatabase db.families() contains an entry "Source Code Pro" and the .ttf file got copied to the corresponding application sandbox sub directory .fonts

But the console logs as you described
@
This plugin does not support application fonts
qrc:///qml/main.qml:12:5: QML FontLoader: Cannot load font: "qrc:///qml/fonts/SourceCodePro-Regular.ttf"
@

main.qml lists

@
FontLoader { id: sourceCodeProFont; source: "fonts/SourceCodePro-Regular.ttf" }
@

main.qml has been launched via qrc

@
view->setSource(QUrl("qrc:///qml/main.qml"));
@

My Info.plist contains

@
<key>UIAppFonts</key>
<array>
<string>.fonts/SourceCodePro-Regular.ttf</string>
</array>
@

Therefore, it seems as if one can not load a custom font!?

It would help to be able to have a .qml in the qrc system but define a file url as source of FontLoader instead of a qrc url in the .qml

bercik

Hi Jamil,
please try to remove FontLoader from qml completely, in my case that was a problem.If your font is present in QFontDatabase, just use font's family name while defining item in qml, i.e.:

@
Text {
anchors.centerIn: ......
text: ......
color: "#ffffffff"
font.family: "Source Code Pro"
font.pointSize: 20
}
@

Cheers

julienw

Just to precise something :There is no need to have a script for changing the plist file :

Add "QMAKE_INFO_PLIST = AppliInfo.plist" in the .pro in order to use your own plist file.

bercik

yup, see my post from 20 Dec

Cheers

julienw

Oops yes. Sorry ^^

alexleutgoeb

For the sake of completeness, it seems like FontLoader is fully implemented for iOS as of the current "Qt 5.3 beta":http://blog.qt.digia.com/blog/2014/03/25/qt-5-3-beta-released/, so there are no more hacks required. ;)

Cheers,
Alex