Webfonts error (TypeError: can't access property "trim", font is undefined) #566
Description
Attempting to call .toPng, .toJpeg, .toSvg, etc on an element is erroring out with the following error:
Uncaught (in promise) TypeError: can't access property "trim", font is undefined
normalizeFontFamily embed-webfonts.ts:206
cssTexts embed-webfonts.ts:237
getWebFontCSS embed-webfonts.ts:236
embedWebFonts embed-webfonts.ts:259
toSvg index.ts:21
toCanvas index.ts:33
toJpeg index.ts:83This is the raw HTML of the element I'm attempting to convert
<div id="_r_0_" class="Wrapper_w8acjom">
<div class="UpperRow_ufcmqxf">
<div class="Container_c1sjvieb">
<div>
<picture class="HabitatIcon_h1hkibd0"><img alt="wetland habitat" src="../../../assets/wetland.png"></picture>
</div><span class="Wrapper_w1xst13g">
<picture class="Wrapper_w1y3x8e8"><img alt="fish" src="../../../assets/fish.png"></picture>+<picture
class="Wrapper_w1y3x8e8"><img alt="fish" src="../../../assets/fish.png"></picture>
</span>
</div>
<div class="CardName_c1nw66rb"><span class="title">Gadwall</span><span class="latin">Mareca strepera</span></div>
</div>
<div class="MiddleRow_my11ext">
<div class="Wrapper_w4scyw2">
<div class="victory-points">5<picture class="Wrapper_w1y3x8e8"><img alt="feather for victory points"
src="../../../assets/point.png"></picture>
</div>
<div class="nest">
<picture class="Wrapper_w1y3x8e8"><img alt="nest" src="../../../assets/ground.png"></picture>
</div>
<div class="eggs">
<picture class="Wrapper_w1y3x8e8"><img alt="egg" src="../../../assets/smallegg.png"></picture>
<picture class="Wrapper_w1y3x8e8"><img alt="egg" src="../../../assets/smallegg.png"></picture>
<picture class="Wrapper_w1y3x8e8"><img alt="egg" src="../../../assets/smallegg.png"></picture>
</div>
</div>
<picture style="--w1k7ji9o-0: 1; --w1k7ji9o-1: 0; --w1k7ji9o-2: 0; transform: scale(1.4) translate(-9%, 15%);"
class="Wrapper_w1k7ji9o"><img src="blob:http://localhost:5173/9d0fe1b5-6501-44e6-bad3-d6e28eb8bdd8"></picture>
<div class="wingspan">90cm<picture class="Wrapper_w1y3x8e8"><img alt="wingspan icon"
src="../../../assets/wingspan.png"></picture>
</div>
</div>
<div class="BottomRow_b1xu722g">
<div style="background-image: url("../../../assets/pink.png");" class="PowerWrapper_p1mbcvav"><span>ONCE
BETWEEN TURNS</span>: <span class="PowerText_p10c47z0"><span class="Wrapper_w1xst13g">When another player takes
the "gain food" action, choose a <picture class="Wrapper_w1y3x8e8"><img alt="wild"
src="../../../assets/wild.png"></picture> they gained from the birdfeeder and cache 1 on this bird from
the supply.</span></span></div>
<div class="flavor">Gadwalls are known for their ability to steal food from diving ducks.</div>
</div>
</div>And here's a screenshot of it
Things I've tried
I've edited the getWebFontCSS function to log this right before the part where it errors out
console.log(node, rules, rules.map(rule => rule.style));From this I see that it is indeed the Wrapper_w8acjom node that errors out and it seems to have to do with web fonts I'm getting from google fonts. The rules are all CSSFontFaceRules and they look like
As you can see when we do rule(CSSFontFaceRule).style(CSSStyleDeclaration).fontFamily inside of getWebFontCSS we end up with all 5 of them being undefined.
Adding .filter(rule => rule.style.fontFamily) before .filter((rule) => usedFonts.has(normalizeFontFamily(rule.style.fontFamily))) allows the svg to successfully complete but loses the fonts
Additional Context
These are the relevant web font rules I have
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/barlowcondensed/v12/HTx3L3I-JCGChYJ8VI-L6OO_au7B6xHT2lv0tKk.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 500;
src: url(https://fonts.gstatic.com/s/barlowcondensed/v12/HTxwL3I-JCGChYJ8VI-L6OO_au7B4-Lwz3bWuYMBYro.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/barlowcondensed/v12/HTxwL3I-JCGChYJ8VI-L6OO_au7B46r2z3bWuYMBYro.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Patrick Hand';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/patrickhand/v24/LDI1apSQOAYtSuYWp8ZhfYe8XsLLubg58w.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Satisfy';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/satisfy/v22/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}Your Environment
- html-to-image: 1.11.13
- OS: macOS Tahoe 26
- Browser: Firefox 145.0.2