Include a custom font in project

[goldim]

I try to include fonts to my project according to official documentation and some examples in qooxdoo source files but no success at all. I've checked many times and didn't find any mistakes from my own. For example I want to include file JosefinSlab Regular. 1) At Manifest.json at section provides create a section fonts:

  "JosefinSlab Regular": {
    "fontFaces": [
      {
        "paths": [
          "my/project/font/JosefinSlab-Regular.ttf"
        ]
      }
    ]
  }

2) I put a file JosefinSlab-Regular.ttf in folder "resource/my/project/font". 3) I create my theme font using this Manifest font:

/**
 * @usefont(JosefinSlab Regular)
 */
qx.Theme.define("qxl.themedemo.theme.Font", {
  extend: qx.theme.indigo.Font,

  fonts: {
    title:
    {
      size: 36,
      fontName: "JosefinSlab Regular"
    }
  }
});

4) In my app somewhere use it:

const themeLabel = new qx.ui.basic.Label(title).set({font: "title"});
container.add(themeLabel);

This way doesn't work. Also I want to notice font file doesn't move into compiled folder only @asset can help to do it. What way works? Adding CSS font-face in index.html and using family in Font.js file instead of fontName. Fonts of qooxdoo works just fine with @usefont`. Maybe including fonts doesn't work properly?

[johnspackman]

There's two ways to add custom fonts, an old way and a new way and I think you've picked up a bit of both

The "Old Way" is to do everything you did in your #1..#4 points above, plus add @asset (and do not use @usefont). This means that you specify font files in two places, and multiple times in your theme's Font.js

The "New Way" is to:

1. Add provides/webfonts to Manifest.json
2. Add to your theme's Font.js and specify the font name but do not specify the font paths.
3. Use @usefont in Font.js with the font name

This means that in the "New Way", you can say "Arial", "Times New Roman"...or "JosefinSlab Regular" in Font.js and not care about where the font files are or which library they come from. The compiler takes care of adding the fonts into the resources automatically for you, provided that you also say @usefont(JosefinSlab Regular)

BTW I'm not 100% sure that I didn't introduce a bug here with the "Old Way" implementation when I added the "New Way", or whether the "Old Way" was just prone to silently break if you didn't get it quite right.

[goldim]

@johnspackman Thank you for reply. I appreciate your help so much. According to docs provides/webfonts is deprecated and as I remember it was used before you introduced "new way". See here:

Manifest.json's provides.webfonts is deprecated and now provides.fonts is preferred

According to your instructions I use exactly "new way" because I added fonts only in Manifest.json (AFAIK before you may or have to add font description in compile.json too). I dont' specify paths in Font.js and I use @usefont instruction there too as you may see in my code above. I take qooxdoo framework code specially Manifest.json file to see right declaration of fonts. And question it is old way or new one? See for example JosefinSlab font from there. Also I've read this article and did like there. Is it old way? If yes then it should be changed to new one because I and other reader are confused. I guess there is a silent error or break like you said.

[johnspackman]

According to docs provides/webfonts is deprecated

Oh sorry, Im having a senior moment :) webfonts is the old way and fonts is the new way, but the rest was correct - it looked at first glance that you were using the "old way" but I can see that you're not.

In that article, everything is correct, as is the Manifest. You should not have to use @asset (in fact, by preference you should not because the compiler is able to figure it out). The only thing in compile.json that I can think of is that you specify what font extensions you want to include, for example if you want to filter out .eot you can. By default it only loads ttf, but your font file is .ttf already - have you specified target[].font.types in compile.json? Here's the doc: https://qooxdoo.org/qooxdoo/#/desktop/gui/theming?id=choosing-whether-to-use-cdn-urls-or-embed

[goldim]

@johnspackman No, I didn't. And now after adding this one it does work. Probably default behavior doesn't work if talking about "fontTypes" option. I wouldn't pay attention at this subtopic if you didn't say me. I think there has to be some link to this topic not as optional but as obligatory.

[johnspackman]

Ah, sounds like there is a bug then. This should simplify things, including for themes in packages, so that special instructions are not required when doing things like adding in a theme from someone else.

[sknick]

I know I ran into some issues a ways back.

https://app.gitter.im/#/room/#qx:gitter.im/$KKCsZ2QcGQeyfIhbRg9h83cnsbLgBOsqa5lsNa7Xvn0

[goldim]

@sknick but you fixed it using @asset and "old style" right?

[sknick]

I think?

[goldim]

@johnspackman now the next problem: to install the package with font. What I have atm the package is working but in "app" which include the package, I get the error. If I use "fontName" in the package the font just is not shown in the app without any error. How to get around of this problem?

[johnspackman]

what "should" happen is that if you have a class in that package (eg a Font.js for a theme) which uses @usefont for a font named in that package's Manifest.json, then if your app uses that class (eg uses that theme), then the font is automatically loaded.

Are you finding that does not happen?

[goldim]

@johnspackman not exactly. I have Font.js with using a custom font. I use the font from Font.js in class of package. And I use a widget from the package in other package/app. Do you mean use Font.js from the package directly in application via inheritance?

[johnspackman]

Well, Font.js is just another class - the compiler looks at all the classes which are required (ie referenced one way or another) and looks to see if they have @usefont anywhere. When you run your app, if you can find your Font class at runtime and that Font class has @usefont, then the font should be loaded.