{"id":2133,"date":"2016-07-18T07:32:07","date_gmt":"2016-07-18T07:32:07","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=2133"},"modified":"2023-10-25T09:33:36","modified_gmt":"2023-10-25T09:33:36","slug":"what-is-font-family-applied-in-web-page-find-by-jquery-font-detect-plug-in-4-demos","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/what-is-font-family-applied-in-web-page-find-by-jquery-font-detect-plug-in-4-demos\/","title":{"rendered":"What is font-family applied on web page? Find by jQuery"},"content":{"rendered":"

The font detector plug-in based on jQuery<\/strong><\/h3>\n

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.<\/p>\n

The jQuery-based plug-in (jquery-detectfont<\/strong>) can be used for that purpose.<\/p>\n

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.<\/p>\n

A demo of using Arial font in style attribute<\/strong><\/h3>\n

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

style=”font-family: ‘Arial’, ‘Helvetica’,sans-serif;”<\/p><\/blockquote>\n

See the result by clicking the link or image below where you may also see the complete code:<\/p>\n

\"jquery<\/p>\n

See online demo and code<\/strong><\/a><\/h6>\n

You can see the last line showing the result after executing the jQuery code:<\/p>\n

The font applied is: Arial<\/strong><\/p><\/blockquote>\n

The markup used in the example:<\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <h3>A demo of font detection by jQuery<\/h3>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <pre>style=\"font-family:'Arial','Helvetica',sans-serif;\"<\/pre>\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"example\" style=\"font-family:'Arial','Helvetica',sans-serif;\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 The demo paragaph where font applied by the browser is detected by using jQuery font detection plug-in.\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <p class=\"result\">The font applied is: <strong><\/strong><\/p><\/pre>\n
The script:<\/p>\n
\u00a0<script src=”https:\/\/code.jquery.com\/jquery-2.2.2.min.js”><\/script><\/p>\n
<script src=”js\/jquery.detectfont\/jquery.detectfont.min.js”><\/script><\/p><\/blockquote>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <script>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 (function($){\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('.example').each(function() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(this).next('.result').find('strong').text($(this).detectFont());\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 })(jQuery);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/script><\/pre>\n
A demo with the monospace font<\/strong><\/h3>\n
In this demo, the monospace<\/strong> <\/em>font is assigned as the first font in the CSS font-family property:<\/p>\n
\"jquery<\/p>\n
Code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\r\n<\/head>\r\n<body>\r\n\r\n        <h3>A demo of font detection by jQuery<\/h3>\r\n         <pre>style=\"font-family:'monospace','Helvetica',sans-serif;\"<\/pre>    \r\n        <div class=\"example\" style=\"font-family:'monospace','Helvetica',sans-serif;\">\r\n            The demo paragaph where font applied by the browser is detected by using jQuery font detection plug-in. \r\n        <\/div>\r\n        <p class=\"result\">The font applied is: <strong><\/strong><\/p>\r\n        \r\n \r\n        \r\n        <script src=\"https:\/\/code.jquery.com\/jquery-2.2.2.min.js\"><\/script>\r\n        <script src=\"js\/jquery.detectfont\/jquery.detectfont.min.js\"><\/script>\r\n        <script>\r\n            (function($){\r\n                $('.example').each(function() {\r\n                    $(this).next('.result').find('strong').text($(this).detectFont());\r\n                });\r\n            })(jQuery);\r\n        <\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
The result is shown as monospace.<\/p>\n
A demo with the first font with the wrong value<\/strong><\/h3>\n
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.<\/p>\n
\"jquery<\/p>\n
Markup and jQuery:<\/strong><\/p>\n
<body>\r\n\r\n        <h3>A demo of font identification by jQuery<\/h3>\r\n         <pre>style=\"font-family:hcvhnvcghvmhj,'Open Sans',monospace;\"<\/pre>    \r\n        <div class=\"example\" style=\"font-family:hcvhnvcghvmhj,'Open Sans',monospace;\">\r\n            The demo paragaph where font applied by the browser is detected by using jQuery font detection plug-in. \r\n        <\/div>\r\n        <p class=\"result\">The font applied is: <strong><\/strong><\/p>\r\n        \r\n \r\n        \r\n        <script src=\"https:\/\/code.jquery.com\/jquery-2.2.2.min.js\"><\/script>\r\n        <script src=\"js\/jquery.detectfont\/jquery.detectfont.min.js\"><\/script>\r\n        <script>\r\n            (function($){\r\n                $('.example').each(function() {\r\n                    $(this).next('.result').find('strong').text($(this).detectFont());\r\n                });\r\n            })(jQuery);\r\n        <\/script>\r\n<\/body><\/pre>\n
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.<\/p>\n
A demo of setting font in the style section<\/strong><\/h3>\n
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.<\/p>\n
\"jquery<\/p>\n
The CSS:<\/strong><\/p>\n
<style>\r\n\r\n.txtfont{\r\n\r\n\u00a0\u00a0\u00a0 font-family:Verdana;\r\n\r\n}\r\n\r\n<\/style><\/pre>\n
The markup:<\/strong><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 <h3>A demo of font identification by jQuery<\/h3>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"example txtfont\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 The demo paragaph where font applied by the browser is detected by using jQuery font detection plug-in.\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <p class=\"result\">The font applied is: <strong><\/strong><\/p><\/pre>\n
For setting up this plug-in, download it from the Github website<\/a>. Include the reference of the JS file above the <\/body> closing tag and use this as shown in the demos.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2137,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[47],"yoast_head":"\nWhat is font-family applied on web page? Find by jQuery<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/what-is-font-family-applied-in-web-page-find-by-jquery-font-detect-plug-in-4-demos\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is font-family applied on web page? Find by jQuery\" \/>\n<meta property=\"og:description\" content=\"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 ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/what-is-font-family-applied-in-web-page-find-by-jquery-font-detect-plug-in-4-demos\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-18T07:32:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-25T09:33:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/07\/91.0_4-jquery-font-detection-inline.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"461\" \/>\n\t<meta property=\"og:image:height\" content=\"123\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/what-is-font-family-applied-in-web-page-find-by-jquery-font-detect-plug-in-4-demos\/\",\"url\":\"https:\/\/www.jquery-az.com\/what-is-font-family-applied-in-web-page-find-by-jquery-font-detect-plug-in-4-demos\/\",\"name\":\"What is font-family applied on web page? Find by jQuery\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-07-18T07:32:07+00:00\",\"dateModified\":\"2023-10-25T09:33:36+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/what-is-font-family-applied-in-web-page-find-by-jquery-font-detect-plug-in-4-demos\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/what-is-font-family-applied-in-web-page-find-by-jquery-font-detect-plug-in-4-demos\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/what-is-font-family-applied-in-web-page-find-by-jquery-font-detect-plug-in-4-demos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is font-family applied on web page? Find by jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is font-family applied on web page? Find by jQuery","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/what-is-font-family-applied-in-web-page-find-by-jquery-font-detect-plug-in-4-demos\/","og_locale":"en_US","og_type":"article","og_title":"What is font-family applied on web page? Find by jQuery","og_description":"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 ... Read more","og_url":"https:\/\/www.jquery-az.com\/what-is-font-family-applied-in-web-page-find-by-jquery-font-detect-plug-in-4-demos\/","article_published_time":"2016-07-18T07:32:07+00:00","article_modified_time":"2023-10-25T09:33:36+00:00","og_image":[{"width":461,"height":123,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/07\/91.0_4-jquery-font-detection-inline.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/what-is-font-family-applied-in-web-page-find-by-jquery-font-detect-plug-in-4-demos\/","url":"https:\/\/www.jquery-az.com\/what-is-font-family-applied-in-web-page-find-by-jquery-font-detect-plug-in-4-demos\/","name":"What is font-family applied on web page? Find by jQuery","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-07-18T07:32:07+00:00","dateModified":"2023-10-25T09:33:36+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/what-is-font-family-applied-in-web-page-find-by-jquery-font-detect-plug-in-4-demos\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/what-is-font-family-applied-in-web-page-find-by-jquery-font-detect-plug-in-4-demos\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/what-is-font-family-applied-in-web-page-find-by-jquery-font-detect-plug-in-4-demos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"What is font-family applied on web page? Find by jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2133"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=2133"}],"version-history":[{"count":7,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2133\/revisions"}],"predecessor-version":[{"id":10951,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2133\/revisions\/10951"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/2137"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=2133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=2133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=2133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}