How to Fix Rupee Symbols Missing from Loki Website Screenshots
If ₹ appears in your browser but disappears in Loki, check the character, the font actually rendering it, and the screenshot runtime in that order.
If the Indian rupee sign (₹) appears in your browser but is missing, boxed, or looks like a different currency symbol in a Loki screenshot, check three things in order: the character is U+20B9, the font actually used for that character has the intended glyph, and Loki’s browser environment has loaded that font. The exact cause on your site cannot be determined from the title alone; it depends on your markup, font, browser, and screenshot runtime.
Loki is a visual regression testing tool for Storybook. Its documentation recommends Chrome in Docker and also lists local Chrome, the iOS simulator, and the Android emulator as supported platforms. A difference between your desktop browser and Loki can therefore come from the available fonts or font-loading state in the capture environment. Loki documentation
1. Confirm the character is U+20B9
The Indian rupee sign is Unicode U+20B9. Check the actual text value in the DOM or component source. An HTML hexadecimal character reference is ₹:
<span>₹ 1,250</span>If your source is JavaScript or TypeScript, you can make the code point explicit while diagnosing:
const amount = `\u20B9 1,250`;
export function RupeeExample() {
return <span>{amount}</span>;
}Inspect the rendered text rather than relying only on how the source looks in an editor. This rules out an absent character, an unintended code point, or a visually similar symbol. The Unicode currency symbols chart identifies the rupee sign at U+20B9.
2. Check the font used for the rupee glyph
A CSS declaration shows the requested font stack, but the browser may fall back to another font for a character the requested face cannot render. In developer tools, select the affected text and inspect its computed styles and rendered or fallback font. Confirm that the font actually used has a correct U+20B9 glyph.
Unicode cautions that chart glyphs are reference shapes, not a specification of how every font must draw the character. Font appearance varies. A font can also contain a glyph at the right code point that looks wrong; a missing-glyph box is not the only possible symptom. Unicode currency symbols chart
Historical reports illustrate why checking the actual font matters: a Fedora report documented a particular PT Sans build showing a ruble glyph at U+20B9, and a Google Fonts issue reported a similar PT Sans problem in a specific context. These reports do not establish that your font or its current version has the same defect. Fedora report · Google Fonts issue
3. Verify your fallback and web-font setup
Use a font that provides the intended rupee glyph, and include an available fallback that does too. A fallback stack only helps if a suitable font is installed or loaded in the environment taking the screenshot.
.price {
font-family: "Your Web Font", "Suitable System Font", sans-serif;
}Replace the example names with fonts you have verified. If the font is a web font, check all of the following:
- The font request succeeds in the Loki runtime, rather than only on your workstation.
- The font has finished loading before Loki captures the story.
- If the font is subsetted, the delivered subset includes U+20B9.
- The selected font contains a correct glyph, and the browser has not fallen back for this particular character.
Do not assume that changing the declared font-family fixed the issue. Recheck the rendered font and the captured result.
4. Compare the browser with Loki’s screenshot runtime
Use the same minimal story in both places. If it works in your usual browser but fails in Loki, compare the actual capture environments and the font-loading state. Loki documents Chrome in Docker as its recommended platform, along with local Chrome, iOS simulator, and Android emulator. Check which platform your project configures and which fonts and font files are present there. The documentation does not identify which platform your project uses; inspect your own Loki configuration. Loki documentation
- Create a small Storybook component containing only
₹ 1,250. - Capture it in the browser where it renders correctly and in Loki.
- Confirm the text’s code point in both cases.
- Inspect the computed and rendered font, and confirm the web font has loaded.
- Change one variable at a time: character source, font, font-load timing, or Loki platform/runtime.
- Save the failing screenshot and note the browser and version, OS or container image and version, and configured Loki platform.
This isolates whether the difference follows the character, font, or screenshot environment. It is a diagnostic procedure, not a claim that Loki has a general rupee-rendering bug.
5. Make the reproduction reliable
Once you identify the cause, keep a focused story for the affected text and capture it in the same runtime used by your visual regression workflow. Ensure the font is available and loaded before capture; otherwise a screenshot can record a fallback glyph even when the correct web font eventually appears in a normal browsing session. For subsetted fonts, check the served font file as well as the CSS declaration.
When filing or sharing a reproducible report, include the exact text and code point, computed or rendered font, browser and version, operating system or container image and version, Loki platform, and faulty screenshot. These details help distinguish character, font, and environment issues. A historical Chromium discussion of a similar cross-browser report requested the font, encoding, platform, platform version, and screenshot. Chromium discussion
Common errors and fixes
| Symptom | Likely cause to check | Next step |
|---|---|---|
| A box or blank space appears | The selected font may not provide U+20B9, or the intended web font may not have loaded. | Inspect the actual font for the glyph; verify the font request, subset, and load timing in Loki. |
| A ruble-like or otherwise incorrect symbol appears | The font may map U+20B9 to an unexpected-looking glyph. | Test a different font known to render the intended sign, then compare the actual font selected in each environment. |
| The character is absent even in the DOM | The source may omit the character or contain another code point. | Inspect the text value and test an explicit U+20B9 or ₹. |
| The browser is correct but Loki is wrong | The capture runtime may use different fonts, browser/platform settings, or font-load timing. | Compare the configured Loki platform, installed/loaded fonts, and browser version; reduce the story to the symbol and a short number. |
| A CSS font-stack change has no effect | The chosen fallback may also lack a suitable glyph, or the relevant web font may still be selected. | Inspect the rendered font for the character rather than only the declared CSS stack. |
Performance, reliability, and cost
For a focused diagnosis, a minimal Storybook story and a small number of captures are usually enough to isolate the variable. Avoid changing several fonts or runtime settings at once: that makes the cause harder to identify. Keep the capture runtime and its font setup consistent with the environment where you rely on visual comparisons. No particular Loki configuration, runtime image, or cost can be inferred without details of your project and CI setup.
Or skip the browser setup
If you need a clean image of the page rather than a Loki visual regression capture, ScreenshotNeo is a website screenshot API and MCP server. Its API returns an image or PDF from one GET request. For example, this cURL request saves a WebP screenshot:
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 request options. Cookie banners, newsletter popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server gives AI agents screenshot tools. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots. Sign up for 1,000 free screenshots a month.
FAQ
Is the rupee sign the same character as the letter R?
No. The Indian rupee sign is the Unicode character U+20B9. Verify the code point rather than substituting a lookalike.
Does this prove Loki has a bug?
No. The title alone does not identify the cause. Compare the character, rendered font, and Loki runtime before attributing the result to Loki.
Should I change the source character if it renders incorrectly?
First confirm it is U+20B9. If the code point is correct, investigate the font and screenshot environment before changing application content.
