"font-display: optional" doesn't work in Chrome in Next.js and Emotion project

Viewed 617

I have a strange case of font-display: optional not working in Chrome browser (Version 91.0.4472.114 (Official Build) (x86_64)).

Few words about the project - it's Next.js app with SSR and using Emotion for styling.

Here's an example of how fonts are used in the app:

import React from 'react';
import App from 'next/app';
import { Global, css } from '@emotion/core';
import { ThemeProvider } from 'emotion-theming';

import theme from './path/to/custom/theme';

export default class CustomApp extends App {
  render() {
    const { Component, pageProps } = this.props;

    return (
      <ThemeProvider theme={theme}>
        <Global
          styles={css`
            /* latin-ext */
            @font-face {
              font-family: 'Zen Tokyo Zoo';
              font-style: normal;
              font-weight: 400;
              font-display: optional;
              src: url(https://fonts.gstatic.com/s/zentokyozoo/v1/NGSyv5ffC0J_BK6aFNtr6sRvwaRkREW-emmbxg.woff2)
                format('woff2');
              unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020,
                U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
            }
            /* latin */
            @font-face {
              font-family: 'Zen Tokyo Zoo';
              font-style: normal;
              font-weight: 400;
              font-display: optional;
              src: url(https://fonts.gstatic.com/s/zentokyozoo/v1/NGSyv5ffC0J_BK6aFNtr6sRvwapkREW-emk.woff2)
                format('woff2');
              unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
            }

            body {
              font-weight: 400;
              font-family: 'Zen Tokyo Zoo', Monaco, sans-serif;
              font-feature-settings: 'kern';
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale;
              text-rendering: optimizeLegibility;
            }
          `}
        />
        <Component {...pageProps} />
      </ThemeProvider>
    );
  }
}

Example GIF (notice how font is changing despite being optional and cache being disabled) -

example gif


Did anyone also experience similar problem? Thanks in advance!

1 Answers

Optional still swaps your fonts if the browser decides it's possible to do so. You're telling your browser to use the default font and then change to the custom one if it's possible to do so.

This may be coming late but hope it helps.

Related