refactor: use @nuxt/fonts (#92)

app/nuxt.config.ts

@@ -7,28 +7,17 @@ const dev = !!process.env.NUXT_DOCS_DEV
 const isProd = process.env.NODE_ENV === 'production'
 const ssr = Boolean(isProd || process.env.NUXT_DOCS_SSR)
 
-// Some modules are shameless and don't understand prepare mode and make nonsense warnings
-const isPrepare = Boolean(process.env.NUXT_DOCS_PREPARE)
-
 export default defineNuxtConfig({
  ssr,
- modules: [
- '@nuxt/content',
- '@nuxtjs/fontaine',
- !isPrepare && '@nuxtjs/google-fonts',
- '@nuxtjs/seo',
- isProd && '@nuxtjs/plausible',
- '@nuxt/ui',
- ],
+ modules: ['@nuxt/fonts', '@nuxt/content', '@nuxtjs/seo', isProd && '@nuxtjs/plausible', '@nuxt/ui'],
  ui: {
  icons: [],
  },
- fontMetrics: {
- fonts: ['Nunito'],
- },
- googleFonts: {
- display: 'swap',
- download: true,
+ fonts: {
+ families: [{ name: 'Nunito', provider: 'bunny' }],
+ defaults: {
+ weights: [400, 500, 600, 700],
+ },
  },
  app: {
  head: {

app/tailwind.config.ts

@@ -26,7 +26,7 @@ export default <Partial<Config>>{
  theme: {
  extend: {
  fontFamily: {
- sans: ['nunito', 'sans-serif', ...defaultTheme.fontFamily.sans],
+ sans: ['Nunito', 'sans-serif', ...defaultTheme.fontFamily.sans],
  },
  colors: {
  yellow: {

cli/setup.mjs

@@ -40,12 +40,6 @@ export async function setupDocs(docsDir, opts = {}) {
  // @ts-ignore
  docs: docsconfig,
  // @ts-ignore
- googleFonts: {
- families: {
- Nunito: [400, 500, 600, 700], // in layer, it duplicates. why? (god knows?)
- },
- },
- // @ts-ignore
  site: {
  name: docsconfig.name || '',
  description: docsconfig.description || '',

package.json

@@ -32,9 +32,8 @@
  "dependencies": {
  "@headlessui/vue": "^1.7.19",
  "@nuxt/content": "^2.12.0",
+ "@nuxt/fonts": "^0.0.1",
  "@nuxt/ui-pro": "^1.0.2",
- "@nuxtjs/fontaine": "^0.4.1",
- "@nuxtjs/google-fonts": "^3.1.3",
  "@nuxtjs/plausible": "^0.2.4",
  "@nuxtjs/seo": "^2.0.0-rc.8",
  "@nuxtjs/tailwindcss": "^6.11.4",