[Lens] Enable monospace numeric font features for Lens renderers

src/core/packages/apps/server-internal/assets/fonts/elastic_ui_numeric/LICENSE.txt

@@ -0,0 +1,104 @@
+Elastic UI Numeric
+==================
+
+This font is a modified version of Inter, created by Elastic for use in Kibana charts.
+It contains a subset of numeric glyphs and common punctuation with OpenType features
+(tnum, zero, ss01, ss07) baked into the default character mapping.
+
+Upstream: Inter (https://github.com/rsms/inter)
+Copyright: Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
+"Inter" is trademark of Rasmus Andersson.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+This modified font is distributed under the SIL Open Font License, Version 1.1,
+the same license as the upstream Inter font.
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

src/core/packages/rendering/server-internal/src/views/fonts.tsx

@@ -16,17 +16,53 @@ interface Props {
   url: RenderingMetadata['uiPublicUrl'];
 }
 
+type FontFaceWeightValue = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+type FontFaceWeight = FontFaceWeightValue | `${FontFaceWeightValue} ${FontFaceWeightValue}`;
+type FontFaceDisplay = 'swap' | 'auto' | 'block' | 'fallback' | 'optional';
+
 interface FontFace {
   family: string;
   variants: Array<{
     style: 'normal' | 'italic';
-    weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+    weight: FontFaceWeight;
     sources: string[];
     unicodeRange?: string;
     format?: string;
+    display?: FontFaceDisplay;
   }>;
 }
 
+/**
+ * `Elastic UI Numeric` is a derivative of Inter with OpenType numeric features
+ * (tnum, zero, ss01, ss07) baked into the default glyphs. This allows canvas-based
+ * rendering to display tabular numbers and slashed zeros without requiring CSS
+ * font-feature-settings, which is not supported by Firefox's canvas implementation.
+ *
+ * The font only contains numeric characters and common punctuation, using unicode-range
+ * to apply only to those characters. When used alongside Inter, numeric characters
+ * will render with the enhanced features while letters use standard Inter.
+ *
+ * Future numeric/typographic enhancements for charts can be added to this font family while
+ * keeping the public API stable (hence the generic name).
+ *
+ * @see https://github.com/elastic/kibana/issues/249382
+ */
+const getElasticUINumeric = (url: string): FontFace => {
+  return {
+    family: 'Elastic UI Numeric',
+    variants: [
+      {
+        style: 'normal',
+        weight: '100 900',
+        sources: [`${url}/fonts/elastic_ui_numeric/ElasticUINumeric-Variable.woff2`],
+        format: 'woff2',
+        display: 'swap',
+        unicodeRange: 'U+20, U+24-25, U+28-29, U+2B-2F, U+30-3A, U+A0, U+202F, U+2212',
+      },
+    ],
+  };
+};
+
 /**
  * `Inter` is the latest version of `Inter UI`
  */
@@ -184,6 +220,7 @@ const getRoboto = (url: string): FontFace => {
 };
 
 export const Fonts: FunctionComponent<Props> = ({ url }) => {
+  const elasticUINumericFont = getElasticUINumeric(url);
   const sansFont = getInter(url);
   const codeFont = getRoboto(url);
 
@@ -192,9 +229,9 @@ export const Fonts: FunctionComponent<Props> = ({ url }) => {
     <style
       dangerouslySetInnerHTML={{
         __html: `
-        ${[sansFont, codeFont]
+        ${[elasticUINumericFont, sansFont, codeFont]
           .flatMap(({ family, variants }) =>
-            variants.map(({ style, weight, format, sources, unicodeRange }) => {
+            variants.map(({ style, weight, format, sources, unicodeRange, display }) => {
               const src = sources
                 .map((source) =>
                   source.startsWith(url)
@@ -203,17 +240,18 @@ export const Fonts: FunctionComponent<Props> = ({ url }) => {
                 )
                 .join(', ');
 
+              const fontFaceRules = [
+                `font-family: '${family}';`,
+                `font-style: ${style};`,
+                `font-weight: ${weight};`,
+                ...(display ? [`font-display: ${display};`] : []),
+                `src: ${src};`,
+                ...(unicodeRange ? [`unicode-range: ${unicodeRange};`] : []),
+              ];
+
               return `
         @font-face {
-          font-family: '${family}';
-          font-style: ${style};
-          font-weight: ${weight};
-          src: ${src};${
-                unicodeRange
-                  ? `
-          unicode-range: ${unicodeRange};`
-                  : ''
-              }
+          ${fontFaceRules.join('\n          ')}
         }`;
             })
           )

src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx

@@ -26,6 +26,17 @@ interface MetricVisValueProps {
   renderComplete?: () => void;
 }
 
+const ELASTIC_UI_NUMERIC_FONT_FAMILY = "'Elastic UI Numeric'";
+
+const prependNumericFontFamily = (style: CSSProperties): CSSProperties => {
+  const { fontFamily } = style;
+  if (!fontFamily || typeof fontFamily !== 'string') return style;
+
+  return fontFamily.includes(ELASTIC_UI_NUMERIC_FONT_FAMILY)
+    ? style
+    : { ...style, fontFamily: `${ELASTIC_UI_NUMERIC_FONT_FAMILY}, ${fontFamily}` };
+};
+
 export const MetricVisValue = (props: MetricVisValueProps) => {
   const { style, metric, onFilter, labelConfig, colorFullBackground, autoScale } = props;
 
@@ -51,7 +62,7 @@ export const MetricVisValue = (props: MetricVisValueProps) => {
         className="legacyMtrVis__value"
         css={styles.legacyMtrVisValue}
         style={{
-          ...(style.spec as CSSProperties),
+          ...prependNumericFontFamily(style.spec as CSSProperties),
           ...(metric.color ? { color: metric.color } : {}),
         }}
         /*
@@ -68,7 +79,7 @@ export const MetricVisValue = (props: MetricVisValueProps) => {
         <div
           data-test-subj="metric_label"
           style={{
-            ...(labelConfig.style.spec as CSSProperties),
+            ...prependNumericFontFamily(labelConfig.style.spec as CSSProperties),
             order: labelConfig.position === 'top' ? -1 : 2,
           }}
         >

src/platform/plugins/shared/chart_expressions/expression_tagcloud/public/components/tagcloud_component.tsx

@@ -257,7 +257,7 @@ export const TagCloudChart = ({
               angleCount={ORIENTATIONS[orientation].angleCount}
               padding={5}
               fontWeight={400}
-              fontFamily="Inter UI, sans-serif"
+              fontFamily="'Elastic UI Numeric', 'Inter UI', sans-serif"
               fontStyle="normal"
               minFontSize={visParams.minFontSize}
               maxFontSize={visParams.maxFontSize}

src/platform/plugins/shared/charts/public/services/theme/helpers.test.ts

@@ -0,0 +1,58 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { applyNumericFontFamily, ELASTIC_UI_NUMERIC_FONT_FAMILY } from './helpers';
+
+describe('applyNumericFontFamily', () => {
+  it('prepends the numeric font family to any fontFamily string', () => {
+    const theme = {
+      axes: {
+        tickLabel: {
+          fontFamily: 'Inter, sans-serif',
+        },
+      },
+    };
+
+    applyNumericFontFamily(theme);
+
+    expect(theme.axes.tickLabel.fontFamily).toBe(
+      `${ELASTIC_UI_NUMERIC_FONT_FAMILY}, Inter, sans-serif`
+    );
+  });
+
+  it('does not double-prepend when already present', () => {
+    const theme = {
+      fontFamily: `${ELASTIC_UI_NUMERIC_FONT_FAMILY}, Inter, sans-serif`,
+    };
+
+    applyNumericFontFamily(theme);
+
+    expect(theme.fontFamily).toBe(`${ELASTIC_UI_NUMERIC_FONT_FAMILY}, Inter, sans-serif`);
+  });
+
+  it('walks arrays and ignores non-record entries', () => {
+    const theme = {
+      series: [
+        { label: { fontFamily: 'Inter' } },
+        'skip-me',
+        null,
+        { label: { fontFamily: `${ELASTIC_UI_NUMERIC_FONT_FAMILY}, Inter` } },
+      ],
+    };
+
+    applyNumericFontFamily(theme);
+
+    expect(theme.series[0]).toEqual({
+      label: { fontFamily: `${ELASTIC_UI_NUMERIC_FONT_FAMILY}, Inter` },
+    });
+    expect(theme.series[3]).toEqual({
+      label: { fontFamily: `${ELASTIC_UI_NUMERIC_FONT_FAMILY}, Inter` },
+    });
+  });
+});

src/platform/plugins/shared/charts/public/services/theme/helpers.ts

@@ -0,0 +1,34 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { isPlainObject } from 'lodash';
+
+export const ELASTIC_UI_NUMERIC_FONT_FAMILY = "'Elastic UI Numeric'";
+
+const isRecord = (value: unknown): value is Record<string, unknown> => isPlainObject(value);
+
+export const applyNumericFontFamily = (value: unknown): void => {
+  if (Array.isArray(value)) {
+    value.forEach(applyNumericFontFamily);
+    return;
+  }
+
+  if (!isRecord(value)) return;
+
+  for (const [key, entry] of Object.entries(value)) {
+    if (key === 'fontFamily' && typeof entry === 'string') {
+      value[key] = entry.includes(ELASTIC_UI_NUMERIC_FONT_FAMILY)
+        ? entry
+        : `${ELASTIC_UI_NUMERIC_FONT_FAMILY}, ${entry}`;
+      continue;
+    }
+
+    applyNumericFontFamily(entry);
+  }
+};

src/platform/plugins/shared/charts/public/services/theme/theme.ts

@@ -15,6 +15,8 @@ import type { CoreSetup, CoreTheme } from '@kbn/core/public';
 import type { PartialTheme, Theme } from '@elastic/charts';
 import { LIGHT_THEME, getChartsTheme } from '@elastic/charts';
 
+import { applyNumericFontFamily } from './helpers';
+
 export class ThemeService {
   /** Returns default charts theme */
   public readonly chartsDefaultBaseTheme = LIGHT_THEME;
@@ -113,8 +115,8 @@ export class ThemeService {
   public init(theme: CoreSetup['theme']) {
     this.theme$ = theme.theme$;
     this.theme$.subscribe((newTheme) => {
-      this._chartsBaseTheme$.next(getChartsTheme(newTheme));
       const chartsTheme = getChartsTheme(newTheme);
+      applyNumericFontFamily(chartsTheme);
       const { fill } = chartsTheme.axes.tickLabel;
       chartsTheme.axes.axisTitle.fill = fill;
       chartsTheme.axes.axisTitle.fontWeight = 500;