Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fix] Ensure Storybook loads EUI fonts #7856

Merged
merged 2 commits into from
Jun 27, 2024

Conversation

mgadewoll
Copy link
Contributor

@mgadewoll mgadewoll commented Jun 26, 2024

Summary

Currently EUI Storybook does not actually load the EUI fonts. 🤯

We were seeing either the system installed Inter/Roboto Mono font locally or a fallback font (Helvetica/Menlo).
The images generated by VRT were also using different fonts and need updating 🙈

Screen.Recording.2024-06-26.at.17.10.55.mov
Screen.Recording.2024-06-26.at.17.36.38.mov

This PR ensures that the fonts are actually loaded for the Storybook preview.

How to reproduce?

Open production Storybook (e.g. for EuiButton) in an incocgnito window of your browser and override the font-family to 'Inter' and see that the font is not actually available.

QA

  • open Storybook and update fonts in the browser devTools by overriding the expected font with itself (no changes expected)
  • open the Network tab of the devTools and verify the font files are loaded (Nunito font is Storybook specific)

Screenshot 2024-06-26 at 17 42 52

@mgadewoll mgadewoll added documentation Issues or PRs that only affect documentation - will not need changelog entries skip-changelog labels Jun 26, 2024
@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

@mgadewoll mgadewoll marked this pull request as ready for review June 26, 2024 16:13
@mgadewoll mgadewoll requested a review from a team as a code owner June 26, 2024 16:13
Copy link
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💀 Thanks so much for catching this Lene! I definitely totally missed that because I have Inter installed locally, doh

@mgadewoll mgadewoll merged commit 41a9a0d into elastic:main Jun 27, 2024
11 checks passed
@mgadewoll mgadewoll deleted the storybook/fix-font-loading branch June 27, 2024 08:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Issues or PRs that only affect documentation - will not need changelog entries skip-changelog
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants