Google Fonts в Nuxt с TailwindCSS

Услугата на Google за шрифтовете е страшно удобна за използване. Има голям избор от шрифтове и лесен начин да ги филтрираш спрямо нуждите ти. В екосистемата на Nuxt има много добър модул за интегриране на Google шрифтове в приложението Ви, но аз ще Ви покажа малко по-различен подход.

В конфигурацията си Nuxt позволява да обработваме Head парчето от HTML-а. Има и други места на които може да го правите, но за целта ще използвам конфигурационния файл nuxt.config.ts.

Когато изберете шрифт от Google, той Ви предоставя код, който да добавите към приложението си. Кода има следния вид:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

За да добавите това парче от код в nuxt.config.ts трябва да го разделите на части в link масива в конфигурацията.

//nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: "preconnect", href: "https://fonts.googleapis.com" },
        { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: "" },
        { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Roboto&display=swap" }
      ]
    }
  }

Изключително просто и елегантно решение. При билдването горния код се инжектира в Head-а на приложението Ви и шрифтовете се зареждат от Google. Това работи прекрасно, но понякога не е достатъчно.

Например, ако генерирате приложението си статично с npx nuxt generate. Тогава е добре да помислите как да оптимизирате зареждането на шрифтовете, защото може да достигнат доста големи обеми.

Става лесно, като първоначално променим стойността на rel атрибута и след извикването на onload събитието го възстановяваме.

//nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: "preconnect", href: "https://fonts.googleapis.com" },
        { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: "" },
        { rel: "preload", as: "style", onload: "this.onload = null; this.rel = 'stylesheet';", href: "https://fonts.googleapis.com/css2?family=Roboto&display=swap" }
      ]
    }
  }

След като шрифта е зареден трябва да го популяризираме в приложението. В моя случай използвам TailwindCSS.

TailwindCSS Ви позволява да използвате предварително подготвени фамилии от шрифтове, но са предоставили и лесен начин да ги преконфигурирате в конфигурационния файл tailwind.config.js.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */

export const theme = {
  fontFamily: {
    "sans": ["Inter", "sans-serif"],
    "serif": ["Playfair Display", "serif"],
  },
};

От тук на там CSS класът font-sans ще рисува текста Ви с Roboto шрифта.