Loading standard fonts by default

[rickmcgeer]

Describe the Feature I've been getting an Invalid Font Name! (total message in the alert box) on a built page, so I looked up the fonts in the debugger with the following (in built code)

__varRecorder__$J.availableFonts().map(f => f.name)

and got this result:

['Alegreya', 'Amatic SC', 'Arimo', 'Bree Serif', 'Cantarell', 'Caveat', 'Comfortaa', 'Courier Prime', 'EB Garamond', 'Font Awesome', 'Gideon Roman', 'IBM Plex Mono', 'IBM Plex Sans', 'IBM Plex Serif', 'Inconsolata', 'Lexend', 'Lobster', 'Lora', 'Material Icons', 'Merriweather', 'Montserrat', 'Noto Emoji', 'Nunito', 'Open Sans', 'Oranienbaum', 'Oswald', 'Pacifico', 'Permanent Marker', 'Pinyon Script', 'Playfair Display', 'Roboto', 'Roboto Mono', 'Roboto Serif', 'Spectral', 'Tabler Icons', 'Titillium Web', 'Ultra', 'Varela Round', 'Noto Sans']

No Arial. No Sans-Serif...

So part of the problem is that standard fonts aren't loaded in built pages. But a bigger problem is that I should put in defensive code to check for the loaded fonts and substitute for unloaded fonts. Unfortunately, I don't know how to do this. How do we check for loaded fonts?

[linusha]

Okay, there are multiple problems at play here:

1. I think you are on an outdated version of lively, as we recently changed the error message you quoted to be more helpful. On my system, it reads as follows: "Invalid Font Name: Sans-Serif on morph aText!"
2. I implemented default fonts on your suggestion, but I spelled them not according to the standard. Until now, the font name lively expected was "Sans Serif" without the dash, but I looked into the CSS standard and you are right, that the correct spelling has the dash! I will push a fix soon! Then, you can use the default fonts of a system by specifying "Monospace", "Serif", or "Sans-Serif" as the fontFamily of a Morph. Those values can also be selected in the properties panel (the top most entries in the list).

3. We do not support Arial out of the box. The reason for this is licensing, as we ship lively with all the font files that the support by default and thus can only provide font files for fonts that are under an open license. The reason why we not allow to enter arbitrary fonts is that this way, we can guarantee that your application will look the same on all systems where it might be ran, as the font files used in a project are bundled with it. As we can only bundle font files that we control, we cannot bundle fonts that only exist on your system and for example on my machine, running Linux, Arial will be substituted for something else and your application might not look the way you intended. However, if you have the .woff2 file for Arial, you can of course add it to your project and use it! It will then be bundled together with your application, so you might want to think about the licensing implications of this. To add a custom font to your project, you will need to use the font manager that can be opened in the properties panel when a Textmorph is selected.

In the case that you only have the file in a format other than woff2, I recommend https://cloudconvert.com/. :slightly_smiling_face:

---

Following these practices should allow you to not need for unloaded fonts, as lively does that for you and I strongly recommend you relying on these checks, as doing them correctly is not trivial and sometimes has server performance implications.

Let me know if that helps!

[rickmcgeer]

Thanks, @linusha. It looks like the principal problem is that I prepared the data files with an old version of Lively that had Arial in it. there are few enough of these things around that I can go ahead and modify them by hand. But I would also like to be able to put in defensive code that detects when an illegal font is requested and delete it

[linusha]

There is function inside of morphic/rendering/fonts.js called availableFonts() that will return an array of objects which represent the available fonts, if this is called in the context of a loaded project fonts you added to the project yourself will also be included (inside of lively, this might not work as expected in bundled applications). The array takes the following form:

[
  {
    name: 'Font A',
    supportedWeights: [/*Array of Integers representing supported fontWeights. Empty array equals [400,700]*/]
  },
  {
    name: 'Font B',
    supportedWeights: []
  },
  ...
]

You can check against the content of this array. The system will also warn you (with the error message quoted above, including the offending font and the name of the affected morph) if a non-secure font is requested at runtime inside of lively. However, from the top of my head I have no good idea how you can use that to check your entire codebase. For this I fear the easiest way is to just use code search, in the case you know which fonts were used.