Switch to font-display: optional (#2114)

sumup-oss · May 21, 2023 · f53e433 · f53e433
1 parent da1a11b
commit f53e433
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/.changeset/tidy-knives-tap.md b/.changeset/tidy-knives-tap.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': major
+---
+
+Changed the font-display of Aktiv Grotesk, Circuit UI's default font family, from `swap` to `optional`. If the font family is not available locally or cached, a fallback font is used. This reduces the cumulative layout shift (CLS) and largest contentful paint (LCP). The visual difference is minimal.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -6,7 +6,7 @@
   @font-face {
     font-family: 'aktiv-grotesk';
     font-weight: 400;
-    font-display: swap;
+    font-display: optional;
     src: url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2')
         format('woff2'),
       url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff')
@@ -17,7 +17,7 @@
   @font-face {
     font-family: 'aktiv-grotesk';
     font-weight: 700;
-    font-display: swap;
+    font-display: optional;
     src: url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2')
         format('woff2'),
       url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff')

diff --git a/packages/circuit-ui/components/BaseStyles/BaseStylesService.ts b/packages/circuit-ui/components/BaseStyles/BaseStylesService.ts
@@ -29,15 +29,15 @@ export const createBaseStyles = ({
   @font-face {
     font-family: 'aktiv-grotesk';
     font-weight: 400;
-    font-display: swap;
+    font-display: optional;
     src: url('${FONTS_BASE_URL}/aktiv-grotest-400.woff2') format('woff2'),
       url('${FONTS_BASE_URL}/aktiv-grotest-400.woff') format('woff'),
       url('${FONTS_BASE_URL}/aktiv-grotest-400.eot') format('embedded-opentype');
   }
   @font-face {
     font-family: 'aktiv-grotesk';
     font-weight: 700;
-    font-display: swap;
+    font-display: optional;
     src: url('${FONTS_BASE_URL}/aktiv-grotest-700.woff2') format('woff2'),
       url('${FONTS_BASE_URL}/aktiv-grotest-700.woff') format('woff'),
       url('${FONTS_BASE_URL}/aktiv-grotest-700.eot') format('embedded-opentype');

diff --git a/packages/circuit-ui/components/BaseStyles/__snapshots__/BaseStylesService.spec.ts.snap b/packages/circuit-ui/components/BaseStyles/__snapshots__/BaseStylesService.spec.ts.snap
@@ -8,15 +8,15 @@ exports[`BaseStylesService > should return the global base styles 1`] = `
   @font-face {
     font-family: 'aktiv-grotesk';
     font-weight: 400;
-    font-display: swap;
+    font-display: optional;
     src: url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2') format('woff2'),
       url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff') format('woff'),
       url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.eot') format('embedded-opentype');
   }
   @font-face {
     font-family: 'aktiv-grotesk';
     font-weight: 700;
-    font-display: swap;
+    font-display: optional;
     src: url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2') format('woff2'),
       url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff') format('woff'),
       url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.eot') format('embedded-opentype');