### Install astro-font

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/README.md

Installs the astro-font package using npm, yarn, or pnpm.

```bash
npm install astro-font
## or yarn
yarn add astro-font
## or pnpm
pnpm add astro-font
```

--------------------------------

### Install astro-font

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/packages/astro-font/README.md

Installs the astro-font package using npm, yarn, or pnpm.

```bash
npm install astro-font
## or yarn
yarn add astro-font
## or pnpm
pnpm add astro-font
```

--------------------------------

### Configure CSS Variable for Astro Font

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/README.md

Demonstrates how to use the `cssVariable` attribute to specify a CSS variable for a font. This allows you to control the font-family using CSS variables, with an example of setting it to 'astro-font'.

```astro
---
import { join } from "node:path"
---

<AstroFont
  config={[
    {
      name: "Afacad",
      src: [
        {
          style: 'bold',
          weight: '700',
          path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
        },
      ],
      preload: true,
      display: "swap",
      fallback: "sans-serif",

      // My Custom CSS Selector
      // Type: ClassName
      selector: ".custom_class",

    },
    {
      name: "Inter",
      src: [
        {
          weight: '400',
          style: 'normal',
          path: join(process.cwd(), 'public', 'fonts', 'Inter-Regular.ttf')
        }
      ],
      preload: true,
      display: "swap",
      fallback: "serif",

      // My Custom CSS Variable
      // Type: CSS Variable
      cssVariable: "astro-font",

      // and now use it as style="font-family: var(--astro-font)"
    },
  ]}
/>
```

--------------------------------

### Configure CSS Variable for Astro Font

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/packages/astro-font/README.md

Demonstrates how to use the `cssVariable` attribute to specify a CSS variable for a font. This allows you to control the font-family using CSS variables, with an example of setting it to 'astro-font'.

```astro
---
import { join } from "node:path"
---

<AstroFont
  config={[
    {
      name: "Afacad",
      src: [
        {
          style: 'bold',
          weight: '700',
          path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
        },
      ],
      preload: true,
      display: "swap",
      fallback: "sans-serif",

      // My Custom CSS Selector
      // Type: ClassName
      selector: ".custom_class",

    },
    {
      name: "Inter",
      src: [
        {
          weight: '400',
          style: 'normal',
          path: join(process.cwd(), 'public', 'fonts', 'Inter-Regular.ttf')
        }
      ],
      preload: true,
      display: "swap",
      fallback: "serif",

      // My Custom CSS Variable
      // Type: CSS Variable
      cssVariable: "astro-font",

      // and now use it as style="font-family: var(--astro-font)"
    },
  ]}
/>
```

--------------------------------

### Configure Fallback Font Name for Astro Font

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/README.md

Illustrates how to use the `fallbackName` attribute to set a custom fallback font family name in CSS. This example shows setting custom fallback names for 'Afacad' and 'Inter' fonts.

```astro
---
import { join } from "node:path"
---

<AstroFont
  config={[
    {
      name: "Afacad",
      src: [
        {
          style: 'bold',
          weight: '700',
          path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
        },
      ],
      preload: true,
      display: "swap",
      fallback: "sans-serif",
      selector: ".custom_class",

      // My Custom Fallback Font Name
      fallbackName: "Afacad Override",

    },
    {
      name: "Inter",
      src: [
        {
          weight: '400',
          style: 'normal',
          path: join(process.cwd(), 'public', 'fonts', 'Inter-Regular.ttf')
        }
      ],
      preload: true,
      display: "swap",
      fallback: "serif",
      cssVariable: "astro-font",

      // My Custom Fallback Font Name
      fallbackName: "Inter Custom Override",
      
    },
  ]}
/>
```

--------------------------------

### Configure Fallback Font Name for Astro Font

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/packages/astro-font/README.md

Illustrates how to use the `fallbackName` attribute to set a custom fallback font family name in CSS. This example shows setting custom fallback names for 'Afacad' and 'Inter' fonts.

```astro
---
import { join } from "node:path"
---

<AstroFont
  config={[
    {
      name: "Afacad",
      src: [
        {
          style: 'bold',
          weight: '700',
          path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
        },
      ],
      preload: true,
      display: "swap",
      fallback: "sans-serif",
      selector: ".custom_class",

      // My Custom Fallback Font Name
      fallbackName: "Afacad Override",

    },
    {
      name: "Inter",
      src: [
        {
          weight: '400',
          style: 'normal',
          path: join(process.cwd(), 'public', 'fonts', 'Inter-Regular.ttf')
        }
      ],
      preload: true,
      display: "swap",
      fallback: "serif",
      cssVariable: "astro-font",

      // My Custom Fallback Font Name
      fallbackName: "Inter Custom Override",
      
    },
  ]}
/>
```

--------------------------------

### Astro Font Configuration with Fetch

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/packages/astro-font/README.md

Demonstrates how to configure Astro Font to fetch fonts from Google Fonts. The `fetch: true` option instructs the library to download and manage the font files locally. This configuration includes settings for preloading, font display strategy, fallback fonts, and cache directory.

```astro
<AstroFont
  config={[
    {
      src: [],
      preload: true,
      display: 'swap',
      name: 'vazirmatn',
      fallback: 'monospace',
      fetch: true,
      verbose: true,
      cacheDir: '.cache',
      googleFontsURL: 'https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap',
    },
    {
      src: [],
      preload: true,
      display: 'block',
      name: 'material-icon-outlined',
      fallback: 'monospace',
      fetch: true,
      verbose: true,
      cacheDir: '.cache',
      googleFontsURL: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0',
    },
  ]}
/>
```

--------------------------------

### Astro Font Configuration with Fetch

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/README.md

Demonstrates how to configure Astro Font to fetch fonts from Google Fonts. The `fetch: true` option instructs the library to download and manage the font files locally. This configuration includes settings for preloading, font display strategy, fallback fonts, and cache directory.

```astro
<AstroFont
  config={[
    {
      src: [],
      preload: true,
      display: 'swap',
      name: 'vazirmatn',
      fallback: 'monospace',
      fetch: true,
      verbose: true,
      cacheDir: '.cache',
      googleFontsURL: 'https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap',
    },
    {
      src: [],
      preload: true,
      display: 'block',
      name: 'material-icon-outlined',
      fallback: 'monospace',
      fetch: true,
      verbose: true,
      cacheDir: '.cache',
      googleFontsURL: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0',
    },
  ]}
/>
```

--------------------------------

### Astro Font Integration

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/README.md

Shows how to add the Astro Font integration to an Astro project's configuration file. This integration ensures that fetched font files are correctly bundled with the Astro build, making them available for self-hosting.

```javascript
// File: astro.config.mjs
import { astroFont } from 'astro-font/integration'

// ...
integrations: [
astroFont()
]
// ...
```

--------------------------------

### Astro Font Integration

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/packages/astro-font/README.md

Shows how to add the Astro Font integration to an Astro project's configuration file. This integration ensures that fetched font files are correctly bundled with the Astro build, making them available for self-hosting.

```javascript
// File: astro.config.mjs
import { astroFont } from 'astro-font/integration'

// ...
integrations: [
astroFont()
]
// ...
```

--------------------------------

### Using Multiple Fonts

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/README.md

Demonstrates how to import and use multiple fonts within a single AstroFont configuration. This involves extending the `config` array with different font definitions.

```astro
---
import { join } from "node:path";
import { AstroFont } from "astro-font";
---

<head>
    <AstroFont
      config={[
        {
          name: "Afacad",
          src: [
            {
              style: 'bold',
              weight: '700',
              path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
            },
          ],
          preload: true,
          display: "swap",
          selector: "body",
          fallback: "sans-serif",
        },
        {
          name: "Inter",
          src: [
            {
              weight: '400',
              style: 'normal',
              path: join(process.cwd(), 'public', 'fonts', 'Inter-Regular.ttf')
            }
          ],
          preload: true,
          display: "swap",
          selector: "body > span",
          fallback: "serif",
        },
      ]}
    />
</head>
```

--------------------------------

### Configuring CSS Classes with Selector

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/README.md

Shows how to use the `selector` attribute within the astro-font configuration to target specific CSS classes or selectors for font application. This allows for more granular control over where font styles are applied.

```astro
---
import { join } from "node:path"
---

<AstroFont
  config={[
    {
      name: "Afacad",
      src: [
        {
          style: 'bold',
          weight: '700',
          path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
        },
      ],
      preload: true,
      display: "swap",
      fallback: "sans-serif",

      // My Custom CSS Selector
      // Type: ClassName
      selector: ".custom_class",

    },
    {
      name: "Inter",
      src: [
        {
          weight: '400',
          style: 'normal',
          path: join(process.cwd(), 'public', 'fonts', 'Inter-Regular.ttf')
        }
      ],
      preload: true,
      display: "swap",
      fallback: "serif",

      // My Custom CSS Selector
      // Type: CSS Selector
      selector: "body > span",
    },
  ]}
/>
```

--------------------------------

### Using Multiple Fonts

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/packages/astro-font/README.md

Demonstrates how to import and use multiple fonts within a single AstroFont configuration. This involves extending the `config` array with different font definitions.

```astro
---
import { join } from "node:path";
import { AstroFont } from "astro-font";
---

<head>
    <AstroFont
      config={[
        {
          name: "Afacad",
          src: [
            {
              style: 'bold',
              weight: '700',
              path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
            },
          ],
          preload: true,
          display: "swap",
          selector: "body",
          fallback: "sans-serif",
        },
        {
          name: "Inter",
          src: [
            {
              weight: '400',
              style: 'normal',
              path: join(process.cwd(), 'public', 'fonts', 'Inter-Regular.ttf')
            }
          ],
          preload: true,
          display: "swap",
          selector: "body > span",
          fallback: "serif",
        },
      ]}
    />
</head>
```

--------------------------------

### Configuring CSS Classes with Selector

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/packages/astro-font/README.md

Shows how to use the `selector` attribute within the astro-font configuration to target specific CSS classes or selectors for font application. This allows for more granular control over where font styles are applied.

```astro
---
import { join } from "node:path"
---

<AstroFont
  config={[
    {
      name: "Afacad",
      src: [
        {
          style: 'bold',
          weight: '700',
          path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
        },
      ],
      preload: true,
      display: "swap",
      fallback: "sans-serif",

      // My Custom CSS Selector
      // Type: ClassName
      selector: ".custom_class",

    },
    {
      name: "Inter",
      src: [
        {
          weight: '400',
          style: 'normal',
          path: join(process.cwd(), 'public', 'fonts', 'Inter-Regular.ttf')
        }
      ],
      preload: true,
      display: "swap",
      fallback: "serif",

      // My Custom CSS Selector
      // Type: CSS Selector
      selector: "body > span",
    },
  ]}
/>
```

--------------------------------

### Opt out of bundling Node.js built-ins for Cloudflare

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/README.md

Shows how to modify the `astro.config.mjs` file to opt out of bundling Node.js built-ins, which is necessary for using Node.js imports like `node:path` in Cloudflare Workers. This involves adding a `vite.ssr.external` configuration.

```diff
// File: astro.config.mjs

import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

// https://astro.build/config
export default defineConfig({
    output: 'server',
    adapter: cloudflare(),
+    vite: {
+        ssr: {
+          external: ["buffer", "path", "fs", "os", "crypto", "async_hooks"].map((i) => `node:${i}`),
+        },
+        // make sure to use node:fs, node:path, or node:os if you are using it in your project instead of fs, path or os
+    },
});
```

--------------------------------

### Optimize Local Fonts

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/README.md

Configures astro-font to optimize local fonts. It uses Node.js `path.join` to specify the font file paths within the project's public directory.

```astro
---
import { join } from "node:path";
import { AstroFont } from "astro-font";
---

<head>
    <AstroFont
      config={[
        {
          name: "Afacad",
          src: [
            {
              style: 'normal',
              weight: '400',
              path: join(process.cwd(), 'public', 'fonts', 'Afacad-Regular.ttf')
            },
            {
              style: 'medium',
              weight: '500',
              path: join(process.cwd(), 'public', 'fonts', 'Afacad-Medium.ttf')
            },
          ],
          preload: false,
          display: "swap",
          selector: "body",
          fallback: "sans-serif",
        },
      ]}
    />
</head>
```

--------------------------------

### Astro Font Configuration for Cloudflare Workers (SSR)

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/README.md

Provides a code snippet for configuring Astro Font with local fonts when using Astro's server-side rendering with Cloudflare. It dynamically sets the font prefix based on the environment to correctly reference local font files.

```astro
---
import { join } from "node:path";
import { AstroFont } from "astro-font";

const fontPrefix = import.meta.env.PROD
  ? Astro.site.toString()
  : join(process.cwd(), "public");
---

<AstroFont
    config={[
        {
            name: "Editorial New",
            src: [
                {
                    style: "italic",
                    weight: "500",
                    path: join(
                        fontPrefix,
                        "fonts",
                        "PPEditorialNew-MediumItalic.woff2"
                    ),
                },
            ],
            preload: true,
            display: "swap",
            selector: "body",
            fallback: "sans-serif",
        }
    ]}
/>
```

--------------------------------

### Optimize Local Fonts

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/packages/astro-font/README.md

Configures astro-font to optimize local fonts. It uses Node.js `path.join` to specify the font file paths within the project's public directory.

```astro
---
import { join } from "node:path";
import { AstroFont } from "astro-font";
---

<head>
    <AstroFont
      config={[
        {
          name: "Afacad",
          src: [
            {
              style: 'normal',
              weight: '400',
              path: join(process.cwd(), 'public', 'fonts', 'Afacad-Regular.ttf')
            },
            {
              style: 'medium',
              weight: '500',
              path: join(process.cwd(), 'public', 'fonts', 'Afacad-Medium.ttf')
            },
          ],
          preload: false,
          display: "swap",
          selector: "body",
          fallback: "sans-serif",
        },
      ]}
    />
</head>
```

--------------------------------

### Opt out of bundling Node.js built-ins for Cloudflare

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/packages/astro-font/README.md

Shows how to modify the `astro.config.mjs` file to opt out of bundling Node.js built-ins, which is necessary for using Node.js imports like `node:path` in Cloudflare Workers. This involves adding a `vite.ssr.external` configuration.

```diff
// File: astro.config.mjs

import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

// https://astro.build/config
export default defineConfig({
    output: 'server',
    adapter: cloudflare(),
+    vite: {
+        ssr: {
+          external: ["buffer", "path", "fs", "os", "crypto", "async_hooks"].map((i) => `node:${i}`),
+        },
+        // make sure to use node:fs, node:path, or node:os if you are using it in your project instead of fs, path or os
+    },
});
```

--------------------------------

### Astro Font Configuration for Cloudflare Workers (SSR)

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/packages/astro-font/README.md

Provides a code snippet for configuring Astro Font with local fonts when using Astro's server-side rendering with Cloudflare. It dynamically sets the font prefix based on the environment to correctly reference local font files.

```astro
---
import { join } from "node:path";
import { AstroFont } from "astro-font";

const fontPrefix = import.meta.env.PROD
  ? Astro.site.toString()
  : join(process.cwd(), "public");
---

<AstroFont
    config={[
        {
            name: "Editorial New",
            src: [
                {
                    style: "italic",
                    weight: "500",
                    path: join(
                        fontPrefix,
                        "fonts",
                        "PPEditorialNew-MediumItalic.woff2"
                    ),
                },
            ],
            preload: true,
            display: "swap",
            selector: "body",
            fallback: "sans-serif",
        }
    ]}
/>
```

--------------------------------

### Optimize Picked Google Fonts

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/packages/astro-font/README.md

Configures astro-font to optimize specific fonts picked from a Google Fonts URL. It requires providing the direct path to the font file.

```astro
---
import { AstroFont } from "astro-font";
---

<head>
    <AstroFont
      config={[
        {
          name: "Afacad",
          src: [
            {
              style: 'bold',
              weight: '700',
              // Picked up font URL by manually visiting Google Fonts URL
              path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
            },
          ],
          preload: true,
          display: "swap",
          selector: "body",
          fallback: "sans-serif",
        },
      ]}
    />
</head>
```

--------------------------------

### Optimize Picked Google Fonts

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/README.md

Configures astro-font to optimize specific fonts picked from a Google Fonts URL. It requires providing the direct path to the font file.

```astro
---
import { AstroFont } from "astro-font";
---

<head>
    <AstroFont
      config={[
        {
          name: "Afacad",
          src: [
            {
              style: 'bold',
              weight: '700',
              // Picked up font URL by manually visiting Google Fonts URL
              path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
            },
          ],
          preload: true,
          display: "swap",
          selector: "body",
          fallback: "sans-serif",
        },
      ]}
    />
</head>
```

--------------------------------

### Optimize Google Fonts Directly

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/README.md

Configures astro-font to optimize Google Fonts by providing the Google Fonts URL directly. This snippet shows how to include the AstroFont component in the head of an Astro layout.

```astro
---
import { AstroFont } from "astro-font";
---

<head>
    <AstroFont
      config={[
        {
          src: [],
          name: "Poppins",
          // Google Fonts URL
          googleFontsURL: 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,400;1,700&display=swap',
          preload: true,
          display: "swap",
          selector: "body",
          fallback: "sans-serif",
        },
      ]}
    />
</head>
```

--------------------------------

### Optimize Google Fonts Directly

Source: https://github.com/rishi-raj-jain/astro-font/blob/master/packages/astro-font/README.md

Configures astro-font to optimize Google Fonts by providing the Google Fonts URL directly. This snippet shows how to include the AstroFont component in the head of an Astro layout.

```astro
---
import { AstroFont } from "astro-font";
---

<head>
    <AstroFont
      config={[
        {
          src: [],
          name: "Poppins",
          // Google Fonts URL
          googleFontsURL: 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,400;1,700&display=swap',
          preload: true,
          display: "swap",
          selector: "body",
          fallback: "sans-serif",
        },
      ]}
    />
</head>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.