Switch from Aktiv Grotesk to Inter

.changeset/hot-toys-compare.md

@@ -0,0 +1,5 @@
+---
+'@sumup-oss/design-tokens': major
+---
+
+Changed the default font from Aktiv Grotesk to Inter, a variable font. Variable fonts combine a continuous range of weights and other "axes" into a single file. This speeds up page load times and enables more creative freedom. Inter is a close match to Aktiv Grotesk, so users shouldn't notice a difference.

.changeset/itchy-geckos-protect.md

@@ -0,0 +1,5 @@
+---
+'@sumup-oss/design-tokens': major
+---
+
+Added a new `@sumup-oss/design-tokens/fonts.css` file containing the `@font-face` declarations to load the Inter font family. Refer to the documentation on [how to load fonts in your application](https://github.com/sumup-oss/circuit-ui/tree/main/packages/design-tokens#fonts).

.storybook/preview-head.html

@@ -4,46 +4,20 @@
 />
 <link
   rel="preload"
-  href="https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2"
-/>
-<link
-  rel="preload"
-  href="https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2"
+  href="https://static.sumup.com/fonts/Inter/Inter-normal-latin.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin
 />
 <style>
-  @font-face {
-    font-family: 'aktiv-grotesk';
-    font-weight: 400;
-    font-display: swap;
-    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;
-    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');
-  }
   #storybook-root {
     padding: env(safe-area-inset-top) env(safe-area-inset-right)
       env(safe-area-inset-bottom) env(safe-area-inset-left);
   }
 
   html {
-    font-family: 'aktiv-grotesk', Helvetica, Arial, system-ui, sans-serif,
-      'Segoe UI', Roboto, 'Apple Color Emoji', 'Segoe UI Emoji',
-      'Segoe UI Symbol';
+    font-family: 'Inter', Helvetica, Arial, system-ui, sans-serif, 'Segoe UI',
+      Roboto, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   }
 
   .sbdocs.sbdocs-content {

.storybook/preview.tsx

@@ -1,3 +1,4 @@
+import '@sumup-oss/design-tokens/fonts.css';
 import '@sumup-oss/design-tokens/dynamic.css';
 import '../packages/circuit-ui/styles/base.css';
 

.storybook/themes.ts

@@ -7,7 +7,7 @@ const brand = {
   brandTitle: 'Circuit UI',
   brandUrl: 'https://github.com/sumup-oss/circuit-ui',
   fontBase:
-    'aktiv-grotesk, Helvetica, Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    '"Inter", Helvetica, Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
 };
 
 export const light = create({

docs/introduction/2-getting-started.mdx

@@ -47,10 +47,11 @@ We also recommend installing and configuring [`@sumup-oss/eslint-plugin-circuit-
 
 SumUp's default theme is part of the [@sumup-oss/design-tokens](https://www.npmjs.com/package/@sumup-oss/design-tokens) package. Refer to the [Theme documentation](Features/Theme/Docs) to learn how to use and customize the theme.
 
-To make the theme available to Circuit UI, import the theme styles _before_ the component styles:
+To make the theme available to Circuit UI, import the fonts and design tokens _before_ the component styles:
 
 ```tsx
 // /app/layout.tsx or /pages/_app.tsx for Next.js
+import '@sumup-oss/design-tokens/fonts.css';
 import '@sumup-oss/design-tokens/light.css';
 import '@sumup-oss/circuit-ui/styles.css';
 ```
@@ -61,16 +62,11 @@ Finally, make sure that the viewport meta tag includes `viewport-fit=cover`, and
 
 ```tsx
 // /app/layout.tsx or /pages/_app.tsx for Next.js
+import '@sumup-oss/design-tokens/fonts.css';
 import '@sumup-oss/design-tokens/light.css';
 import '@sumup-oss/circuit-ui/styles.css';
 import Head from 'next/head';
 
-const Layout = css`
-  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(
-      safe-area-inset-bottom
-    ) env(safe-area-inset-left);
-`;
-
 export default function App() {
   return (
     <>
@@ -80,7 +76,14 @@ export default function App() {
           content="width=device-width, initial-scale=1.0, viewport-fit=cover"
         />
       </Head>
-      <Layout>{/* Your app */}</Layout>
+      <body
+        style={{
+          padding:
+            'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
+        }}
+      >
+        {/* Your app */}
+      </body>
     </>
   );
 }

packages/circuit-ui/styles/base.css

@@ -1,32 +1,5 @@
 /* stylelint-disable no-duplicate-selectors -- Sections are split to separate third-party from first-party code */
 
-/* Start downloading custom fonts as soon as possible */
-@font-face {
-  font-family: aktiv-grotesk;
-  font-weight: 400;
-  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-display: optional;
-}
-
-@font-face {
-  font-family: aktiv-grotesk;
-  font-weight: 700;
-  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");
-  font-display: optional;
-}
-
 /**
  * reset.css
  * http://meyerweb.com/eric/tools/css/reset/

packages/design-tokens/README.md

@@ -22,10 +22,11 @@ yarn add @sumup-oss/design-tokens
 
 ## Usage
 
-The design tokens are exported as [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). Choose a [color scheme](#color-schemes), then import the corresponding CSS file globally in your application, such as in Next.js' `app/layout.tsx` file:
+The design tokens are exported as [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). Choose a [font loading strategy](#fonts) and a [color scheme](#color-schemes), then import the corresponding CSS file globally in your application, such as in Next.js' `app/layout.tsx` file:
 
 ```tsx
 // app/layout.tsx
+import '@sumup-oss/design-tokens/fonts.css';
 import '@sumup-oss/design-tokens/light.css';
 
 function App({ Component, pageProps }) {
@@ -37,6 +38,56 @@ The application code must be processed by a bundler that can handle CSS files. [
 
 Refer to the [theme documentation](https://circuit.sumup.com/?path=/docs/features-theme--docs) for a complete reference of the available tokens.
 
+### Fonts
+
+#### Default
+
+Import the stylesheet that contains the font face declarations globally in your application, such as in a global layout file:
+
+```ts
+import '@sumup-oss/design-tokens/fonts.css';
+```
+
+To speed up the loading of the fonts, add preload links to the global `<head>` element of your application. Choose which subsets to preload based on the languages your app supports. The available subsets are `latin`, `latin-ext`, `cyrillic`, `cyrillic-ext`, `greek`, `greek-ext`, and `vietnamese`.
+
+```html
+<link
+  rel="preload"
+  href="https://static.sumup.com/fonts/Inter/Inter-normal-latin.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin
+/>
+```
+
+#### Next.js
+
+If you're using Next.js 13+, use the built-in [font optimization](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) feature with this recommended configuration instead:
+
+```tsx
+// app/layout.tsx
+import { Inter } from 'next/font/google';
+
+const inter = Inter({
+  // Choose which subsets to preload based on the languages your app supports
+  subsets: ['latin'],
+  // Note that Next.js <14.2.6 contains outdated Google Fonts data which prevents
+  // usage of the `ital` axis (see https://github.com/vercel/next.js/issues/68395)
+  axes: ['ital'],
+  variable: '--cui-font-stack-default',
+  display: 'swap',
+  preload: true,
+});
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.variable}>{children}</body>
+    </html>
+  );
+}
+```
+
 ### Color schemes
 
 #### Single color scheme