How to detect which one of the defined font was used in a web page using Javascript

In this article, you will learn how to detect which font was used in a particular element using Javascript.

Using Javascript fontFamily property.

To check the font family of an element, we will use the Javascript fontFamily property.

Suppose, we have a <div> element with the font family of Arial.

<div id="my-element" style="font-family:Arial">
 Check My font-family using Javascript.
</div>

To determine the font-family of the above <div> element, we have to select the div element using the getElementById() method and store in a variable.

const myVar = document.getElementById('my-element');

Now use the fontFamily property to get the font-family of the selected element div and display the font-family using the document.write() method.

document.write(myVar.style.fontFamily);

Click on the Try it Yourself » button to open the below code in Html Editor.

 <script>
   const myVar = document.querySelector('#my-element');
   document.write(myVar.style.fontFamily);
 </script>

Using getComputedStyle() method.

We can also use the getComputedStyle() method to detect the font-family used in a particular element.

<div id="my-element" style="font-family:Arial">
 Check My font-family using Javascript.
</div>

<script>
const myVar = document.querySelector("#my-element")
document.write(window.getComputedStyle(myVar).getPropertyValue("font-family"))
</script>