feat: allow for list of custom fonts

backport of #269
nuxt-community · Feb 17, 2020 · fa008f5 · fa008f5
1 parent 4e73223
commit fa008f5
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/src/font.ts b/src/font.ts
@@ -2,7 +2,7 @@ import { ModuleThis } from '@nuxt/types/config/module'
 import { prependData as sassPrependData } from './sass'
 
 export interface FontOptions {
-  family?: string
+  family?: string | string[]
   size?: number
 }
 
@@ -22,7 +22,12 @@ export default function setupFont (this: ModuleThis, options: FontOptions) {
   }
 
   // Add font-family custom variable (only if not Roboto, cause already default in Vuetify styles)
-  options.family !== 'Roboto' && sassPrependData.call(this, `$body-font-family: '${options.family}', sans-serif`)
+  if (options.family !== 'Roboto') {
+    const userFontFamily = Array.isArray(options.family)
+      ? options.family.map(x => `'${x}'`).join(', ')
+      : `'${options.family}'`
+    sassPrependData.call(this, `$body-font-family: ${userFontFamily}, sans-serif`)
+  }
 
   // Add font-size custom variable
   options.size && sassPrependData.call(this, `$font-size-root: ${options.size}px`)

diff --git a/test/module.test.ts b/test/module.test.ts
@@ -92,12 +92,26 @@ describe('setupFont', () => {
     })
 
     const { sass, scss } = nuxt.options.build.loaders
+    const expectedFont = "$body-font-family: 'Montserrat', sans-serif"
+    const expectedSize = '$font-size-root: 20px'
 
-    expect(sass.prependData).toContain("$body-font-family: 'Montserrat', sans-serif")
-    expect(scss.prependData).toContain("$body-font-family: 'Montserrat', sans-serif;")
+    expect(sass.prependData).toContain(expectedFont)
+    expect(sass.prependData).toContain(expectedSize)
 
-    expect(sass.prependData).toContain('$font-size-root: 20px')
-    expect(scss.prependData).toContain('$font-size-root: 20px;')
+    expect(scss.prependData).toContain(expectedFont + ';')
+    expect(scss.prependData).toContain(expectedSize + ';')
+  })
+
+  test('with list of fonts', () => {
+    setupFont({
+      family: ['Montserrat', 'Roboto']
+    })
+
+    const { sass, scss } = nuxt.options.build.loaders
+    const expected = "$body-font-family: 'Montserrat', 'Roboto', sans-serif"
+
+    expect(sass.prependData).toContain(expected)
+    expect(scss.prependData).toContain(expected + ';')
   })
 })