Font families being incorrectly identified.

[tascord]

Please make sure you are testing with the latest release of html2canvas.
Old versions are not supported and issues reported for them will be closed.

Please follow the general troubleshooting steps first:

• You are using the latest version
• You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

The !important CSS selector seems to cause unexpected issues when h2c decides which font should be used. Fiddle.

When using the following selector to apply a font to all but font-awesome's icons, h2c fails to correctly identify which font should be used to render the icon's <i/> tags. This is in contrast to how the DOM correctly applies fonts.

*:not(i) {
    font-family: "Montserrat", sans-serif !important;
}

Html2Canvas Generated Image without !important

Html2Canvas Generated Image with !important

Specifications:

• html2canvas version tested with: 1.4.1
• Browser & version: Firefox 124.0, Edge 112.0.2365.92, Chrome 123.0.6312.86, Chromium 122.0.6261.128
• Operating system: Linux (Fedora Silverblue 39.20240321.0)

[tascord]

html2canvas/src/dom/node-parser.ts

Line 22 in 6020386

parent.textNodes.push(new TextContainer(context, childNode, parent.styles));

The issue seems to be related to the fact that parent element, a <HTML2CANVASPSEUDOELEMENT/> fails to inherit correct styles that are then parsed to the TextContainer when the !important keyword is present.