diff --git a/.changeset/silver-carpets-act.md b/.changeset/silver-carpets-act.md new file mode 100644 index 0000000000..12d6accfd6 --- /dev/null +++ b/.changeset/silver-carpets-act.md @@ -0,0 +1,18 @@ +--- +'braid-design-system': minor +--- + +--- +updated: + - seekJobs +--- + +**seekJobs:** Use Tahoma for Thai fallback font + +Currently in the `seekJobs` theme, the fallback font for the Thai character set resolves to the default system font which differs by operating system. +By choosing a deterministic fallback that is available across operating systems, we can use [Capsize] to [improve the alignment] with the SEEK Sans web font, and reduce Cumulative Layout Shift for experiences that use Thai. + +Additionally, adding `sans-serif` as an ultimate fallback in the event that we ever fall all the way through the stack on an obscure operating system. + +[Capsize]: https://seek-oss.github.io/capsize/ +[improve the alignment]: https://github.com/seek-oss/capsize?tab=readme-ov-file#createfontstack diff --git a/packages/braid-design-system/src/lib/themes/seekJobs/tokens.ts b/packages/braid-design-system/src/lib/themes/seekJobs/tokens.ts index 22da459c9f..338ea04bed 100644 --- a/packages/braid-design-system/src/lib/themes/seekJobs/tokens.ts +++ b/packages/braid-design-system/src/lib/themes/seekJobs/tokens.ts @@ -19,7 +19,7 @@ export default makeTokens({ tokenOverrides: { legacy: false, typography: { - fontFamily: 'SeekSans, "SeekSans Fallback", Arial', + fontFamily: 'SeekSans, "SeekSans Fallback", Arial, Tahoma, sans-serif', webFont: 'https://www.seek.com.au/static/shared-web/seeksans.css', fontMetrics: { capHeight: 783,