nuxt-modules / fontaine Goto Github PK

Thanks for trying Maige.

Running GPT-based services is pricey. At this point, we ask you to add payment info to continue using Maige.

Add payment info

Feel free to close this issue.

📚 Is your documentation request related to a problem?

I am just wonder what the format should be when using the Nuxt Google Fonts module.

Is this correct?

🔍 Where should you find it?

Example in the readme near where it says
// If you are using a Google font or you don't have a @font-face declaration
// for a font you're using, you can declare them here.
under Usage

ℹ️ Additional context

No response

📚 What are you trying to do?

I have custom font

🔍 What have you tried?

And configured on tailwind.css

ℹ️ Additional context

[uncaughtException] Cannot destructure property 'capHeight' of 'font' as it is undefined.

Cannot start nuxt: ENOENT: no such file or directory,

(node:2908) PromiseRejectionHandledWarning: Promise rejection was handled asynchronously

🐛 The bug

Using Unocss in a nuxt project, buton get "inherit override".

🛠️ To reproduce

https://stackblitz.com/edit/github-zvbtmv?file=pages/index.vue

🌈 Expected behaviour

I expected that did not happened and to have only "inherit"

ℹ️ Additional context

No response

🐛 The bug

If I use @font-face declarations that are imported in a global CSS file like a @import '~/fonts.scss' statement in main.scss via an CSS preprocessor like SASS, nuxt-modules/fontaine won't reognize those fonts unless I declare them manually in fontMetrics, or I import the fonts CSS directly in Nuxt config, or import the fonts CSS in the App.vue.

🛠️ To reproduce

https://stackblitz.com/edit/github-jzaonw

🌈 Expected behaviour

It would be nice to consider such imports to save redundant code or even support this kind of "code-paradigm".

ℹ️ Additional context

No response

🐛 The bug

If you disable auto imports in the config, then an error occurs defineNuxtPlugin is not defined

🛠️ To reproduce

https://stackblitz.com/edit/github-yp6ihk?file=nuxt.config.ts

🌈 Expected behaviour

To avoid this error

ℹ️ Additional context

No response

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update nuxt core (@nuxt/kit, @nuxt/schema, nuxt, vue)
• chore(deps): update devdependency eslint to v9.5.0
• chore(deps): lock file maintenance

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

🐛 The bug

After install module on nuxt 3 Node start throwing error "(node:16336) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead. Use node --trace-deprecation ... to show where the warning was created)".
The error itself is not a problem, but it is still annoying when it appears in the console during each build. The error appeared after upgrading from version v20.11.0 to v21.6.1

🛠️ To reproduce

I can't give a link

🌈 Expected behaviour

Can with resolve this error?

ℹ️ Additional context

No response

🐛 The bug

In my case there is a font-family Test.

In build mode nothing changes. No fallback font-face. No fallback in font-family value
In dev mode. No fallback font-face. Fallback in font-family value appears font-family: 'Test', 'Test fallback'

🛠️ To reproduce

https://stackblitz.com/edit/github-hjovjz?file=nuxt.config.ts

🌈 Expected behaviour

@font-face {
  font-family: 'Test';
   ...
}
* {
  font-family: Test;
}

Code above should be transformed to code below


@font-face {
  font-family: 'Test fallback';
  ...
}
*{
  font-family: 'Test', 'Test fallback';
}

ℹ️ Additional context

• Operating System: Darwin
• Node Version: v18.6.0
• Nuxt Version: 3.6.5
• Nitro Version: 2.5.2
• Package Manager: [email protected]
• Builder: vite
• User Config: devtools, modules, css, fontMetrics
• Runtime Modules: @nuxtjs/[email protected]
• Build Modules: -

🆒 Your use case

If a developer wants to avoid using fonts stored in Nuxt's public path, they cannot do it. For example, a developer might want to use assets directory as fonts storage (or some others). assets directory is better when site will use caching tools (like the Cache-Control header) - then assets directory will generate unique filenames.

🆕 The solution you'd like

Created root option for module and font options. If root option has been declared, it overrides the default Nuxt public path value for searching fonts in project.

🔍 Alternatives you've considered

No response

ℹ️ Additional info

I have created PR for solving this issue: #263

🐛 The bug

I'm seeing an error in the console when running pnpm dev:

Sourcemap for "virtual:nuxt:/home/myapp/.nuxt/font-override-inlining-plugin.server.ts" points to missing source files

🛠️ To reproduce

https://stackblitz.com/edit/github-mqggve?file=package.json

🌈 Expected behaviour

Correct use of source maps?

ℹ️ Additional context

No response

🐛 The bug

My goal is that fontaine makes an override with the same font, so that the same typography is always maintained, in this case: Signika.

I have the font in my local folder, I don't use Google fonts with url.

Well, I can't get the override of Signika to be Signika itself, nuxt/fontaine adds me the overrides with some random local fonts.

This is my font-face in the css file:
` /* latin-ext /
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/signikasemiboldlatinext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/ latin */
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/signikasemiboldlatin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext /
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/signikaboldlatinext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/ latin */
@font-face {
font-family: 'Signika';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url('/assets/fonts/signikaboldlatin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
`

And this is the result of compiling the css with nuxt/fontaine (you are looking at the result of global.css from chrome debugger):
/* latin-ext /
@font-face {
font-family: "Signika override";
src: local("BlinkMacSystemFont"),local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial"),local("Noto Sans");
ascent-override: 94%;
descent-override: 29.2%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/_nuxt/assets/fonts/signikasemiboldlatinext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/ latin /
@font-face {
font-family: "Signika override";
src: local("BlinkMacSystemFont"),local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial"),local("Noto Sans");
ascent-override: 94%;
descent-override: 29.2%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/_nuxt/assets/fonts/signikasemiboldlatin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/ latin-ext /
@font-face {
font-family: "Signika override";
src: local("BlinkMacSystemFont"),local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial"),local("Noto Sans");
ascent-override: 94%;
descent-override: 29.2%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/_nuxt/assets/fonts/signikaboldlatinext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/ latin */
@font-face {
font-family: "Signika override";
src: local("BlinkMacSystemFont"),local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial"),local("Noto Sans");
ascent-override: 94%;
descent-override: 29.2%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Signika';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url('/_nuxt/assets/fonts/signikaboldlatin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

And this is my nuxt.config, which nuxt/fontaine ignores anything I write in it about fonts:

fontMetrics: {
    fonts: [
      {
        family: 'Signika',
        fallbacks: ['Signika'],
        overrideName: 'fallback-signika',
        src: '/fonts/signikasemiboldlatin.woff2',
        root: 'assets',
      },
    ]
},

🛠️ To reproduce

https://stackblitz.com/github/nuxt-modules/fontaine/tree/main/playground?file=package.json

🌈 Expected behaviour

Do you understand what I mean? I was hoping that in with slow 3g loads nuxt fontaine would keep me the same source, not change Signika for another one.
This is what I expected nuxt/fontaine to do:
/* latin-ext /
@font-face {
font-family: "Signika override";
src: url('/_nuxt/assets/fonts/signikasemiboldlatinext.woff2') format('woff2');
ascent-override: 94%;
descent-override: 29.2%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/_nuxt/assets/fonts/signikasemiboldlatinext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/ latin /
@font-face {
font-family: "Signika override";
src: url('/_nuxt/assets/fonts/signikasemiboldlatin.woff2') format('woff2');
ascent-override: 94%;
descent-override: 29.2%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/_nuxt/assets/fonts/signikasemiboldlatin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/ latin-ext /
@font-face {
font-family: "Signika override";
src: url('/_nuxt/assets/fonts/signikaboldlatinext.woff2') format('woff2');
ascent-override: 94%;
descent-override: 29.2%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/_nuxt/assets/fonts/signikaboldlatinext.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/ latin */
@font-face {
font-family: "Signika override";
src: url('/_nuxt/assets/fonts/signikaboldlatin.woff2') format('woff2');
ascent-override: 94%;
descent-override: 29.2%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Signika';
font-style: normal;
font-display: swap;
font-weight: 700;
src: url('/_nuxt/assets/fonts/signikaboldlatin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

ℹ️ Additional context

I have kept stackblitz the same as playground because the same thing happens, the Poppins font changes to another font instead of always staying the same.
I thought the point of nuxt/fontaine was to keep the same font.

📚 What are you trying to do?

I'd like to use Fontaine with Google Fonts, for which I am using Nuxt Google Fonts module.

When you say:

If you are using a Google font or you don't have a @font-face declaration for a font you're using, you can declare them here.

Does this mean Fontaine does not work with Google fonts? Or is there a way to configure that?

🔍 What have you tried?

I reviewed the docs and the web but could not find a solution or anyone that encountered a similar problem.

ℹ️ Additional context

No response

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (:automergeEarlyMondays). Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

🐛 The bug

Fontaine seems to amend "* fallback" to sass variables that too commented one. This breaks the code.

🛠️ To reproduce

https://github.com/TechAkayy/my-nuxt-vuetify-generate-issue

🌈 Expected behaviour

To reproduce, clone, install, npm run dev the reproduction.

In main.scss, remove the single space on either side of the the colon (:) indicated in this screenshot and save.

ℹ️ Additional context

------------------------------
- Operating System: Darwin
- Node Version:     v18.12.1
- Nuxt Version:     3.7.3
- CLI Version:      3.8.4
- Nitro Version:    2.7.1
- Package Manager:  [email protected]
- Builder:          -
- User Config:      devtools, experimental, app, modules, fontMetrics, critters, css, vuetify, image, veeValidate, content, pinia, imports, vue, sourcemap, routeRules, site, robots, sitemap, ogImage, linkChecker, pinegrow
- Runtime Modules:  @pinegrow/[email protected], @unocss/[email protected], @nuxt/[email protected], @nuxt/[email protected], @vueuse/[email protected], @pinia/[email protected], @nuxt/[email protected], @vee-validate/[email protected], [email protected], @nuxtseo/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected]
- Build Modules:    -
------------------------------

[email protected] /Users/techakayy/Tests/reproductions/my-nuxt-vuetify-generate-issue
├── @iconify/[email protected]
├── @mdi/[email protected]
├── @nuxt/[email protected]
├── @nuxt/[email protected]
├── @nuxt/[email protected]
├── @nuxt/[email protected]
├── @nuxtjs/[email protected]
├── @nuxtjs/[email protected]
├── @nuxtjs/[email protected]
├── @nuxtseo/[email protected]
├── @pinegrow/[email protected]
├── @pinegrow/[email protected]
├── @pinia/[email protected]
├── @types/[email protected]
├── @unocss/[email protected]
├── @unocss/[email protected]
├── @vee-validate/[email protected]
├── @vue/[email protected]
├── @vueuse/[email protected]
├── @vueuse/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

🐛 The bug

Hey there,

while trying to implement the module in my application, I noticed two issues:

1. File scanning doesn't include imports while preparing fallbacks. For example, in nuxt.config.ts I'm adding the main stylesheet file:

css: ['~/assets/scss/main.scss'];

Within it, I'm importing two files with an @import rule:

@import 'fonts.scss';
@import 'typography.scss';

With such configuration, the output CSS file is not affected by the module (neither @font-face rules nor font-family: properties). However, if I add these two files explicitly in nuxt.config.ts:

css: ['~/assets/scss/fonts.scss', '~/assets/scss/typography.scss'],

I can see that both font-face rules and font-family properties were updated by the module.

2. Updating font-family properties doesn't work properly when these are set with variables. I've added a sass partial with variables in nuxt.config.ts, using vite preprocessor options (following Nuxt docs):

vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
            @use "~/assets/scss/_variables.scss" as *;
          `,
        },
      },
    },
  },

Then, in typography.scss I'm using variable in font-family property:

h1 {
  font-family: $fontFamily, sans-serif;
}

which results in an output file/browser inspector:

h1 {
    font-family: "Poppins", "$fontFamily fallback", sans-serif;
}

🛠️ To reproduce

https://stackblitz.com/edit/github-x62ihe?file=nuxt.config.ts

🌈 Expected behaviour

It'd be great to have these working with a module or to have a further information on how to deal with imports/module configuration in such cases

ℹ️ Additional context

No response

🐛 The bug

When the fontMetrics configuration is omitted in nuxt.config.ts, pages fail to render with the following error:
[500] tag.innerHTML.replace is not a function.

🛠️ To reproduce

https://stackblitz.com/edit/github-rbztbr?file=nuxt.config.ts

🌈 Expected behaviour

No error should be thrown in the absence of fontMetrics in nuxt.config.ts

ℹ️ Additional context

No response

📚 What are you trying to do?

Having the following CSS files added to the nuxt.config file (cosmos.css and futura.css) with multiple @font-face declarations in each, I am receiving an error shown below. Is there anything missing on my part? Could the font files be the ones to blame?

I've also attached a snippet with the content of one of the CSS files. If these turn out to be insufficient, I might try to prepare a reproduction.

🔍 What have you tried?

No response

ℹ️ Additional context

• Operating System: Windows_NT
• Node Version: v16.13.0
• Nuxt Version: 3.0.0-rc.12-27762285.23ad303
• Nitro Version: 0.5.5-27758232.d90c938
• Package Manager: [email protected]
• Builder: vite
• User Config: ssr, modules, css, typescript, alias, build, runtimeConfig, vue, vite, proxy
• Runtime Modules: @nuxtjs/[email protected], floating-vue/nuxt, @pinia/[email protected], @vueuse/[email protected], unplugin-icons/nuxt, @formkit/[email protected], [email protected], @nuxtjs/[email protected], [email protected]
• Build Modules: -

📚 Is your documentation request related to a problem?

I use Tailwind for my CSS. With it, you can have custom class to handle font-family.

So, in my CSS file, I write:

html {
  @apply font-<font-name>;
}

But this will not resolve in

html {
  font-family: <font-name>, "<font-name> override";
}

But in

html {
  font-family: <font-name>;
}

🔍 Where should you find it?

In the README, you say:

If you are using a Google font or you don't have a @font-face declaration
for a font you're using, you can declare them here.

But maybe, you can add something about using @apply !

ℹ️ Additional context

No response

🐛 The bug

When encountering multiple @font-face definitions addressing the same font (according to "src" attribute) defined in CSS with i.e. multiple unicode-ranges and/or font-weights/styles this module outputs the same override for every definition.

🛠️ To reproduce

https://stackblitz.com/edit/github-wrgakp-4yzwmm

🌈 Expected behaviour

Output should either group overrides by "src" attribute eliminating multiplication of CSS or (probably unnecessary) take into account weight/style/unicode-range variations.

ℹ️ Additional context

In the reproduction look at <style type="text/css" data-vite-dev-id="/home/projects/github-wrgakp-4yzwmm/node_modules/.cache/nuxt-google-fonts/css/nuxt-google-fonts.css"> in the <head> section.

📚 What are you trying to do?

I'm trying to integrate this module + Google Fonts module to my website (which is based on content-wind).

I don't get any overrides generated, no matter what I try. I assume I don't understand the stack well enough, yet.
Help very appreciated 🥲

🔍 What have you tried?

I've checked the issue #108 and tried to specify the fontMetrics property in nuxt.config.ts (as I do not have any @font-face declarations in my local CSS):

fontMetrics: {
  fonts: ['Poppins', { family: 'Poppins', src: '/assets/fonts/Poppins-400.woff2' }]
},

...not sure if that makes sense as I actually want to leverage the download option from the google-fonts module, but then I don't know how configure fontaine to generate overrides.

I also tried to specify @font-face in my main.css instead of the lines above.

ℹ️ Additional context

I set the font-family inside tailwind.config.ts

export default {
  theme: {
    fontFamily: {
      sans: ['Poppins', 'sans-serif']
    }
  }
}