4. Loading custom fonts on iOS

Loading custom fonts on iOS


  • 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.

    0
  • Lifetime Qt Champion

    Hi and welcome to devnet,

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

    0

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

    Thanks

    0

  • 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.

    1. 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
      @

    2. 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.

    1. 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!

    0

  • 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

    0

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

    0

  • 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

    0

  • Will give it a try in the evening

    0

  • 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

    0

  • 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

    0

  • 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.

    0

  • yup, see my post from 20 Dec

    Cheers

    0

  • Oops yes. Sorry ^^

    0

  • 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

    0
Log in to reply