Font-display support?

[valeriosillari]

Lately Google Fonts seems to support (finally) font-display option for better performance.

https://scotch.io/bar-talk/google-fonts-now-supports-font-display

Is it possible to use set it right now with this package?
If not, it could add as feature in a next release?

Got no info about it and asking. It would be awesome :)

[moso]

As per Addy Osmani's tweet it already supports &display=swap.

You can add this to this loader too, however, it only works with single fonts.

Example:

{
    webfontloader: {
        google: {
            families: ['Open+Sans:300:400:600&display=swap']
        }
    },
}

However, if you pipe the fonts (['Open+Sans:300:400|Roboto:300:700']), it doesn't currently work because of Typekit being slow on upgrades. Adding &display=swap to any or both of the fonts in the array doesn't work either - at least not in my tests.

But since this webfontloader is built on top of Typekit's webfontloader, you can make a custom loader and supply the URL's yourself, like so:

{
    webfontloader: {
        custom: {
            families: [
                'Open Sans:n3,n4',
                'Roboto:n3,n7'
            ],
            urls: [
                'https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap'
                'https://fonts.googleapis.com/css?family=Roboto:300,700&display=swap'
            ]
        }
    },
}

You can then add two or more fonts if you want. Notice the nx where x is an int, corresponding to the font-weight, and the URLs have to be in the correct order, otherwise you'll get the naming incorrect.

I don't know if @manniL or @mangerlahn wants to wait for the PR on Typekit (it's a month old as of June 2019), or if they can make some magic.

So all in all, it works, you just have to add a few more lines of code 😉

[valeriosillari]

Works!!!

Thanks 👍

[manniL]

Thanks to @moso for the detailed answer.

I'd accept a PR for the README ☺️

[valeriosillari]

Yep! If ok also for @moso I could try to do a PR for the README in the weekend

[valeriosillari]

PR done and ready to be checked.

[valeriosillari]

Pr merged. Info now are in the ReadMe File. Issue closed.