Due to the possibilities provided with WebGL v2 and WebAssembly, there are more and more companies pushing into the multimedia space with their Web apps, especially as this gives a unified distribution platform for both the Web and the Desktop.
We are for example providing a full featured painting and image editing application here: www.paintsupreme3d.com.
Now, we draw fonts using the 2D canvas. The biggest drawback right now for web based multimedia applications is that they cannot offer the user a list of the SYSTEM fonts to choose from for drawing text.
For web apps to be able to compete with native desktop apps, this is a major drawback right now.
Would it be possible at one stage to either:
1) Provide a list of the installed system fonts to the application so that the app can provide its own font dialog to the user.
2) Provide a browser font dialog where the selected font is passed to the 2D canvas if 1) provides a fingerprinting security issue.
This would be a big step for multimedia web app providers like us.
markusmoenig
All 20 comments
You might be able to use the CSS Font Loading API for this.
Yay295
on 21 Jan 2018
@Yay295 Thanks for the suggestion. But I don't think this API provides a list or dialog to choose from the fonts installed on the local system for use in the 2D canvas.
markusmoenig
on 21 Jan 2018
Like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@font-face {
font-family: Arial;
src: local("Arial");
}
@font-face {
font-family: not_local;
src: local("not_local");
}
</style>
<script>
"use strict";
let available_fonts = []
let to_check = 0, checked = 0;
function on_page_load_handler() {
for (let f of document.fonts) {
document.fonts.load("0 " + f.family).then(on_font_load_success_handler, on_font_load_failure_handler);
++to_check;
}
}
function on_font_load_success_handler(fonts) {
++checked;
available_fonts.push(fonts[0]);
if (checked == to_check)
console.log("Available Fonts", available_fonts);
}
function on_font_load_failure_handler(fonts) {
++checked;
if (checked == to_check)
console.log("Available Fonts", available_fonts);
}
addEventListener("load", on_page_load_handler);
</script>
</head>
</html>
cc @whatwg/canvas @tabatkins @litherum
annevk
on 21 Jan 2018
Heya @markusmoenig, since this is your first issue, https://whatwg.org/faq#adding-new-features and https://whatwg.org/working-mode might be of interest.
annevk
on 21 Jan 2018
@annevk Thanks for the links, great info!
@Yay295 Thanks a lot for the example source code! Using your source code In Chrome and Safari I get exactly one FontFace back for Arial (as expected as we request the FontFace for the given name). However I need to have a list (or font dialog) of all font names on the system so that I can give the user the choice to use them in the 2D canvas.
markusmoenig
on 21 Jan 2018
Listing all fonts available on the system is potentially a highly efficient way of generating considerable amounts of entropy that can be used for fingerprinting. This is possibly more powerful than canvas-based supercookies which can at best only try to guess for fonts that might be installed, which is less efficient.
Maybe this concern is not enough to justify not having such an API, but keep in mind that privacy browsers (and privacy extensions for common browsers) are surely going to block this API, should we pursue it.
IMHO, it would be better for creative apps to rely on font libraries that are hosted on the web rather than local fonts, especially if they care about documents looking the same when viewed on different computers, without having to embed entire font definitions into document metadata.
junov
on 22 Jan 2018
@junov I understand the concerns re fingerprinting. However doing it via 2), i.e. a browser based dialog to assign the font for the 2D canvas would circumvent this.
Web hosted font libraries are not enough to compete with something like Photoshop given the copyright issues with many of the fonts involved.
I think it is crazy that, while you have full access to the GPU and CPU nowadays, the main reason not being able to build something as powerful is not having access to the system fonts. Especially as the users could use them freely if he just knew how to select the names of them.
markusmoenig
on 22 Jan 2018
@markusmoenig, you make a valid point and it's an interesting problem.
As @junov said, number 1 is probably out of reach. But an API that returns a FontFace and that pops up the font selection dialog could be interesting.
I wonder how would that work on systems that don't have native font selection dialogs (like mobile).
Also, given its relative complexity, it would be important to understand if the use case is only to support image editing software, or if there are other applications that could benefit from this.
fserb
on 22 Jan 2018
Hm, so an <input type=font> that returns a FontFace object. That's interesting.
tabatkins
on 22 Jan 2018
Ah right, a dialog whose content are opaque to user code. Interesting...
@fserb: On mobile the browser would have to implement it's own dialog, from the Web Platform's perspective, it makes no difference whether the dialog comes from the browser or the OS (AFAIK).
junov
on 22 Jan 2018
What I meant to say was that there's no notion of available OS system fonts on mobile, as far as I know.
fserb
on 22 Jan 2018
@fserb That would be the same issue as with the file load / save dialogs. These also would not have existed natively on mobile.
Also, I think many productivity software would make use of this feature, not just image editing, think of complex text layout or printing software.
I think the web is on a turning point from "easy to use, not full featured apps" to full featured desktop like apps which will have a much higher demand on user based configuration choices.
WebGL and WebAssembly make all this possible and it opens the door to creating apps which work everywhere especially combined with stuff like electron and webpack. Now just the browser provided "infrastructure" has to grow with it a bit more. And system fonts are just a big part of it.
markusmoenig
on 22 Jan 2018
Fair points. I'm not opposed to the idea. I'd still have a bit of trouble prioritizing it now, but I'll look further into it.
fserb
on 22 Jan 2018
@fserb Thanks! It would make a big difference to people like us.
markusmoenig
on 22 Jan 2018
I don't want to overburden this request but I just want to point out that if the font dialog would optionally also return the glyph data itself (and with something like https://opentype.js.org), you could actually implement something like Illustrator inside the browser or use it to build 3D data of the fonts to be processed by WebGL (which would be big), i.e. there would be no limit to what you could do.
Again, I would be more than happy with the font dialog itself, just want to point out that something much more could be achieved. Getting the ttf data from the operating system would not be a huge task.
markusmoenig
on 23 Jan 2018
@markusmoenig You should file a separate issue for the font data interface.
junov
on 23 Jan 2018
@junov Done #3390.
markusmoenig
on 24 Jan 2018
<input type=font> would be grate along with a <datalist> suggestion of something like "previous used fonts" would like to see this being pushed forward
jimmywarting
on 13 Apr 2020
annevk
on 6 Aug 2020
Related issues
benjamingr
路
3Comments
holloway
路
3Comments
petamoriken
路
3Comments
NE-SmallTown
路
4Comments
bramus
路
4Comments
Most helpful comment
Hm, so an
<input type=font>that returns a FontFace object. That's interesting.