rishi-raj-jain / astro-font Goto Github PK

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

Home Page: https://www.launchfa.st/features/astro-font

License: MIT License

Astro 26.86% TypeScript 72.36% JavaScript 0.78%

astro font

astro-font's People

Contributors

Stargazers

Watchers

Forkers

florian-lefebvre

astro-font's Issues

Add support for several urls per src

How to achieve this with your package?

@font-face {
  font-family: "Deacon Black";
  src:
    url("/assets/fonts/Deacon-Black.woff2") format("woff2"),
    url("/assets/fonts/Deacon-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

Path are malformed

When using local fonts, path are malformed. For example, doing:

<AstroFont
  config={[
    {
      name: "Deacon Black",
      src: [
        {
          style: "normal",
          weight: 900,
          path: join(
            process.cwd(),
            "public",
            "assets",
            "fonts",
            "Deacon-Black.woff2"
          ),
        },
      ],
      preload: true,
      display: "swap",
      fallback: "sans-serif",
      cssVariable: "deacon-black-font",
    },
  ]}
/>

will output the following path in both style and meta tags: /assets\fonts\Deacon-Black.woff2.

If that can help, I'm on windows

More convenient path for local fonts

Currently the path has to be written like so:

path: join(process.cwd(), "public", "assets", "fonts", "Deacon-Black.woff2")

but it would more convenient to write

path: join(process.cwd(), "public/assets/fonts/Deacon-Black.woff2")

Unfortunately, the following error is thrown:

TypeError: n.trim is not a function
    at $i (D:/DEV/PROJECTS/PRO/satquiztime/satquiz/node_modules/astro-font/dist/utils.js:7:276728)
    at eval (D:/DEV/PROJECTS/PRO/satquiztime/satquiz/node_modules/astro-font/dist/utils.js:8:204)
    at Array.reduce (<anonymous>)
    at _i (D:/DEV/PROJECTS/PRO/satquiztime/satquiz/node_modules/astro-font/dist/utils.js:8:168)
    at bd (D:/DEV/PROJECTS/PRO/satquiztime/satquiz/node_modules/astro-font/dist/utils.js:8:3289)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Wp (D:/DEV/PROJECTS/PRO/satquiztime/satquiz/node_modules/astro-font/dist/utils.js:8:4144)
    at async Promise.all (index 1)
    at async Module.renderChild (D:/DEV/PROJECTS/PRO/satquiztime/satquiz/node_modules/astro/dist/runtime/server/render/any.js:14:11)
    at async Object.renderToFinalDestination (D:/DEV/PROJECTS/PRO/satquiztime/satquiz/node_modules/astro/dist/runtime/server/render/util.js:119:7)

As a workaround, I can write

path: join(process.cwd(), ..."public/assets/fonts/Deacon-Black.woff2".split("/"))

Not working with local fonts.

I'm using astro latest version 4.1.2 and astro-font 0.0.72.
My operative system is Windows 10.
The browser is Chrome.

The problem is that I'm trying to load a local font and I don't know, but the url resolved is bad and report obviously a 404.

Also, I'm using the same code that rely the example in your repository:

<AstroFont
      config={[
        {
          name: "Afacad",
          src: [
            {
              style: "normal",
              weight: "400",
              path: "./public/fonts/Afacad-Regular.woff2",
            },
            {
              style: "medium",
              weight: "500",
              path: "./public/fonts/Afacad-Medium.woff2",
            },
          ],
          preload: false,
          display: "swap",
          selector: "body",
          fallback: "sans-serif",
        },
      ]}
    />

And the same structure file.

The URL resolved:

Pass Google Font path as the URL from Google Fonts

Hey, it would be great if you could pass a link like this:

https://fonts.googleapis.com/css2?family=Poppins

to astro-font. Basically I can't see a way to get the Google hosted woff file. But they give you this URL to access your selected fonts, so that would be super easy!

Issue

Right now, Google Fonts require to be fetched specifically over a URL (picked from google's css)

Solution

Use next/font like emitFile to emit fonts with the build.

Compatibility with fontaine when using css variables

https://github.com/unjs/fontaine is a neat project around fonts. When using CSS Variables (at the end of https://github.com/unjs/fontaine#usage), it requires doing:

:root {
  /* ... */
-  --ifm-font-family-base: 'Poppins';
+  --ifm-font-family-base: 'Poppins', 'Poppins override';

So here is my request: when cssVariable is specificed, generate the following css variable: --${cssVariable}: "${name}", "${name} override"; (pseudo-code, you get the idea)

not working on windows

if you use astro-font on windows, the font is not loaded in the browser

there are also errors in the dev console

i could take a look at it and maybe make a pr if i have time, but i don't right now

code for the example: https://github.com/thatgurkangurk/gurkz.me

Vercel Build will lead to a blank white page

Here is my code:

<html lang="en">
  <head>
    <Head title={title} description={description} />
    <AstroFont
      config={[
        {
          name: "Inter",
          src: [
            {
              style: "bold",
              weight: "300",
              path: "https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2",
            },
          ],
          preload: true,
          display: "swap",
          selector: "body",
          fallback: "sans-serif",
        },
        {
          name: "Inter",
          src: [
            {
              style: "bold",
              weight: "700",
              path: "https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2",
            },
          ],
          preload: true,
          display: "swap",
          selector: "body",
          fallback: "sans-serif",
        },
        {
          name: "IBM Plex Sans",
          src: [
            {
              style: "bold",
              weight: "400",
              path: "https://fonts.gstatic.com/s/ibmplexsans/v19/zYXgKVElMYYaJe8bpLHnCwDKhdHeFaxOedc.woff2",
            },
          ],
          preload: true,
          display: "swap",
          selector: "body",
          fallback: "sans-serif",
        },
      ]}
    />
  </head>

Here is my package.json

"dependencies": {
    "@astrojs/mdx": "^2.0.2",
    "@astrojs/react": "^3.0.8",
    "@astrojs/sitemap": "^3.0.3",
    "@astrojs/vercel": "^6.1.0",
    "@mojs/core": "^1.7.1",
    "@mojs/player": "^1.3.0",
    "@react-three/drei": "^9.92.6",
    "@react-three/fiber": "^8.15.12",
    "@react-three/offscreen": "^0.0.8",
    "@react-three/postprocessing": "^2.15.11",
    "@types/react": "^18.2.45",
    "@types/react-dom": "^18.2.18",
    "@types/three": "^0.159.0",
    "astro": "^4.0.7",
    "astro-compress": "^2.2.5",
    "astro-font": "^0.0.28",
    "astro-icon": "^0.8.2",
    "astro-particles": "^2.10.0",
    "csv-parse": "^5.5.3",
    "highcharts": "^11.2.0",
    "lamina": "^1.1.23",
    "leaflet": "^1.9.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "three": "^0.159.0",
    "tsparticles": "^2.12.0",
    "tsparticles-engine": "^2.12.0"
  },
  "devDependencies": {
    "astro-robots-txt": "^1.0.0",
    "astro-seo": "^0.8.0",
    "autoprefixer": "^10.4.16",
    "cssnano": "^6.0.2",
    "prettier": "^3.1.1",
    "prettier-plugin-astro": "^0.12.2",
    "sass": "^1.69.5",
    "typescript": "^5.3.3"
  }

Here is the output: https://victorguyard-loj2x1cca-victor-guyard-s-team.vercel.app/
Original site (nothing different just added this package and tried to use it: victorguyard.com.

No error logs in Vercel build or live logs.