-2

Is there a way, using javascript, to display within a web page the font-family being used for a tag? For instance, I would like to show the font-family being used for the h1 tag.

I know I can go into the CSS and simply put the font family on the webpage, but I was hoping for a more programmatic approach in the event someone changed the font-family.

I also know I can go to the browser developer tools and look, but I was trying to simply show it on the page.

MSF004
  • 149
  • 6
  • 1
    `console.log(window.getComputedStyle(document.querySelector('h1')).fontFamily)` – Get Off My Lawn Sep 16 '19 at 15:31
  • @GetOffMyLawn That would only work for inline styles. `getComputedStyle()` is what you need https://stackoverflow.com/questions/7444451/how-to-get-the-actual-rendered-font-when-its-not-defined-in-css – Turnip Sep 16 '19 at 15:33
  • @Turnip Yeah, I just realized that, I changed it. – Get Off My Lawn Sep 16 '19 at 15:35
  • If you are looking for the exact font being rendered when multiple fonts are allowed (such as: `font-family: "Arial, "Helvetica Neue", Helvetica, sans-serif"`) and you want "Helvetica" if it is being rendered on the client, I don't think you can get that. – Get Off My Lawn Sep 16 '19 at 15:38
  • @GetOffMyLawn : that is beautiful. Thank you! I was (obviously) very much over complicating it in my attempts. That is simple and perfect. Thank you! – MSF004 Sep 16 '19 at 15:39

1 Answers1

0

Yep, you just compute the style of the element. Cheers

const tag = document.getElementsByTagName('h1')[0],
      out = document.getElementById('result');

out.innerHTML = getComputedStyle(tag)['font-family'];
h1 {
  font-family: Tahoma, Arial, 'Times New Roman';
}

div {
  color: green;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: underline;
}

div:after {
  content: 'One of these is your font, or potentially none of them, but these are the defaults provided in the css....to be clear.';
  text-transform: none;
  display: block;
  margin-left: .5rem;
  color: black;
}
<h1>HEY HEY HEY</h1>

<br/>

<div id="result"></div>
Chris W.
  • 22,835
  • 3
  • 60
  • 94
  • Sorry didn't bother reading comments at first, but @GetOffMyLawn pointed out, not sure how to for sure grab which font the browser is choosing to render in if there's multiple fallbacks provided. You can on chrome, but I know no way to get it between browsers since there's no standard API to do so. – Chris W. Sep 16 '19 at 16:32
  • Your answer is potentially wrong. It simply prints out a substring (from position `0` to first `,` (comma) of the computed style of `font-family` property), which might have absolutely nothing to do with the font being used on the element. The browser will use any of the subsequent options if none of the previous ones is available or none of them, using a system/browser font, if none of the specified ones is available. – tao Sep 16 '19 at 16:35
  • @AndreiGheorghiu read the comment directly above yours amigo. – Chris W. Sep 16 '19 at 16:36
  • Your comment wasn't there when I started writing mine. I thought pointing it out for future users might be useful. – tao Sep 16 '19 at 16:37
  • 1
    Cheers to that! Edited answer to make it a bit more clear. – Chris W. Sep 16 '19 at 16:38