feat(vue) add fontface config to vue

{{cookiecutter.project_slug}}/clients/web/vue3/src/main.css

@@ -1,3 +1,24 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/*TODO: Add your own custom fonts for the project. Make sure you also update the entry in tailwind.config.js to match the font family you use*/
+@layer base {
+  @font-face {
+    font-family: 'Montserrat';
+    font-display: swap;
+    font-style: italic;
+    src:
+      url('assets/fonts/montserrat-italic-variable.woff2') format('woff2'),
+      url('assets/fonts/montserrat-italic-variable.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: 'Montserrat';
+    font-display: swap;
+    font-style: normal;
+    src:
+      url('assets/fonts/montserrat-variable.woff2') format('woff2'),
+      url('assets/fonts/montserrat-variable.woff') format('woff');
+  }
+}

{{cookiecutter.project_slug}}/clients/web/vue3/tailwind.config.js

@@ -1,3 +1,5 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./index.html', './src/**/*.{vue,js}'],
@@ -12,6 +14,8 @@ module.exports = {
         error: '#d72638',
       },
       fontFamily: {
+        //TODO: match font family from index.css @font-face directive
+        sans: ['Montserrat', ...defaultTheme.fontFamily.sans] ,
         avenir: ['Avenir', 'Helvetica', 'Arial', 'sans-serif'],
       },
     },