Display swap

[gizburdt]

Hi,

Looks like Google changed the url since this feature was released. Can you maybe tell me how to implement the display=swap for these fonts?

urls: [
  'https://fonts.googleapis.com/css?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&display=swap',
  'https://fonts.googleapis.com/css?family=Nunito+Sans:ital,wght@0,600;0,700;0,800;0,900;1,400;1,700;1,800;1,900&display=swap'
],

I'm referring to 400;0 and 900;1 for example. With Roboto I have a 400;0 and a 400 How does my families: [] need to look like?

[zoellner]

Check #44 for a similar example

[gizburdt]

Thanks, will give it a try :)

[gizburdt]

Tried it, with this code. But unfortunatly the fonts aren't loading. Am I doing something wrong? :)

webfontloader: {
        google: {
            families: [
              'Roboto',
              'Nunito+Sans',
            ],
            urls: [
              'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&display=swap',
              'https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,600;0,700;0,800;0,900;1,400;1,700;1,800;1,900&display=swap',
            ]
        },
    },

[zoellner]

try replacing the & in your urls with just &

[gizburdt]

Didn't help :( Site keeps showing the default font when code above is added.

Do I need to set something in my CSS?

[gizburdt]

Any idea? :)

[moso]

@gizburdt As a workaround (and a complete copy/paste fix for your issue), try using the custom example in the README:

webfontloader: {
    custom: {
        families: [
            'Roboto:i3,i4,i5,i7,i9,n4',
            'Nunito Sans:i6,i7,i8,i9,n4,n7,n8,n9',
        ],
        urls: [
            'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&display=swap',
            'https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,600;0,700;0,800;0,900;1,400;1,700;1,800;1,900&display=swap',
        ]
    },
}

The i<number> and n<number> are quite important to the webfontloader, as this implies the italic or normal - even though it's defined in the url. Trial and error has learnt me this.

[gizburdt]

Works, thanks!