Supported fonts in HTML5 Canvas text

Question

With the HTML Canvas API we can draw text using a selected font:

var ctx = document.getElementById("canvas").getContext("2d");
ctx.font = '20px Arial';

What are the other options I have other than "Arial", without including any other fonts?

I don't want to detect fonts using scripting. I just want a list of fonts supported by if not all, then at least most browsers for HTML canvas elements.

Answer 1

What are the other options I can place instead of Arial without including any other fonts?

According to the HTML Living Standard by WHATWG, the Canvas API allows use of any font that can otherwise be used by the user agent with a CSS stylesheet, this fact is evident from the following paragraph in the linked specification, among others:

Font family names must be interpreted in the context of the font style source object when the font is to be used; any fonts embedded using @font-face or loaded using FontFace objects that are visible to the font style source object must therefore be available once they are loaded.

If you ask me, it follows from the above that all the fonts available to the user agent and any font it can download and use per CSS font loading and CSS font embedding specifications, can be used. So yes, the Canvas API does use CSS font embedding.

I just want a list of fonts supported by if not all most browsers for html canvases.

Save for embedded fonts, there is no such list, because there is no Web API that enumerates the fonts available to the user on their system, so you are left with a wildcard here.

There is the notion of "Web-safe fonts", but it's not a definite list and has not been standardized to my knowledge. It's just the most common known subset of all fonts that all user agents most likely can render where the typeface resembles the original. For instance, the "Webdings" font face as referred to by a user agent may be loaded from the Webdings TrueType font on Microsoft Windows, and some other on Linux-based operating systems, where the two would be designed to approximate the same look, where glyph N would be a picture of a bat, for instance, but it need not be exactly the same image. Same story for actual text font faces -- serif typefaces would stay serif, gothic would stay gothic, and so on.

A user agent and/or the platform it runs on may even conveniently map common font names like "Arial" (or "Webdings", like with the above example), that it otherwise does not have available, to a font it has available that resembles the Arial glyphs, but it's entirely at the discretion of the software stack.

If your actual goal is to reliably draw text with known outlines, you are best off using font embedding techniques.

If you are writing a drawing application with the Web APIs and JavaScript, and absolutely want to include system fonts, you can use a text input box where the user can type the font they wish to use -- since you have no access to the font set, a menu would not be appropriate, although you may use the datalist element to provide the user with some popular suggestions (like "Arial", "Helvetica", "Georgia", etc). If the font they type in is available, the user agent will be able to use it.