Skip to content

font-display: swap in the fonts css file #80

Description

@DevonRW

In the fonts.css file on media.wago.io add in font-display: swap; within all of the @font-face.

The goal is for the original font to display and then after the fonts that are being loaded by fonts.css are loaded then the font is swapped in by the browser. This helps a user see text on the site before the fonts are fully loaded. Some testing is needed with this to ensure that the system font and the fonts.css fonts aren't REALLY different while waiting for the fonts to download.

Example usage:

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff'),
       url(/path/to/fonts/examplefont.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions