chore: use CDN for loading fonts

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zerologin/elements",
   "description": "Zerologin auth web component",
-  "version": "0.0.7-beta",
+  "version": "0.0.8-beta",
   "private": false,
   "files": [
     "dist/"
@@ -36,10 +36,11 @@
     "vue": "^3.2.37"
   },
   "devDependencies": {
+    "@dolu/vite-plugin-fonts": "^0.6.0",
     "@vitejs/plugin-vue": "^3.1.0",
     "sass": "^1.55.0",
     "typescript": "^4.6.4",
     "vite": "^3.1.0",
     "vue-tsc": "^0.40.4"
   }
-}
+}

src/components/zerologin.ce.vue

@@ -186,22 +186,6 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 @use "sass:math";
-@import url("https://api.fonts.coollabs.io/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@font-face {
-  font-family: "SF Pro Display";
-  src: url("../fonts/SF-Pro-Display-Regular.otf") format("opentype");
-  font-weight: 700;
-}
-@font-face {
-  font-family: "SF Pro Display";
-  src: url("../fonts/SF-Pro-Display-Light.otf") format("opentype");
-  font-weight: 500;
-}
-@font-face {
-  font-family: "SF Pro Display";
-  src: url("../fonts/SF-Pro-Display-Thin.otf") format("opentype");
-  font-weight: 400;
-}
 
 $white: #fff;
 $black: #000;
@@ -239,7 +223,7 @@ $gray-primary-color-active: mix(
 );
 
 .zerologin {
-  font-family: "SF Pro Display";
+  font-family: "Inter", sans-serif;
   color: #fff;
   display: flex;
   flex-direction: column;
@@ -270,7 +254,7 @@ $gray-primary-color-active: mix(
   .zl-scan-text {
     font-style: normal;
     font-weight: 400;
-    font-size: 13px;
+    font-size: 14px;
     text-align: justify;
   }
 

vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
+import { VitePluginFonts } from '@dolu/vite-plugin-fonts'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -11,10 +12,33 @@ export default defineConfig({
       fileName: (format) => `zerologin.${format}.js`,
     },
     rollupOptions: {
-      external: '~/src/assets/icons/logo.svg'
-    }
+      external: ['~/src/assets/icons/logo.svg'],
+    },
   },
   plugins: [
     vue({ customElement: true }),
+    VitePluginFonts({
+      google: {
+        baseUrl: 'https://api.fonts.coollabs.io/css2',
+        families: [{
+          /**
+           * Family name (required)
+           */
+          name: 'Inter',
+
+          /**
+           * Family styles
+           */
+          styles: 'wght@400;500;600;700',
+
+          /**
+           * enable non-blocking renderer
+           *   <link rel="preload" href="xxx" as="style" onload="this.rel='stylesheet'">
+           * default: true
+           */
+          defer: true,
+        },],
+      },
+    }),
   ]
 })