Hit enter after type your search item

What is font-family applied in web page? Find by jQuery font detect plug-in: 4 demos

The font detector plug-in based on jQuery

In some scenarios, you may need to find out what the font is applied to different elements of your WebPages in the user 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 if 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:


 

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>


 

A demo with monospace font

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

jquery font identification

See online demo and code

The result is shown as monospace.

A demo with the first font with 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 what the font browser applied in that case.

jquery font detection wrong

See online demo and code

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

A demo of setting font in 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 for showing you may use this plug-in for inline, internal or external CSS as well.

jquery font detection inline

See online demo and code

The CSS:


 

The markup:

 


 

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.

This div height required for enabling the sticky sidebar