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... ☠️😢

[ndom91]

Well it obviously didn't work for me so we were apparently doing something different. No need to get all angry about it, no one's forcing you to "waste" your time on opensource.

[rodrigograca31]

no worries, I wasn't angry at you. I was just angry at me I guess (was late at night 😂)

You say didn't work for you? Do you still see the "warning" saying text should be visible while fonts load? (mine went away)

[ndom91]

Okay good to hear haha.

So I ended up not using typography.js actually, so unfortunately I can't comment any further on this specific issue.

[rodrigograca31]

:+1:

I also want to remove it from my project. Seem like unnecessary extra code that is not being maintained. It adds a bunch of JS code to my gatsby blog for "no reason".

[ndom91]

Yeah, if you don't need anythign fancy, just font loading. I suggest you check out Kyle's other typeface-xyz packages. They're simply npm packages which add a css file to import the said font file into your project. That way you can install a font from npm without thinking much about it. Not to mention the performance benefits of hosting fonts on your own domain.

[andria-dev]

Does anyone know of any good alternatives to Typography.js that:

• Is being maintained still.
• Styles all text-related elements.
• Provides rhythm() functions or similar.