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.

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.

• javascript
• html
• html5-canvas

• The client's device installed fonts is the one's available, which might be not that easy to detect from javascript. – Asons Commented Dec 5, 2018 at 18:05
• 2 Exactly the same as the ones you can use from css i.e any, since you can load them from font-face declarations. – Kaiido Commented Dec 5, 2018 at 23:59
• I think the best way to do this is to specify a font if you want, but make you sure you add a websafe standard as a back up. So I would write font-family: Helvetica, Arial, sans-serif; Sans-serif will always work even if the other two are absent. – lharby Commented Dec 6, 2018 at 12:23

2 Answers 2

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.

And for the record, there is nothing wrong with embedding also the "known" fonts like Arial, Helvetica, Georgia etc -- so that you can have better consistency of rendering (between user agents, platforms they rely on etc). It's not something a regular Web page would need, but if your principal feature is drawing and reproducing text in a consistent manner, font embedding looks to be a must-have.

A list of Web Safe fonts:

Arial (sans-serif)
Verdana (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive)

https://www.w3schools.com/cssref/css_websafe_fonts.php

You may use them to set css.font like so:

ctx.font = "32px trebuchet ms"

Notice how it's case-insensitive and that you do include spaces as they are.