Fix Cypress CI failures caused by font differences

+ DRY out a reusable command for this logic - it's happened often enough now that we need it

cypress/support/component.tsx

@@ -22,6 +22,7 @@ import './a11y/checkAxe';
 import './keyboard/repeatRealPress';
 import './setup/mount';
 import './setup/realMount';
+import './setup/loadFont';
 
 // @see https://github.com/quasarframework/quasar/issues/2233#issuecomment-492975745
 // @see also https://github.com/cypress-io/cypress/issues/20341

cypress/support/index.d.ts

@@ -2,6 +2,7 @@ import { ContextObject, Result, RunOptions } from 'axe-core';
 import { realPress } from 'cypress-real-events/commands/realPress';
 import type { mountCommand } from './setup/mount';
 import type { realMountCommand } from './setup/realMount';
+import type { loadFontCommand } from './setup/loadFont';
 
 type KeyOrShortcut = Parameters<typeof realPress>[0];
 type RealPressOptions = Parameters<typeof realPress>[1];
@@ -39,6 +40,12 @@ declare global {
        */
       realMount: realMountCommand;
 
+      /**
+       * Some E2E tests rely on having EUI's Inter font loaded in order
+       * for various width/height calculations to be correct
+       */
+      loadFont: loadFontCommand;
+
       /**
        * Repeat the Real Events `realPress()` method 2 or more times
        * @param keyToPress Any valid key or array of keys https://docs.cypress.io/api/commands/type#Arguments

cypress/support/setup/loadFont.tsx

@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+// Export only the type to not confuse code-completion tools
+// export type realMountCommand = typeof realMountCommand;
+
+/**
+ * CI doesn't have access to the Inter font, so we need to manually include it
+ * for certain calculations that change based on the font
+ */
+const loadFontCommand = () => {
+  const linkElem = document.createElement('link');
+  linkElem.setAttribute('rel', 'stylesheet');
+  linkElem.setAttribute(
+    'href',
+    'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'
+  );
+  document.head.appendChild(linkElem);
+  cy.wait(1000); // Wait a second to give the font time to load/swap in
+};
+
+// Export only the type to not confuse code-completion tools
+export type loadFontCommand = typeof loadFontCommand;
+
+Cypress.Commands.add('loadFont', loadFontCommand);

src/components/combo_box/combo_box.spec.tsx

@@ -20,18 +20,8 @@ import {
   type EuiComboBoxOptionOption,
 } from './index';
 
-// CI doesn't have access to the Inter font, so we need to manually include it
-// for truncation font calculations to work correctly
-before(() => {
-  const linkElem = document.createElement('link');
-  linkElem.setAttribute('rel', 'stylesheet');
-  linkElem.setAttribute(
-    'href',
-    'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'
-  );
-  document.head.appendChild(linkElem);
-  cy.wait(1000); // Wait a second to give the font time to load/swap in
-});
+// Inter font must be loaded for truncation font calculations to work correctly on CI
+before(() => cy.loadFont());
 
 describe('EuiComboBox', () => {
   describe('focus management', () => {

src/components/datagrid/body/data_grid_cell_popover.spec.tsx

@@ -132,6 +132,9 @@ describe('EuiDataGridCellPopover', () => {
   });
 
   describe('popover anchor/positioning', () => {
+    // Inter font must be loaded for position and dimension assertions to be accurate on CI
+    before(() => cy.loadFont());
+
     const props = {
       ...baseProps,
       rowCount: 1,

src/components/text_truncate/text_truncate.spec.tsx

@@ -21,18 +21,8 @@ describe('EuiTextTruncate', () => {
     width: 200,
   };
 
-  // CI doesn't have access to the Inter font, so we need to manually include it
-  // for font calculations to work correctly
-  before(() => {
-    const linkElem = document.createElement('link');
-    linkElem.setAttribute('rel', 'stylesheet');
-    linkElem.setAttribute(
-      'href',
-      'https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap'
-    );
-    document.head.appendChild(linkElem);
-    cy.wait(1000); // Wait a second to give the font time to load/swap in
-  });
+  // Inter font must be loaded for truncation font calculations to work correctly on CI
+  before(() => cy.loadFont());
 
   const getTruncatedText = (selector = '#text') =>
     cy.get(`${selector} [data-test-subj="truncatedText"]`);