What is the process to extract the displayed font using JavaScript?

Question

What is the process to extract the displayed font using JavaScript?

One interesting feature of Google Chrome is that it displays the rendered font in DevTools.

For instance, when you have the CSS code:

font-family: Montserrat, Helvetica, sans-serif;

and the Montserrat font is not available or disabled, Chrome will indicate that Helvetica is actually being rendered:

https://i.sstatic.net/3zhKL.png

But here comes the question: Is there a way to retrieve the rendered font using JavaScript? (even if it only works in Chrome)

Points to consider:

This potential solution proposes using getComputedStyle(...).fontFamily, however, it returns the CSS declaration
```
"Montserrat, Helvetica, sans-serif"
```
rather than the actual font being rendered.
Another suggestion involves using puppeteer, but utilizing this tool may not be necessary if we can achieve the same result solely within DevTools (without puppeteer).

javascript html css google-chrome

Answer 1

Answer №1

Currently, accessing this information from Web-APIs remains a challenge.

The Houdini group is in the midst of ongoing discussions regarding the potential inclusion of a font-metrics API. This API aims to provide detailed font usage data, but it has not yet progressed beyond the proposal stage. The path towards its implementation is expected to be complex and arduous.

Determining the specific fonts being used presents complexities due to the possibility of multiple fonts being employed at various levels within text content. In order to properly expose this information, proposed solutions suggest utilizing handles that contain comprehensive font details, including raw font data for web fonts. dbaron & eae are leading efforts in defining an appropriate API for this purpose.

An example scenario involves using one font for the glyph ̂ (U+0302), while another font may be utilized for the glyph a (U+0061), resulting in a combined glyph like â requiring two distinct fonts.

Current conversations indicate the potential introduction of a Font interface, accessible through the document.measureElement and document.measureText methods. This interface would offer properties such as a DOMString name and a numeric value indicating glyphsRendered. However, these ideas are still in the discussion phase and have yet to advance to draft proposals, signifying further deliberation and refinement are necessary before any concrete steps can be taken towards implementation.

In the absence of definitive Web-API support, alternative methods exist, albeit with limitations. As numerous other Q/A threads explain, strategies involving inspecting rendering sizes or observed pixel output may provide insights into the fonts used, though these tactics are considered unreliable and may not function universally across all scenarios.
For instance, if a custom font on a user's system displays select characters from a standard font, discerning between font fallbacks and intended selections becomes problematic using existing techniques.

Ultimately, full control over font usage and fidelity can best be achieved by employing web-font solutions.

Answer 2

Currently, accessing this information from Web-APIs remains a challenge.

The Houdini group is in the midst of ongoing discussions regarding the potential inclusion of a font-metrics API. This API aims to provide detailed font usage data, but it has not yet progressed beyond the proposal stage. The path towards its implementation is expected to be complex and arduous.

Determining the specific fonts being used presents complexities due to the possibility of multiple fonts being employed at various levels within text content. In order to properly expose this information, proposed solutions suggest utilizing handles that contain comprehensive font details, including raw font data for web fonts. dbaron & eae are leading efforts in defining an appropriate API for this purpose.

An example scenario involves using one font for the glyph ̂ (U+0302), while another font may be utilized for the glyph a (U+0061), resulting in a combined glyph like â requiring two distinct fonts.

Current conversations indicate the potential introduction of a Font interface, accessible through the document.measureElement and document.measureText methods. This interface would offer properties such as a DOMString name and a numeric value indicating glyphsRendered. However, these ideas are still in the discussion phase and have yet to advance to draft proposals, signifying further deliberation and refinement are necessary before any concrete steps can be taken towards implementation.

In the absence of definitive Web-API support, alternative methods exist, albeit with limitations. As numerous other Q/A threads explain, strategies involving inspecting rendering sizes or observed pixel output may provide insights into the fonts used, though these tactics are considered unreliable and may not function universally across all scenarios.
For instance, if a custom font on a user's system displays select characters from a standard font, discerning between font fallbacks and intended selections becomes problematic using existing techniques.

Ultimately, full control over font usage and fidelity can best be achieved by employing web-font solutions.

Answer 3

Answer №2

If nobody has suggested it yet, there is another method to determine the rendered font.

The code snippet below extracts the font-family CSS definition applied to the element and checks each font family in order to determine the first loaded font family, which is most likely the rendered font.

By using the CSS Font Loading API, this process is simplified and supported across browsers (excluding IE). https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API

For instance, consider the following CSS example:

.body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
}

Snippet:

const getRenderedFontFamilyName = ( element ) => {
    // Extract the font families defined in the CSS for the element
    const fontFamilies = window.getComputedStyle( element, null ).getPropertyValue( "font-family" );
    
    // Remove quotes from names and split them into an array
    const fontFamiliesArr = fontFamilies.replaceAll('"', "").split(", ");

    // Find the first loaded font from the array
    return fontFamiliesArr.find( e => document.fonts.check( `12px ${e}`) );
}

Example showcasing how to obtain the rendered font-family of the StackOverflow body:

getRenderedFontFamilyName(document.querySelector('body'));

Answer 4

If nobody has suggested it yet, there is another method to determine the rendered font.

The code snippet below extracts the font-family CSS definition applied to the element and checks each font family in order to determine the first loaded font family, which is most likely the rendered font.

By using the CSS Font Loading API, this process is simplified and supported across browsers (excluding IE). https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API

For instance, consider the following CSS example:

.body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
}

Snippet:

const getRenderedFontFamilyName = ( element ) => {
    // Extract the font families defined in the CSS for the element
    const fontFamilies = window.getComputedStyle( element, null ).getPropertyValue( "font-family" );
    
    // Remove quotes from names and split them into an array
    const fontFamiliesArr = fontFamilies.replaceAll('"', "").split(", ");

    // Find the first loaded font from the array
    return fontFamiliesArr.find( e => document.fonts.check( `12px ${e}`) );
}

Example showcasing how to obtain the rendered font-family of the StackOverflow body:

getRenderedFontFamilyName(document.querySelector('body'));

What is the process to extract the displayed font using JavaScript?

Answer №1

Answer №2

Similar questions

Designing the Background with HTML and CSS

The concept of setting a value is not defined in JavaScript when compared to

The JSON sorting functionality seems to be functioning improperly

Tips for handling uncaught exceptions in Internet Explorer

Acquire information asynchronously in JavaScript while inside a for loop

Organize array elements based on their values - using javascript

To concatenate an array into a single line, you can use the JSON.stringify() method

What is the most effective method for enlarging elements using Javascript?

The CSS media query is failing to function as expected

What is the most effective method for delivering npm packages using django?

"Implementing a loading function on a particular div element within a loop using

What is the best method for styling the "body" of multiple pages in a React.js application to prevent them from overlapping?

The documentation for the 4-11.4 version of Material UI cannot be found anywhere

Issues with footers in IE 10/11 and Edge when using Grid layout

Hide programmer's comments from public view using personalized PHP scripts

What is the best way to transfer a JavaScript variable through a query string from one HTML page to another?

Import .vue single file component into PHP application

Guide to positioning multiple <img> elements within a single <div> container

How can I convert a JSON template to HTML using AngularJS?

Having trouble updating the icon on my website using FontAwsome