Astro Font

Automatically optimize your Custom Fonts, Local Fonts, Fonts over any CDN a...

FontAstro
rishi-raj-jain/astro-fontwww.launchfa.st/features/astro-fontastro-font

README

Astro Font Optimization


astro-fontwill automatically optimize your Custom Fonts, Local Fonts, Fonts over any CDN and Google fonts for performance.

The project is inspired by the Next.js Font Optimization .

Installation


  1. ``` shell
  2. npm install astro-font
  3. ## or yarn
  4. yarn add astro-font
  5. ## or pnpm
  6. pnpm add astro-font
  7. ```

Google Fonts


Automatically optimize any Google Font. To use the font in all your pages, add it to ``file in an Astro layout:

Use Google Fonts URL directly


  1. ``` astro
  2. ---
  3. import { AstroFont } from "astro-font";
  4. ---

  6. <head>
  7.     <AstroFont
  8.       config={[
  9.         {
  10.           src: [],
  11.           name: "Poppins",
  12.           // Google Fonts URL
  13.           googleFontsURL: 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,400;1,700&display=swap',
  14.           preload: true,
  15.           display: "swap",
  16.           selector: "body",
  17.           fallback: "sans-serif",
  18.         },
  19.       ]}
  20.     />
  21. </head>
  22. ```

Pick fonts from Google Fonts URL


  1. ``` astro
  2. ---
  3. import { AstroFont } from "astro-font";
  4. ---

  6. <head>
  7.     <AstroFont
  8.       config={[
  9.         {
  10.           name: "Afacad",
  11.           src: [
  12.             {
  13.               style: 'bold',
  14.               weight: '700',
  15.               // Picked up font URL by manually visiting Google Fonts URL
  16.               path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
  17.             },
  18.           ],
  19.           preload: true,
  20.           display: "swap",
  21.           selector: "body",
  22.           fallback: "sans-serif",
  23.         },
  24.       ]}
  25.     />
  26. </head>
  27. ```

Local Fonts


  1. ``` astro
  2. ---
  3. import { join } from "node:path";
  4. import { AstroFont } from "astro-font";
  5. ---

  7. <head>
  8.     <AstroFont
  9.       config={[
  10.         {
  11.           name: "Afacad",
  12.           src: [
  13.             {
  14.               style: 'normal',
  15.               weight: '400',
  16.               path: join(process.cwd(), 'public', 'fonts', 'Afacad-Regular.ttf')
  17.             },
  18.             {
  19.               style: 'medium',
  20.               weight: '500',
  21.               path: join(process.cwd(), 'public', 'fonts', 'Afacad-Medium.ttf')
  22.             },
  23.           ],
  24.           preload: false,
  25.           display: "swap",
  26.           selector: "body",
  27.           fallback: "sans-serif",
  28.         },
  29.       ]}
  30.     />
  31. </head>
  32. ```

Using Multiple Fonts


You can import and use multiple fonts in your application. There are two approaches you can take.

Just extend the array of the config to contain the new collection of the fonts:

  1. ``` astro
  2. ---
  3. import { join } from "node:path";
  4. import { AstroFont } from "astro-font";
  5. ---

  7. <head>
  8.     <AstroFont
  9.       config={[
  10.         {
  11.           name: "Afacad",
  12.           src: [
  13.             {
  14.               style: 'bold',
  15.               weight: '700',
  16.               path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
  17.             },
  18.           ],
  19.           preload: true,
  20.           display: "swap",
  21.           selector: "body",
  22.           fallback: "sans-serif",
  23.         },
  24.         {
  25.           name: "Inter",
  26.           src: [
  27.             {
  28.               weight: '400',
  29.               style: 'normal',
  30.               path: join(process.cwd(), 'public', 'fonts', 'Inter-Regular.ttf')
  31.             }
  32.           ],
  33.           preload: true,
  34.           display: "swap",
  35.           selector: "body > span",
  36.           fallback: "serif",
  37.         },
  38.       ]}
  39.     />
  40. </head>
  41. ```

Configuring CSS Classes


The selectorattribute per config object can be used to configure which CSS class will reflect the whole CSS (automatically including the references to fallback fonts CSS).

  1. ``` astro
  2. ---
  3. import { join } from "node:path"
  4. ---

  6. <AstroFont
  7.   config={[
  8.     {
  9.       name: "Afacad",
  10.       src: [
  11.         {
  12.           style: 'bold',
  13.           weight: '700',
  14.           path: 'https://fonts.gstatic.com/s/afacad/v1/6NUK8FKMIQOGaw6wjYT7ZHG_zsBBfvLqagk-80KjZfJ_uw.woff2'
  15.         },
  16.       ],
  17.       preload: true,
  18.       display: "swap",
  19.       fallback: "sans-serif",

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

  25.     },
  26.     {
  27.       name: "Inter",
  28.       src: [
  29.         {
  30.           weight: '400',
  31.           style: 'normal',
  32.           path: join(process.cwd(), 'public', 'fonts', 'Inter-Regular.ttf')
  33.         }
  34.       ],
  35.       preload: true,
  36.       display: "swap",
  37.       fallback: "serif",

  39.       // My Custom CSS Selector
  40.       // Type: CSS Selector
  41.       selector: "body > span",
  42.     },
  43.   ]}
  44. />
  45. ```