The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Short answer: the missing or malformed fi in an html2canvas image can be caused by the font’s standard OpenType ligature substitution. As a targeted test, disable the liga feature on the element you capture, then render it again. The least disruptive version applies that change inside html2canvas’s documented onclone callback, so the live page keeps its normal typography. This is a community-reported workaround, not a universal guarantee; verify it with your exact font, browser, and html2canvas version.
What is actually going wrong?
Fonts can replace adjacent characters with a single glyph. With a standard fi ligature, the letters are still textually “f” and “i”, but the font supplies a combined glyph for display. The browser may draw that substitution correctly while the canvas-rendering path used by html2canvas produces a missing, clipped, or visibly incorrect result.
The same symptom has been reported for ff and fl. An html2canvas project issue opened on March 30, 2016 records those combinations missing from an exported JPEG, while a March 27, 2018 Stack Overflow answer to the specific fi question recommends disabling liga. Neither report identifies a single affected version or browser, so do not assume every html2canvas installation is affected.
First, reproduce the exact failure
- Use the same phrase that fails in production, including the exact word containing
fi. - Record the font family, weight, style, browser and operating system, and installed html2canvas version.
- Compare the ordinary browser rendering with the generated canvas or image. If the DOM itself shows a wrong glyph, fix the font or CSS first; html2canvas cannot repair text that the browser is already drawing incorrectly.
- Test a short control string such as
office fish affineand a second font. If only one font fails, the font’s shaping path is a stronger suspect than your application text.
This controlled reproduction matters because the historical reports do not establish a universal affected-version range. A result that works in Chrome with one webfont may not be identical in Firefox, Safari, a system font, or a different html2canvas release.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problems#1 Best Overall
- USB-C 2-in-1 storage OTG: The Lexar JumpDrive Dual Drive D40E features USB Type-A and Type-C connectors in a slim, portable form factor for easy device compatibility
- Transfer speeds up to 100MB/s: Based on internal testing, performance may vary depending upon the host device, interface, and usage conditions. 1MB=1,000,000 bytes
- Plug and Play: Widely compatible with USB Type-C smartphones, tablets, laptops, Macs, and traditional Type-A devices, no software installation required. The 360° swivel design allows for easy switching between connectors without the hassle of losing a cap
- Durable & Compact: The Lexar D40E USB memory stick features a metal enclosure, withstands temperatures from 0° to 50° C (32°F to 122°F), and is lightweight at 26g with dimensions of 70.4 x 16.9 x 11.7mm
- Security & Warranty: Securely protects files using an advanced security software solution with 256-bit AES encryption. Backed by a Lexar 3-year limited warranty
Quick fix: turn off the standard ligature
Apply the declaration to the element being captured before calling html2canvas:
const el = document.getElementById('myElement');
el.style.fontFeatureSettings = '"liga" 0';
html2canvas(el).then(canvas => {
document.body.appendChild(canvas);
});The value "liga" 0 asks the browser not to use the font’s standard ligature feature for that element. This is the shortest workaround reported for the exact fi symptom. It changes the live element, however, so you may briefly see unligated text or accidentally leave the style in place if your code does not restore it.
Safer fix: apply the change with onclone
html2canvas documents onclone as a callback for modifying the cloned document used for rendering without changing the original DOM. Use it when the page must retain its normal typography:
const source = document.getElementById('myElement');
html2canvas(source, {
onclone: (clonedDocument) => {
const clonedElement = clonedDocument.getElementById('myElement');
if (clonedElement) {
clonedElement.style.fontFeatureSettings = '"liga" 0';
}
}
}).then(canvas => {
const link = document.createElement('a');
link.download = 'capture.png';
link.href = canvas.toDataURL('image/png');
link.click();
});When the target has no stable ID
Give the capture target a stable identifier, or select the matching node in the cloned document with the same class or data attribute. Do not query the original document inside onclone; the callback’s purpose is to edit the cloned document.
Recommended Free Tools
Rank #2
- 2 in 1: USB C + USB 3.0, 32GB usb c flash drive has dual ports, usb 3.0 port is applied to all devices which have usb 3.0 interface and usb c port is widely used in all Android smartphones with OTG function
- High Speed USB 3.0: Read speed up to 90 MB/s, Write speed up to 30 MB/s, the speed of USB 3.0 interface is faster than USB 2.0, save time to wait, increases work productivity. Note: Speed will be limited if you use the USB key in the USB 2.0 interface
- Large Compatibility: The USB 3.0 Connector is compatible with USB 3.0 & USB 2.0 backward USB 1.1 devices, such as Laptop, Desktop, Car Audio, Tablet, TV, Speakers, Projector. USB-C port is compatible with all Android Smartphones
- Expand Storage: Good performance in storing, transferring and sharing digital data with families, friends, colleagues, customers. It can expand the capacity of smartphone, you can watch movies or share pictures when you go on vacation with your family
- Note: Make sure your smartphone is equipped with OTG function and need to open OTG function in Settings when you plug memory stick, then you can transfer easily data bewteen different devices
const source = document.querySelector('[data-capture-card]');
html2canvas(source, {
onclone: (doc) => {
const copy = doc.querySelector('[data-capture-card]');
if (copy) copy.style.fontFeatureSettings = '"liga" 0';
}
});When other OpenType declarations are present
Check the computed styles and stylesheet rules for font-feature-settings, font-variant-ligatures, and shorthand font declarations. A later rule can override the inline value. Keep the test narrowly scoped: disable only liga first, then compare the output. Do not remove unrelated kerning, spacing, or shaping settings unless a separate test shows they are involved.
Make sure the font is ready before capture
A screenshot taken while a webfont is still loading can use a fallback font and produce a result that looks like a ligature bug. Wait for the document’s font set before invoking html2canvas, then apply the workaround:
async function captureCard() {
if (document.fonts && document.fonts.ready) {
await document.fonts.ready;
}
const card = document.getElementById('myElement');
return html2canvas(card, {
onclone: (doc) => {
const copy = doc.getElementById('myElement');
if (copy) copy.style.fontFeatureSettings = '"liga" 0';
}
});
}
captureCard().then(canvas => {
document.body.appendChild(canvas);
});If the font is loaded by a framework or injected stylesheet, wait for that application-specific promise as well. Capture only after the browser’s computed font family, weight, and style match the intended values.
Live-DOM and cloned-DOM approaches compared
| Approach | What changes | Advantages | Risks and checks |
|---|---|---|---|
| Inline style before capture | The real element receives fontFeatureSettings: "liga" 0. |
Smallest amount of code and easy to test. | The page can visibly change; restore the previous value if the element remains on screen. |
onclone |
Only html2canvas’s render copy receives the declaration. | Preserves the original DOM and is easier to keep isolated in production. | Confirm the installed version invokes onclone as documented and that your selector finds the cloned element. |
Choose the first method for a quick diagnosis and the second for a production capture path where changing the page is unacceptable.
Rank #3
- USB-C 2-in-1 storage OTG: The Lexar JumpDrive Dual Drive D40E features USB Type-A and Type-C connectors in a slim, portable form factor for easy device compatibility
- Transfer speeds up to 100MB/s: Based on internal testing, performance may vary depending upon the host device, interface, and usage conditions. 1MB=1,000,000 bytes
- Plug and Play: Widely compatible with USB Type-C smartphones, tablets, laptops, Macs, and traditional Type-A devices, no software installation required. The 360° swivel design allows for easy switching between connectors without the hassle of losing a cap
- Durable & Compact: The Lexar D40E USB memory stick features a metal enclosure, withstands temperatures from 0° to 50° C (32°F to 122°F), and is lightweight at 26g with dimensions of 70.4 x 16.9 x 11.7mm
- Security & Warranty: Securely protects files using an advanced security software solution with 256-bit AES encryption. Backed by a Lexar 3-year limited warranty
If disabling liga does not work
Check whether it is really a ligature failure
Render the same word with a different font and with a phrase that contains no ligatures. If every font fails, investigate the capture pipeline, scaling, or a broader text-rendering problem. If only one font fails, compare its regular and bold files and verify that the browser actually downloaded the expected files.
Inspect spacing and transforms separately
A separate html2canvas issue opened May 26, 2019 concerns negative letter-spacing in Chrome on Windows 10. That report also says letterRendering: true did not resolve its symptom. Negative spacing, transforms, fractional coordinates, and unusual text styles can therefore mimic a glyph-shaping defect. Remove those styles temporarily and test the plain element. Do not present letterRendering as the proven fix for fi; the current html2canvas configuration reference checked September 29, 2026 does not list it as a current option.
Confirm the clone really contains the expected text and styles
Inside onclone, inspect the cloned node’s textContent and computed styles while debugging. A selector that matches the wrong node, a hidden duplicate, or a CSS rule loaded only in the main document can make a correct workaround appear ineffective.
Compare output formats and scale
Save a PNG while diagnosing so compression does not obscure a glyph edge. Keep the element size and device scale constant between tests. Once the text is correct, test the final JPEG or other format used by your application. A format change cannot fix a missing glyph, but it can make small differences harder to see.
Free tools Windows power users keep installed
One-click scans. No signup required.
Rank #4
- 2-in-1 Dual Design: Features both USB-C and USB-A connectors, making it compatible with phones, tablets, MacBooks, PCs, and laptops-no adapter needed
- Wide Compatibility: Works seamlessly with USB A and USB C devices, ensuring reliable file transfers across smartphones, computers, and more
- Ample Storage Options: Available in 16GB/32GB/64GB/128GB providing plenty of space for photos, videos, music, and documents
- Portable & Lightweight: Compact and durable design for travel, school, or daily use-take your files anywhere
- Plug-and-Play Convenience: No software or drivers required; simply insert into USB-C or USB-A ports and start transferring files instantly
Production checklist
- Capture only after the required webfonts have loaded.
- Record the exact browser, operating system, font files, and html2canvas version for a reproducible bug report.
- Try
fontFeatureSettings: '"liga" 0'on the target, then move the declaration tooncloneif the live page must remain unchanged. - Test
fi,ff, andflwords, plus text without those combinations. - Remove negative letter spacing and other unusual text styles during isolation.
- Do not assume a community workaround is universal; keep a regression image for every browser and font combination you support.
- Check the current configuration reference for your installed release rather than copying historical options.
Performance and reliability considerations
The onclone callback itself is a small style edit. The expensive part is rendering the element into a canvas, especially when the target is large or contains many descendants. Keep diagnostic captures limited to the smallest element that demonstrates the problem, and avoid taking repeated captures while fonts are still settling.
For reliable automation, treat a capture as valid only after the output contains the expected fi word. A successful JavaScript promise means the rendering operation completed; it does not prove that the glyph substitution was visually correct. Store a known-good reference image or perform an image review in the environments that matter to your users.
Or skip the browser setup
If your goal is a dependable website image rather than debugging html2canvas itself, ScreenshotNeo provides a website screenshot API and MCP server. It accepts a URL and returns PNG, JPEG, WebP, or PDF. Before capture it accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers.
One GET request is enough:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for the complete parameter reference. The same request in Python is:
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)And in Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
require('fs').writeFileSync('shot.webp', image);ScreenshotNeo also has an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. Its options include full-page capture with lazy images loaded, CSS-selector element capture, dark mode, device presets or custom viewports, retina scale, custom CSS and JavaScript, click-before-capture actions, selector hiding, waits for a selector, delay or network idle, request and resource blocking, custom headers, cookies, user agents and Authorization, timezone and geolocation, transparent backgrounds, resizing, configurable caching, signed links, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, a usage API, and an OpenAPI specification. Parameter names used by other screenshot APIs also work for easier migration.
Best Value
- USB-C STORAGE ON THE GO: This sleek drive is supported by Samsung NAND flash and is incredibly compact to fit in the palm of your hand; Count on reliable performance and fast transfer speeds while staying compact
- PERFORMANCE WITH SPEED: No need to choose between performance and reliability; Experience a fast, powerful flash drive that transfers 4GB files in just 11 seconds with up to 400MB/s USB 3.2 Gen 1 read speeds and is backward compatible with USB 3.0/2.0
- MODERN MEETS ICONIC: The ultra-sleek USB-C drive looks as good as it performs; Featuring a reversible plug, the Type-C inserts into your devices seamlessly every time; Transfer large files with style and ease
- ALWAYS CONNECTED: USB-C is compatible across devices, including laptops, tablets, phones and cameras, with enough space for 63,730 photos or maximum 12 hours of 4K video; With up to 256GB of storage space, this pocket-sized thumb drive comes in handy wherever you go
- TOUGH & TRUSTED: Files stay secure, no matter the terrain; Samsung's flash memory technology makes the Type-C a trustworthy drive to store your valuable data; It's waterproof, shock-proof, magnet-proof, temperature-proof, and X-ray-proof body, plus it's backed by a 5-year limited warranty
Every feature is included on every plan. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots (Starter), followed by $15 for 15,000, $39 for 60,000, $99 for 250,000, and $249 for 1,000,000. Yearly billing gives two months free. Create a free ScreenshotNeo account to get the 1,000 monthly screenshots without entering a card.
What to report when opening an html2canvas issue
- The exact html2canvas version and browser version.
- Operating system, font family, font file or webfont URL, weight, and style.
- A minimal phrase that demonstrates the failure, including whether
fforflalso fail. - The original DOM screenshot and the generated image.
- Whether waiting for fonts and setting
"liga" 0on the live element or inonclonechanges the result. - Any letter-spacing, transforms, scaling, or other text-specific CSS on the target.
That information separates a font-shaping regression from a loading or layout issue and gives maintainers a reproducible case instead of an isolated screenshot.
Frequently Asked Questions
Will disabling the ligature change the text copied from the page?
No. The declaration changes glyph selection for the rendered element; the underlying character sequence remains the same. If you apply it through onclone, even the live element’s styles remain untouched.
Can a PDF wrapper around html2canvas use the same workaround?
Only if that wrapper actually renders the same html2canvas canvas. Verify its capture path and test the final PDF separately; a different PDF text engine may not share the canvas renderer’s ligature behavior.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
