Search code examples
javascripthtmlbrowser-api

Is there a browser API that tells me preferences (font family, font size, size of focus, etc.) applied to the browser?

I'm wondering if there are APIs to know preferences users applied to browser, such as font-size, font-family, etc.

I wrote this question because I've been asked to apply browser preferences to my HTML page. For example, if user has poor sight and enlarged browser font size, I want to apply that size to my web page.

My goal is something like this:

document.getElementById("myBodyTag").style.fontSize = browser.getCurrentFont()

where 'browser' is the API I'm looking for.

EDIT: The real reason I'm looking for this API is because the client of my project, reading the technical reference of the European Union Accessibility Law, stated that my web application must inherit the platform settings, as you can read in the pic below. enter image description here

In my opinion they didn't get correctly what the document says, because there's an unclear bond between rules to be applied to web pages and rules to be applied to software.

Solution

  • Not sure if this is what you mean, but window.getComputedStyle for a (not in any way modified) document gives you the current preferences a user has set for his/her browser. Something like (try modifiying your browser font style settings and rerun the snippet):

    const nativeStyle = getComputedStyle(document.documentElement);

console.log (`Document font: ${nativeStyle.fontFamily} ${
  nativeStyle.fontStyle} ${nativeStyle.fontSize}`);