Comments (19)
my AstroFont
config:
---
import { AstroFont } from "astro-font";
---
<AstroFont
config={[
{
name: "Inter",
src: [
{
style: "normal",
weight: "400",
path: "https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2",
},
{
style: "normal",
weight: "500",
path: "https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2",
},
{
style: "normal",
weight: "700",
path: "https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2",
},
],
preload: true,
display: "swap",
selector: "body",
fallback: "sans-serif",
},
]}
/>
from astro-font.
Thanks for reporting! Looking into this...
from astro-font.
Can you share your AstroFont
configuration?
https://github.com/rishi-raj-jain/astro-font/blob/master/packages/astro-font/utils.ts#L186-L190 shall only load it when it's present 👀
from astro-font.
Thanks for sharing the config!
It helped me:
- fix the long filename problem that occured while reproducing the issue
- write idiomatic code to scope operations that are not vital and implement error handling: https://github.com/rishi-raj-jain/astro-font/blob/master/packages/astro-font/utils.ts#L201-L207
from astro-font.
Can you upgrade via:
pnpm add astro-font@latest
Also, by default the files are NOT created and localized.
To make sure the files are fetched and read from the local, add the fetch
flag to your config object.
from astro-font.
Hi @rishi-raj-jain, thanks for your quick response!
the error seems to be resolved and I can see local files are created correctly.
now I encounter another error. I'm using "astro-i18n": "^2.2.0"
and there are some conflicts with astro-font I think.
Stacktrace
TypeError: Invalid URL
at new URL (node:internal/url:775:36)
at set route [as route] (C:\Users\------\node_modules\astro-i18n\dist\src\index.js:12:30049)
at C:\Users\------\node_modules\astro-i18n\dist\src\index.js:12:36645
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async file:///C:/Users/------/node_modules/astro/dist/i18n/middleware.js:35:22
at async callMiddleware (file:///C:/Users/------/node_modules/astro/dist/core/middleware/callMiddleware.js:12:10)
at async #tryRenderRoute (file:///C:/------/node_modules/astro/dist/core/pipeline.js:101:18)
at async DevPipeline.renderRoute (file:///C:/Users/------/node_modules/astro/dist/core/pipeline.js:58:20)
at async handleRoute (file:///C:/Users/------/node_modules/astro/dist/vite-plugin-astro-server/route.js:248:18)
at async run (file:///C:/Users/------/astro/dist/vite-plugin-astro-server/request.js:50:14)
at async runWithErrorHandling (file:///C:/Users/------/node_modules/astro/dist/vite-plugin-astro-server/controller.js:64:5)
at async handleRequest (file:///C:/Users/------/node_modules/astro/dist/vite-plugin-astro-server/request.js:44:3)
Maybe this can go to another issue. Unfortunately I'll have to remove astro-font
for now and use google font links instead.
from astro-font.
Thank you for getting back to me!
Per the error log, I do not think this is related astro-font
.
- Do let me know if after removing
astro-font
it works fine - Feel free to drop a GH link to the repo if possible so that I can spend my time into crafting the perfect experience of
astro-font
from astro-font.
@rishi-raj-jain yes, removing astro-font
it works ok. you can see the error in this branch https://github.com/khoait/3edesign/tree/astro-font
from astro-font.
Hey, I just tested and it did build fine. The steps I followed:
- git clone https://github.com/khoait/3edesign/tree/astro-font
- npm install
- npm install astro-font@latest
- npm run build
from astro-font.
Screen.Recording.2024-01-08.at.6.28.19.PM.mp4
from astro-font.
Totally appreciate your feedback and time that you took! Hope you get the time to try this again soon...
from astro-font.
ok, that's strange. I see the error when running npm run dev
. build then preview is ok though 😕
from astro-font.
Untitled.video.mp4
from astro-font.
Hey @khoait,
Thank you for taking the time.
Even after you remove the astro-font
lib, it errors out as the error is within the dev mode while using astro-i18n
.
Please have a look:
Screen.Recording.2024-01-08.at.9.33.46.PM.mp4
from astro-font.
Even in the error logs of the screen recording you sent, the error is pointing out to: astro-i18n
from astro-font.
Yeah, i can see it. That's why i mentioned there is some conflicts with astro-i18n
only when astro-font
is installed.
Anyway i really apprecitate your support! I'll look into this later when my project is more stable.
from astro-font.
only when astro-font is installed.
Uninstalled it 👇🏻
Screen.Recording.2024-01-09.at.1.30.54.AM.mp4
from astro-font.
Anyway i really apprecitate your support!
My pleasure 🤞🏻
from astro-font.
I'll look into this later when my project is more stable.
Alright
from astro-font.
Related Issues (19)
- Self Serve Google Fonts HOT 1
- Feature request: get fonts data or url HOT 6
- Vercel Build will lead to a blank white page HOT 12
- Feature request: Add CSS Variables or className funtionality HOT 11
- Pass Google Font path as the URL from Google Fonts HOT 5
- Not working with local fonts. HOT 7
- font request: geist & geist mono HOT 2
- Path are malformed HOT 7
- Add support for several urls per src HOT 2
- Compatibility with fontaine when using css variables HOT 3
- More convenient path for local fonts HOT 4
- Fonts generated on every change HOT 3
- not working on windows HOT 2
- Feature request: add fallback for monospaced fonts HOT 4
- When should we use preload? HOT 9
- Is style correctly defined in README? HOT 4
- Node errors in Cloudlflare HOT 2
- No font's Loading HOT 16
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from astro-font.