`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
I noticed on your own sites (for example, line 40 here: https://github.com/rishi-raj-jain/suplovers-astro/blob/main/src/layouts/Layout.astro) you are setting preload: false when serving a local font.
When should we use preload: true and preload: false? Can you give some examples?
Thank you!
In https://github.com/rishi-raj-jain/astro-font/blob/master/packages/astro-font/README.md you are providing values like style: 'bold' and style: 'medium' when I believe the only acceptable values are style: 'normal' and style: 'italic' as per the Vercel docs: https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#local-fonts
Please correct me if I am wrong.
Hi,
I'm using "astro-font": "^0.0.60" and having this error when run build.
it would be great if the library natively had the geist/geist mono font as it is my favourite font
I could make a pr for it if you’d like just let me know :)
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:
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)
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!
Is there a way to reduce the console output. Not sure why these font files need generating on every change.
I am having an issue using astro-font with Cloudflare and I get the following errors at build time
| 11:04:08.553 | ✘ [ERROR] Could not resolve "node:path" |
|---|---|
| 11:04:08.554 | |
| 11:04:08.554 | _worker.js:108:22532: |
| 11:04:08.554 | 108 │ ...w});import{join as j0}from"node:path";import{Buffer as uq}from... |
| 11:04:08.554 | ╵ ~~~~~~~~~~~ |
| 11:04:08.554 | |
| 11:04:08.554 | The package "node:path" wasn't found on the file system but is built into node. |
| 11:04:08.555 | Add the "nodejs_compat" compatibility flag to your Pages project to enable Node.js compatibility. |
| 11:04:08.555 | |
| 11:04:08.555 | |
| 11:04:08.555 | ✘ [ERROR] Could not resolve "node:buffer" |
| 11:04:08.555 | |
| 11:04:08.555 | _worker.js:108:22568: |
| 11:04:08.555 | 108 │ ...;import{Buffer as uq}from"node:buffer";function Wn(e,t,r,n){r=... |
| 11:04:08.555 | ╵ |
I'm on "astro-font": "0.0.78",
I would love to get your plugin working. Thanks so much for your work
When using tools like tailwind, it would be great to have a CSS variable or class-name
that we can reference somewhere else, maybe in config or CSS files...similar to the next/font package
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("/"))Would be nice to also have a fallback for monospaced fonts
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;
}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
When using tools like Satori, we need to load fonts. It would be great to be able to access the data loaded in an endpoint
Right now, Google Fonts require to be fetched specifically over a URL (picked from google's css)
Use next/font like emitFile to emit fonts with the build.
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
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.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 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.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
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.