Detect Whether a Font is Installed

by kirupa   |   1 September 2012

  Have questions? Discuss this Web Development tutorial with others on the forums.

There will be times when you will want to know whether a particular font is available on a user's machine. Check out (and play with) the following example:


Click on the check button to see if Times New Roman is installed on your system. You can also replace the default Times New Roman text with the name of another font you are curious about and painstakingly click on the check button again. If the font you specified exists, you will see a dialog telling you so:

is the font available?

If the font you specified does not exist, a dialog will tell you that also. All of this is done entirely using just a few lines of JavaScript with no shenanigans involving applying/removing styles or modifying the DOM.

Grab the Code

The code for detecting whether a particular font is available is shown below:

// Call this function and pass in the name of the font you want to check for availability.
function doesFontExist(fontName) {
	// creating our in-memory Canvas element where the magic happens
	var canvas = document.createElement("canvas");
	var context = canvas.getContext("2d");
	// the text whose final pixel size I want to measure
	var text = "abcdefghijklmnopqrstuvwxyz0123456789";
	// specifying the baseline font
	context.font = "72px monospace";
	// checking the size of the baseline text
	var baselineSize = context.measureText(text).width;
	// specifying the font whose existence we want to check
	context.font = "72px '" + fontName + "', monospace";
	// checking the size of the font we want to check
	var newSize = context.measureText(text).width;
	// removing the Canvas element we created
	delete canvas;
	// If the size of the two text instances is the same, the font does not exist because it is being rendered
	// using the default sans-serif font
	if (newSize == baselineSize) {
		return false;
	} else {
		return true;

Add this code to your page (or to a script file) and simply call the doesFontExist function and pass in the name of the font you are looking for. Below is an example:

doesFontExist("Comic Sans MS");

That's all there is to it. You can see a fully working example at the Does This Font Exist page - the same one the above example is based on.

Overview of the Code

As you can see, our code itself is pretty simple. You just need to know how to do some basic things with the HTML5 Canvas API. What may be less simple is the madness that our code represents and how it helps you figure out whether a font is available or not.

The way our code works is by taking advantage of the Canvas element and the APIs it provides for drawing and measuring the size of what you draw. First, I virtually draw two pieces of text.

One piece of text is drawn using a default monospace font:

displaying some monospace text

The code for this looks as follows:

context.font = "72px monospace";

 The other piece of text is drawn using the font that you are interested in checking on along with the default monospace font in case that font doesn't exist:

context.font = "72px '" + fontName + "', monospace";

Let's walk through an example. For our example, we want to check whether the Corbel font can be used. Below is what our sample text using Corbel looks like:

text in Corbel

Now, here is the magic that helps us get what we want. I use the Canvas element's measureText function to measure the size (in pixels) of both pieces of text. I store the size of our monospace text in a variable called baselineSize. I store the size of our text drawn using Corbel as newSize:

the sizes of both pieces of text

Next, I check whether the sizes stored in baselineSize and newSize are the same or different. Now, why would I do this?

If the Corbel font exists on your system, then drawing some text using it will display using that font itself. This means that it has a size that depends on the parameters unique to Corbel. Similarly, your monospace text will display using a size that corresponds to the default monospace font used.

If the sizes of both are different, like you can see in the above image, this means that each piece of text is being displayed using a different font: monospace and Corbel. You wouldn't get a different size if the font you are curious about does not exist. You would instead get both pieces of text displaying using the fallback monospace font...such as what you will see below:

the font does not exist

You will have two pieces of text displayed at the exact same pixel size. That is a dead giveaway that the font you are curious about doesn't exist and the fallback font monospace font is being used instead.

Be Careful When Checking Actual Monospace Fonts

The only time you may get a false negative is when you actually specify a monospace font like Courier New or Consolas that is also set as the default monospace font for your browser. In such cases, your font will exist but it will also display in the same size as the text specified to display only as monospace. Using our current logic, this means that despite your font existing, the code will tell you otherwise.

I don't envision these situations being too common, but do look out for that case.


Well, that's all there is to this little deconstruction that shows how you can use the Canvas APIs to figure out whether a font is available for your browser to use. Canvas is part of the HTML5 bucket of new things, so older IE browsers will not support it. If you care about the elderly (browsers), look into using the excellent explorercanvas library to bring the joys of Canvas to a larger audience unwilling or unable to upgrade to a modern browser.

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out


Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Brought to you by...

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Awesome and high-performance web hosting!
new books - yay!!!