0

I'm using the getComputedStyles function to get the styles of a certain text element on a page. Whenever I try to get the font family, instead of getting a single font family name, I get multiple ones, especially the generic ones like Helvetica, SegoeUI, Noto, etc.. How can I get it to show me only the first font family?

I've tried using .slice and fontFamily[0] but that only gets me the first letter not the first element

Code

const getStyles = getComputedStyle(textElement);
const family = getStyles.fontFamily;
const newFont = family;

console.log(newFont);
Hitman DD
  • 47
  • 1
  • 11
  • 1
    Does this (unfortunately) answer your question? [How to get the actual rendered font when it's not defined in CSS?](https://stackoverflow.com/a/13845553/283366) – Phil Dec 14 '21 at 00:22
  • I see. But no this doesn't really answer my question. I'm aware that in a case like this there might be no way of knowing the exact font that is being used from the list and I'm totally okay with that. What I simply want to know is how I can just display the very first font of that list, that's all I want... – Hitman DD Dec 14 '21 at 15:31
  • What is the actual format you get? Is it a comma-separated list? – Phil Dec 14 '21 at 17:32
  • Yes, it is a comma separated list e.g. Inter, Arial, "Segoe UI", Noto. – Hitman DD Dec 15 '21 at 02:19
  • Still no answer? @Phil – Hitman DD Dec 16 '21 at 13:50
  • Split on comma? `str.split(", ")[0]` – Phil Dec 16 '21 at 18:35
  • Yup, works like a charm! Thanks mate – Hitman DD Dec 16 '21 at 19:26

0 Answers0