Support for font-display

[iammatthias]

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/

[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

[iammatthias]

@gbreux now a bad fix. Ugly, like you said, but it gets the job done. Thanks!

Leaving this open for now, there might be a more elegant way of handling this.

[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

[foxdoubt]

Hi! I noticed #212 is still open from May 20. Any word on how much longer it might be until it's merged?

[iammatthias]

@foxdoubt the solution shared above by @dakebl works nicely.

[dakebl]

Hi! I noticed #212 is still open from May 20. Any word on how much longer it might be until it's merged?

Any thoughts on my PR @KyleAMathews?

[remy]

Hi there, just chiming in on this issue and the related PR - we're running perf tests on our site using typography.js and use font-display: swap is going to greatly improve our 'first meaningful content' and thus speed index.

Hoping it can be merged - unless there's a blocker?

[cbdp]

I apologise if this isn't relevant, but the solution proposed by @gbreux also worked for me while using the gatsby-plugin-web-font-loader. I'm leaving it here, if another future googler should stumble by this thread.

Example:

  {
            resolve: `gatsby-plugin-web-font-loader`,
            options: {
                google: {
                    families: [
                        `Vollkorn`, 
                        `Roboto&display=swap`
                    ]
                }
            }
        },

[ndom91]

Unfortunately the workaround mentioned by @gbreux now results in the following:

...Playfair+Display:100,300,500,600&display=swap

I noticed the PR to add an actual option for fontDisplay still wasn't merged. @KyleAMathews any chance you could merge that - #212 from May last year

[rodrigograca31]

@ndom91 you just made me waste at least 1 hour 😠

because even though that gets converted it seems it still works fine.

Also. seems this project is dead... ☠️😢