FontLoader not loading woff2 format

Manu_NaFu

Hi, I'm trying to build a qtquick application, and trying to load a font from google fonts (https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil:opsz,wght@10..72,100..900&display=swap).

The way I do it is take one of the sources in the above link, and paste it in the source of FontLoader:

FontLoader {id: myfont; source: "https://fonts.gstatic.com/s/bigshouldersstencil/v2/TwMQ-JIEQ1Je5sI6Bx1TKHD83rT3u3NSCfbvxY5Cf8Y.woff2"}

But I get this error: QML FontLoader: Cannot load font: "https://fonts.gstatic.com/s/bigshouldersstencil/v2/TwMQ-JIEQ1Je5sI6Bx1TKHD83rT3u3NSCfbvxY5Cf8Y.woff2"

Many thanks.

SGaist

Hi,

Do you have OpenSSL properly setup on your machine ?

Manu_NaFu

Hi, many thanks for your response,

Most probably not, I haven't done any particular setup for that.

But I'm guessing if I want to use the app in different devices I would have to setup openssl separately?

Would it be better to download the font and set it as a project resource somehow?

Many thanks for your help.

SGaist

I don't know how caching the font works but I think embedding it is worth considering if it's allowed by its license.

That said, does it work if you load it locally ?

Manu_NaFu

I tried but it doesn't even work in local to be honest

FontLoader {id: myfont; source: "qrc:/static/BigShouldersStencil_18pt-Black.ttf"}

QML FontLoader: Cannot load font: "qrc:/static/BigShouldersStencil_18pt-Black.ttf"

You are supposed to be able to load from the internet or from loca, but none of them work for me: https://doc.qt.io/qt-6/qtquick-text-example.html#fonts

SGaist

Can you load it directly from your disk ?
This is to verify that the font itself is not the issue. Sometimes Qt resources can be a bit finicky to get right.

Manu_NaFu

I also tried to load from local but I'm not sure how Qt is picking the path, I'm on windows and I tried to use:

FontLoader {id: myfont; source: "C:\Users\mine\Downloads\Big_Shoulders_Stencil\BigShouldersStencil-VariableFont_opsz,wght.ttf"}

But it will print

Unable to load font 'c:UsersmineDownloadsBig_Shoulders_StencilBigShouldersStencil-VariableFont_opsz,wght.ttf': Protocol "c" is unknown

Which looks like it doesn't pick the slash properly, and also it picks c: as a protocol for some reason.

I also tried with the other slash and I get the same error but the slashes print correctly.

And I also thought it might be picking the slash as special character so I put another slash on front of it, but then in the error message instead of printing a slash it will print "%5C"

~~-----------------------------~~

I also checked there's this "text" example, and they load a local and a web font, and they work.

I've tried the web in my project, which works, but it's format ttf while the one I was trying is woff2, so maybe this format is not supported.

But the local doesn't work even if I do the same as the example, and I copy the fonts to my local project. It tried to load from resources which I'm nto sure it's the correct thing:

FontLoader {
        id: localFont
        source: "content/fonts/tarzeau_ocr_a.ttf"
    }

qrc:/qt/qml/myproject/Main.qml:20:5: QML FontLoader: Cannot load font: "qrc:/qt/qml/myproject/content/fonts/tarzeau_ocr_a.ttf"

SGaist

Use forward slashes for your paths. Backslashes are for escape sequences.

AFAIR, it's the file:// scheme to grab stuff from your local drive