Chore: Update Inter font files (#82446)

* Chore: Update Inter font files

* change codeowner of fonts to us

.github/CODEOWNERS

@@ -342,7 +342,7 @@
 /packages/grafana-o11y-ds-frontend/ @grafana/observability-logs @grafana/observability-traces-and-profiling
 /packages/grafana-sql/ @grafana/partner-datasources @grafana/oss-big-tent
 
-# root files, mostly frontend 
+# root files, mostly frontend
 /.browserslistrc @grafana/frontend-ops
 /package.json @grafana/frontend-ops
 /tsconfig.json @grafana/frontend-ops
@@ -464,13 +464,13 @@
 /public/app/types/ @grafana/grafana-frontend-platform
 /public/app/types/alerting.ts @grafana/alerting-frontend
 /public/dashboards/ @grafana/dashboards-squad
-/public/fonts/ @grafana/alerting-frontend
 /public/gazetteer/ @ryantxu
 /public/img/ @grafana/grafana-frontend-platform
 /public/lib/ @grafana/grafana-frontend-platform
 /public/lib/monaco-languages/kusto.ts @grafana/partner-datasources
 /public/maps/ @ryantxu
 /public/robots.txt @grafana/frontend-ops
+/public/fonts/ @grafana/grafana-frontend-platform
 /public/sass/ @grafana/grafana-frontend-platform
 /public/test/ @grafana/grafana-frontend-platform
 /public/test/helpers/alertingRuleEditor.tsx @grafana/alerting-frontend

packages/grafana-ui/src/components/Text/Typography.internal.story.tsx

@@ -0,0 +1,87 @@
+import { Meta, StoryFn } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { Divider } from '../Divider/Divider';
+import { Field } from '../Forms/Field';
+import { Stack } from '../Layout/Stack/Stack';
+
+import { Text } from './Text';
+
+const meta: Meta = {
+  title: 'General/Text',
+};
+
+const FONT_WEIGHTS = [/*100, 200, 300, */ 400, 500 /*600, 700, 800, 900*/];
+
+export const TypographySamples: StoryFn = () => {
+  const [fontWeight, setFontWeight] = useState(400);
+  const [fontSize, setFontSize] = useState(30);
+
+  const handleFontWeightChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setFontWeight(Number(event.target.value));
+  };
+
+  const handleFontSizeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setFontSize(Number(event.target.value));
+  };
+
+  return (
+    <div style={{ fontSynthesis: 'none' }}>
+      <Field label={`Font weight - ${fontWeight}`}>
+        <input
+          type="range"
+          min={100}
+          max={900}
+          step={10}
+          value={fontWeight}
+          onChange={handleFontWeightChange}
+          style={{ width: '100%', maxWidth: 400 }}
+        />
+      </Field>
+
+      <Field label={`Font size - ${fontSize}`}>
+        <input
+          type="range"
+          min={8}
+          max={100}
+          value={fontSize}
+          onChange={handleFontSizeChange}
+          style={{ width: '100%', maxWidth: 400 }}
+        />
+      </Field>
+
+      <div style={{ fontWeight: fontWeight, fontSize: fontSize }}>Add new time series panel to Grafana dashboard</div>
+
+      <Divider />
+
+      <Stack direction="column" gap={4}>
+        {FONT_WEIGHTS.map((weight) => {
+          return (
+            <div key={weight}>
+              <Text>Font weight {weight}</Text>
+
+              <div style={{ fontWeight: weight, fontSize: fontSize }} contentEditable>
+                Add new time series panel
+                <br />
+                Figure A⃝ #⃞ 3⃝ ×⃞
+                <br />
+                3x9 12:34 3–8 +8+x
+                <br />
+                01 02 03 04 05 06 07 08 09 00
+                <br />
+                11 12 13 14 15 16 17 18 19 10
+                <div style={{ fontFeatureSettings: '"tnum"' }}>
+                  01 02 03 04 05 06 07 08 09 00
+                  <br />
+                  11 12 13 14 15 16 17 18 19 10
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </Stack>
+    </div>
+  );
+};
+
+export default meta;

public/sass/base/_fonts.scss

@@ -25,131 +25,26 @@
     U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(#{$font-file-path}/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(#{$font-file-path}/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(#{$font-file-path}/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(#{$font-file-path}/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(#{$font-file-path}/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(#{$font-file-path}/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7SUc.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
+/*
+To add new variations/version of Inter, download from https://rsms.me/inter/ and add the
+web font files to the public/fonts/inter folder. Do not download the fonts from Google Fonts
+or somewhere else because they don't support the features we require (like tabular numerals).
+
+If adding additional weights, consider switching to the InterVariable variable font as combined
+it may take less space than multiple static weights.
+*/
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(#{$font-file-path}/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
-    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url(#{$font-file-path}/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url(#{$font-file-path}/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url(#{$font-file-path}/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url(#{$font-file-path}/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url(#{$font-file-path}/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+  src: url('#{$font-file-path}/inter/Inter-Regular.woff2') format('woff2');
 }
-/* latin-ext */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url(#{$font-file-path}/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7SUc.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
+
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: url(#{$font-file-path}/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
-    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  src: url('#{$font-file-path}/inter/Inter-Medium.woff2') format('woff2');
 }