Support for font-display

Google Fonts is adding support for font-display. It would be great to add support to Typography.js.

More info: https://www.zachleat.com/web/google-fonts-display/

[dakebl]

Hello, I’ve added fontDisplay as a valid option for the config object in this PR: #212

For example:

{
  fontDisplay: 'swap',
  googleFonts: [
    {
      name: "Noto Sans JP",
      styles: ["300", "400", "500", "700"]
    },
    {
      name: "Roboto Condensed",
      styles: ["700"]
    }
  ]
}

Which would generate a url of: http://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700|Roboto+Condensed:700&display=swap

[gbreux]

Agreed 😃

Although you can already achieve that in an ugly way by setting the &display=swap query param at the last item of the styles array of the googleFonts props.

googleFonts: [
    {
      name: "Noto Sans JP",
      styles: ["300", "400", "500", "700"]
    },
    {
      name: "Roboto Condensed",
      styles: ["700&display=swap"]
    }
  ]

will be rendered as: http://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700|Roboto+Condensed:700&display=swap