diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/test-cases/font-measurement-test-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/test-cases/font-measurement-test-chrome-linux.png
index 23b80af2b26..b19bc8680ab 100644
Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/test-cases/font-measurement-test-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/test-cases/font-measurement-test-chrome-linux.png differ
diff --git a/e2e/screenshots/test_cases_stories.test.ts-snapshots/test-cases-stories/should-render-font-measurement-test-story-chrome-linux.png b/e2e/screenshots/test_cases_stories.test.ts-snapshots/test-cases-stories/should-render-font-measurement-test-story-chrome-linux.png
index a7828d99c7e..91c16a61584 100644
Binary files a/e2e/screenshots/test_cases_stories.test.ts-snapshots/test-cases-stories/should-render-font-measurement-test-story-chrome-linux.png and b/e2e/screenshots/test_cases_stories.test.ts-snapshots/test-cases-stories/should-render-font-measurement-test-story-chrome-linux.png differ
diff --git a/packages/charts/src/components/chart.tsx b/packages/charts/src/components/chart.tsx
index d7f88d125b2..63e6d68f3ba 100644
--- a/packages/charts/src/components/chart.tsx
+++ b/packages/charts/src/components/chart.tsx
@@ -16,6 +16,7 @@ import { v4 as uuidv4 } from 'uuid';
 
 import { ChartBackground } from './chart_background';
 import { ChartContainer } from './chart_container';
+import { ChartMeasureCanvas } from './chart_measure_canvas';
 import { ChartResizer } from './chart_resizer';
 import { ChartStatus } from './chart_status';
 import { Legend } from './legend/legend';
@@ -175,6 +176,7 @@ export class Chart extends React.Component<ChartProps, ChartState> {
     return (
       <Provider store={this.chartStore}>
         <div className="echChart" style={containerSizeStyle} data-testid="echChart">
+          <ChartMeasureCanvas />
           <Titles
             displayTitles={this.state.displayTitles}
             title={this.props.title}
diff --git a/packages/charts/src/components/chart_measure_canvas.tsx b/packages/charts/src/components/chart_measure_canvas.tsx
new file mode 100644
index 00000000000..91a63f156cb
--- /dev/null
+++ b/packages/charts/src/components/chart_measure_canvas.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+
+import { registerMeasureCanvas, unregisterMeasureCanvas } from '../utils/bbox/canvas_text_bbox_calculator';
+
+const canvasStyle: React.CSSProperties = { position: 'absolute', width: 0, height: 0, overflow: 'hidden' };
+
+/**
+ * Hidden canvas element that lives in the Chart DOM tree to inherit computed
+ * CSS font properties (e.g. font-feature-settings, font-variant-numeric)
+ * from ancestors. Used by {@link withTextMeasure} for accurate text measurement.
+ * @internal
+ */
+export class ChartMeasureCanvas extends React.Component {
+  private canvasRef = React.createRef<HTMLCanvasElement>();
+
+  componentDidMount() {
+    if (this.canvasRef.current) registerMeasureCanvas(this.canvasRef.current);
+  }
+
+  componentWillUnmount() {
+    if (this.canvasRef.current) unregisterMeasureCanvas(this.canvasRef.current);
+  }
+
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  render() {
+    return <canvas ref={this.canvasRef} width={0} height={0} aria-hidden style={canvasStyle} />;
+  }
+}
diff --git a/packages/charts/src/utils/bbox/canvas_text_bbox_calculator.ts b/packages/charts/src/utils/bbox/canvas_text_bbox_calculator.ts
index a56d49bbc75..9846028a299 100644
--- a/packages/charts/src/utils/bbox/canvas_text_bbox_calculator.ts
+++ b/packages/charts/src/utils/bbox/canvas_text_bbox_calculator.ts
@@ -11,11 +11,34 @@ import { cssFontShorthand } from '../../common/text_utils';
 import { withContext } from '../../renderers/canvas';
 import type { Size } from '../dimensions';
 
+let measureCanvas: HTMLCanvasElement | null = null;
+let measureCtx: CanvasRenderingContext2D | null = null;
+
+/**
+ * Registers a canvas element that lives in the Chart DOM tree.
+ * An in-DOM canvas inherits computed CSS properties (e.g. font-feature-settings,
+ * font-variant-numeric) from its ancestors, producing accurate text measurements
+ * that match the rendered output.
+ * @internal
+ */
+export function registerMeasureCanvas(canvas: HTMLCanvasElement) {
+  measureCanvas = canvas;
+  measureCtx = canvas.getContext('2d');
+}
+
+/** @internal */
+export function unregisterMeasureCanvas(canvas: HTMLCanvasElement) {
+  if (measureCanvas === canvas) {
+    measureCanvas = null;
+    measureCtx = null;
+  }
+}
+
 /** @internal */
 export const withTextMeasure = <T>(fun: (textMeasure: TextMeasure) => T) => {
-  const canvas = document.createElement('canvas');
-  const ctx = canvas.getContext('2d');
-  return fun(ctx ? measureText(ctx) : () => ({ width: 0, height: 0 }));
+  const ctx = measureCtx ?? document.createElement('canvas').getContext('2d');
+  const textMeasure = ctx ? measureText(ctx) : () => ({ width: 0, height: 0 });
+  return fun(textMeasure);
 };
 
 /** @internal */
@@ -23,12 +46,25 @@ export type TextMeasure = (text: string, font: Omit<Font, 'textColor'>, fontSize
 
 /** @internal */
 export function measureText(ctx: CanvasRenderingContext2D): TextMeasure {
+  const isMeasureCtx = ctx === measureCtx;
+  let lastFont = '';
   return (text, font, fontSize, lineHeight = 1) => {
     if (text.length === 0) {
       return { width: 0, height: fontSize * lineHeight };
     }
+    const fontString = cssFontShorthand(font, fontSize);
+    // measureCtx doesn't need withContext, so not using it for performance reasons
+    if (isMeasureCtx) {
+      // Avoid setting the font multiple times if it hasn't changed for performance
+      if (fontString !== lastFont) {
+        ctx.font = fontString;
+        lastFont = fontString;
+      }
+      const { width } = ctx.measureText(text);
+      return { width, height: fontSize * lineHeight };
+    }
     return withContext(ctx, (ctx): Size => {
-      ctx.font = cssFontShorthand(font, fontSize);
+      ctx.font = fontString;
       const { width } = ctx.measureText(text);
       return { width, height: fontSize * lineHeight };
     });
diff --git a/storybook/stories/test_cases/34_font_measurement.story.tsx b/storybook/stories/test_cases/34_font_measurement.story.tsx
index c364f45a828..417ff195304 100644
--- a/storybook/stories/test_cases/34_font_measurement.story.tsx
+++ b/storybook/stories/test_cases/34_font_measurement.story.tsx
@@ -35,7 +35,7 @@ const metricData = [
       color: '#3c3c3c',
       title: 'Revenue 2025',
       subtitle: 'Total Annual Revenue',
-      value: 5678901.23,
+      value: 5678901.24,
       valueFormatter: (v: number) => `$${v.toFixed(2)}`,
     },
   ],
@@ -111,6 +111,9 @@ export const Example: ChartsStory = (_, { description }) => {
   };
 
   const theme: PartialTheme = {
+    metric: {
+      valueFontSize: 'fit',
+    },
     barSeriesStyle: {
       displayValue: {
         fontSize: fontSize + 2,