Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat!: default to font-display: swap unless preloading (#88)
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).
  • Loading branch information
kara committed Jun 9, 2022
1 parent 6086082 commit 1e50410
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 2 deletions.
8 changes: 7 additions & 1 deletion src/module.ts
Expand Up @@ -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,
Expand All @@ -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,
Expand Down
7 changes: 6 additions & 1 deletion test/basic.test.ts
Expand Up @@ -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">')
})
Expand All @@ -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"')
Expand Down
5 changes: 5 additions & 0 deletions test/use-stylesheet.test.ts
Expand Up @@ -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"')
Expand Down

0 comments on commit 1e50410

Please sign in to comment.