What is font-family applied on web page? Find by jQuery

The font detector plug-in based on jQuery

In some scenarios, you may need to find out what font is applied to different elements of your web pages on the user’s computer. Based on that, you may perform certain actions like adjusting the font-size etc.

The jQuery-based plug-in (jquery-detectfont) can be used for that purpose.

See the demos below where I used the font in different ways; by using the style attribute as well as setting in the <style> section under <head> tag and see how the font-family value is returned.

A demo of using Arial font in style attribute

In this example, the font-family is applied in the style attribute of the <div> tag. Three fonts are assigned in this order:

style=”font-family: ‘Arial’, ‘Helvetica’,sans-serif;”

See the result by clicking the link or image below where you may also see the complete code:

jquery font detection

See online demo and code

You can see the last line showing the result after executing the jQuery code:

The font applied is: Arial

The markup used in the example:

        <h3>A demo of font detection by jQuery</h3>

         <pre>style="font-family:'Arial','Helvetica',sans-serif;"</pre>   

        <div class="example" style="font-family:'Arial','Helvetica',sans-serif;">

            The demo paragaph where font applied by the browser is detected by using jQuery font detection plug-in.

        </div>

        <p class="result">The font applied is: <strong></strong></p>

The script:

 <script src=”https://code.jquery.com/jquery-2.2.2.min.js”></script>

<script src=”js/jquery.detectfont/jquery.detectfont.min.js”></script>

        <script>

            (function($){

                $('.example').each(function() {

                    $(this).next('.result').find('strong').text($(this).detectFont());

                });

            })(jQuery);

        </script>

A demo with the monospace font

In this demo, the monospace font is assigned as the first font in the CSS font-family property:

jquery font identification

Code:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

        <h3>A demo of font detection by jQuery</h3>
         <pre>style="font-family:'monospace','Helvetica',sans-serif;"</pre>    
        <div class="example" style="font-family:'monospace','Helvetica',sans-serif;">
            The demo paragaph where font applied by the browser is detected by using jQuery font detection plug-in. 
        </div>
        <p class="result">The font applied is: <strong></strong></p>
        
 
        
        <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
        <script src="js/jquery.detectfont/jquery.detectfont.min.js"></script>
        <script>
            (function($){
                $('.example').each(function() {
                    $(this).next('.result').find('strong').text($(this).detectFont());
                });
            })(jQuery);
        </script>
</body>
</html>

The result is shown as monospace.

A demo with the first font with the wrong value

In this demo, the first font name is some random characters that do not exist. The second font is Open Sans while the third is monospace. Have a look at what the font browser applied in that case.

jquery font detection wrong

Markup and jQuery:

<body>

        <h3>A demo of font identification by jQuery</h3>
         <pre>style="font-family:hcvhnvcghvmhj,'Open Sans',monospace;"</pre>    
        <div class="example" style="font-family:hcvhnvcghvmhj,'Open Sans',monospace;">
            The demo paragaph where font applied by the browser is detected by using jQuery font detection plug-in. 
        </div>
        <p class="result">The font applied is: <strong></strong></p>
        
 
        
        <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
        <script src="js/jquery.detectfont/jquery.detectfont.min.js"></script>
        <script>
            (function($){
                $('.example').each(function() {
                    $(this).next('.result').find('strong').text($(this).detectFont());
                });
            })(jQuery);
        </script>
</body>

You can see, the jQuery font identification plug-in returned monospace this time, although this is the third option. The browser did not apply the first two fonts where I was executing this code.

A demo of setting font in the style section

Rather than assigning the font-family CSS property in the style attribute of a div or some other tag, in this example, the font-family is set in the <style> tag to show you may use this plug-in for inline, internal or external CSS as well.

jquery font detection inline

The CSS:

<style>

.txtfont{

    font-family:Verdana;

}

</style>

The markup:

      <h3>A demo of font identification by jQuery</h3>

        <div class="example txtfont">

            The demo paragaph where font applied by the browser is detected by using jQuery font detection plug-in.

        </div>

        <p class="result">The font applied is: <strong></strong></p>

For setting up this plug-in, download it from the Github website. Include the reference of the JS file above the </body> closing tag and use this as shown in the demos.