feat!: default to font-display: swap unless preloading

This commit sets the font-display default to 'swap',
unless the preload option is set to true. Either way,
the font-display value is still user-overridable using
the display option.

We generally recommend using 'swap' because it's the
best way to avoid FOIT (flash of invisible text) and
optimize LCP while still guaranteeing the web font
will load (unlike optonal).

src/module.ts

@@ -21,7 +21,7 @@ const CONFIG_KEY = 'googleFonts'
 const nuxtModule: Module<ModuleOptions> = function (moduleOptions) {
   const DEFAULTS: ModuleOptions = {
     families: {},
-    display: null,
+    display: null, // set to 'swap' later if no preload or user value
     subsets: [],
     text: null,
     prefetch: true,
@@ -46,6 +46,12 @@ const nuxtModule: Module<ModuleOptions> = function (moduleOptions) {
       DEFAULTS
     )
 
+    // If user hasn't set the display value manually and isn't using
+    // a preload, set the default display value to 'swap'
+    if (!options.display && !options.preload) {
+      options.display = 'swap'
+    }
+
     const googleFontsHelper = new GoogleFontsHelper({
       families: options.families,
       display: options.display,

test/basic.test.ts

@@ -26,7 +26,7 @@ describe('basic', () => {
     expect(body).not.toContain('<link data-n-head="ssr" data-hid="gf-preload" rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto&amp;family=Lato">')
   })
 
-  test('no has stylesheet link', async () => {
+  test('does not have static stylesheet link', async () => {
     const { body } = await get('/')
     expect(body).not.toContain('<link data-n-head="ssr" data-hid="gf-style" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&amp;family=Lato">')
   })
@@ -36,6 +36,11 @@ describe('basic', () => {
     expect(body).toContain('data-hid="gf-script"')
   })
 
+  test('has display: swap in font script', async () => {
+    const { body } = await get('/')
+    expect(body).toContain('display=swap')
+  })
+
   test('has noscript fallback', async () => {
     const { body } = await get('/')
     expect(body).toContain('data-hid="gf-noscript"')

test/use-stylesheet.test.ts

@@ -26,6 +26,11 @@ describe('use stylesheet', () => {
     expect(body).toContain('<link data-n-head="ssr" data-hid="gf-style" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&amp;family=Lato">')
   })
 
+  test('has stylesheet that does not contain display swap', async () => {
+    const { body } = await get('/')
+    expect(body).not.toContain('display=swap')
+  })
+
   test('no has script', async () => {
     const { body } = await get('/')
     expect(body).not.toContain('data-hid="gf-script"')