nuxt-modules / fontaine Goto Github PK
View Code? Open in Web Editor NEW๐ค Font metric overrides to reduce CLS
License: MIT License
๐ค Font metric overrides to reduce CLS
License: MIT License
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.
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.
No response
I have created PR for solving this issue: #263
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'
https://stackblitz.com/edit/github-hjovjz?file=nuxt.config.ts
@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';
}
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?
I reviewed the docs and the web but could not find a solution or anyone that encountered a similar problem.
No response
I have custom font
And configured on tailwind.css
[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
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.
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
.
https://stackblitz.com/edit/github-jzaonw
It would be nice to consider such imports to save redundant code or even support this kind of "code-paradigm".
No response
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
I can't give a link
Can with resolve this error?
No response
I am just wonder what the format should be when using the Nuxt Google Fonts module.
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
No response
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
.
https://stackblitz.com/edit/github-rbztbr?file=nuxt.config.ts
No error should be thrown in the absence of fontMetrics
in nuxt.config.ts
No response
Fontaine seems to amend "* fallback" to sass variables that too commented one. This breaks the code.
https://github.com/TechAkayy/my-nuxt-vuetify-generate-issue
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.
Run npx nuxi info
and pnpm list
(or npm list
) and provide the output:
------------------------------
- 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]
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 ๐ฅฒ
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.
I set the font-family inside tailwind.config.ts
export default {
theme: {
fontFamily: {
sans: ['Poppins', 'sans-serif']
}
}
}
Using Unocss in a nuxt project, buton get "inherit override".
https://stackblitz.com/edit/github-zvbtmv?file=pages/index.vue
I expected that did not happened and to have only "inherit"
No response
Hey there,
while trying to implement the module in my application, I noticed two issues:
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.
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;
}
https://stackblitz.com/edit/github-x62ihe?file=nuxt.config.ts
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
No response
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',
},
]
},
https://stackblitz.com/github/nuxt-modules/fontaine/tree/main/playground?file=package.json
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;
}
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.
If you disable auto imports in the config, then an error occurs defineNuxtPlugin is not defined
https://stackblitz.com/edit/github-yp6ihk?file=nuxt.config.ts
To avoid this error
No response
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.
No response
Windows_NT
v16.13.0
3.0.0-rc.12-27762285.23ad303
0.5.5-27758232.d90c938
[email protected]
vite
ssr
, modules
, css
, typescript
, alias
, build
, runtimeConfig
, vue
, vite
, proxy
@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]
-
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>;
}
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
!
No response
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.
https://stackblitz.com/edit/github-wrgakp-4yzwmm
Output should either group overrides by "src" attribute eliminating multiplication of CSS or (probably unnecessary) take into account weight/style/unicode-range variations.
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.
Thanks for trying Maige.
Running GPT-based services is pricey. At this point, we ask you to add payment info to continue using Maige.
Feel free to close this issue.
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
https://stackblitz.com/edit/github-mqggve?file=package.json
Correct use of source maps?
No response
The fallback font is gone and CLS is back, wen adapting new dir structure with nuxt future: { compatibilityVersion: 4, },
https://stackblitz.com/edit/github-eevtp4?file=app%2Fpages%2Findex.vue
Should work as expected, generate fallback font and reduce CLS caused by fonts
No response
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates are awaiting their schedule. Click on a checkbox to get an update now.
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
These updates await pending status checks. To force their creation now, click the checkbox below.
@nuxt/kit
, @nuxt/module-builder
, @nuxt/schema
, @nuxt/test-utils
, nuxt
, vue
).github/workflows/ci.yml
actions/checkout v4
actions/setup-node v4
actions/checkout v4
actions/setup-node v4
codecov/codecov-action v4
.github/workflows/release.yml
actions/checkout v4
actions/setup-node v4
package.json
@nuxt/kit ^3.12.1
fontaine ^0.5.0
magic-string ^0.30.10
pathe ^1.1.2
ufo ^1.5.3
@nuxt/eslint-config 0.3.13
@nuxt/module-builder 0.8.1
@nuxt/schema 3.12.3
@nuxt/test-utils 3.13.1
@types/node 20.14.14
@types/serve-handler 6.1.4
@vitest/coverage-v8 2.0.5
bumpp 9.4.2
conventional-changelog-conventionalcommits 8.0.0
eslint 9.8.0
expect-type 0.19.0
get-port-please 3.1.2
husky 9.0.11
lint-staged 15.2.7
nuxt 3.12.3
rollup 4.18.1
serve-handler 6.1.5
typescript 5.4.5
vitest 2.0.5
vue 3.4.31
@nuxt/kit 3.12.3
pnpm 9.3.0
playground/package.json
nuxt 3.12.3
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.