Move Google Fonts to @nuxtjs/google-fonts

Remove external @import URL lines from assets/scss/main.scss and add the @nuxtjs/google-fonts module and configuration in nuxt.config.ts (register Open Sans and Montserrat, set display: 'swap', download: true). Also add @nuxtjs/google-fonts to devDependencies in package.json. Centralizes font loading, enables local font download/optimization, and avoids inline external CSS imports.

Author: shweta2101

assets/scss/main.scss

@@ -1,6 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
-
 @import "theme.scss";
 @import "bootstrap/scss/bootstrap.scss";
 @import "maplibre-gl/dist/maplibre-gl.css";

nuxt.config.ts

@@ -3,8 +3,17 @@ export default defineNuxtConfig({
   modules: [
     '@bootstrap-vue-next/nuxt',
     '@nuxt/eslint',
+    '@nuxtjs/google-fonts',
     '@sentry/nuxt/module',
   ],
+  googleFonts: {
+    families: {
+      'Open Sans': [300, 400, 500, 600, 700, 800],
+      Montserrat: [100, 300, 400, 500, 600, 700, 800, 900],
+    },
+    display: 'swap',
+    download: true,
+  },
   ssr: false,
   devtools: { enabled: true },
   app: {

package.json

@@ -35,6 +35,7 @@
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.12.1",
+    "@nuxtjs/google-fonts": "^3.2.0",
     "@types/bootstrap": "^5.2.10",
     "@types/geojson": "^7946.0.16",
     "eslint": "^9.39.2",