Comments (6)
Apologies for this. With tailwind you will probably need to do this:
export default {
theme: {
fontFamily: {
sans: ['Poppins', 'Poppins override', 'sans-serif']
}
}
}
Let me know if that resolves things for you. 🙏
from fontaine.
Still trying:
I removed the fontMetrics
config object from my nuxt.config.ts
and found some Poppins override
after building within my bundle (at server/chunks/app/server.mjs
and public/_nuxt/entry.ec2f5241.css
, e.g.:
931: useHead({ style: [{
children: css + ` @font-face { font-family: "Poppins override"; src: local("BlinkMacSystemFont"),
local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial"),local("Noto Sans");
ascent-override: 105%; descent-override: 35%; line-gap-override: 10%; }
[...]
still not sure if correct and if I set it up correctly as my CLS is unchanged.
from fontaine.
Did you resolve this?
from fontaine.
Whoops! Fixing my post:
It looks like fallback
is what is being generated in the CSS for the font-face options. The sizing doesn't seem to match up, but module is not using override
.
The sizes don't seem to be calculating correctly, though, so while it is loading a fallback font, it's still shifting a whole bunch. In fact, it's even a bit worse than the default sans-serif, so I've disabled this.
I did see other posts about nuxt-fonts, so I'm going to check that out.
from fontaine.
Updated and released module with latest version of fontaine
, which should resolve issue with the metrics being slightly off.
from fontaine.
It stilld oesn't seem to have helped, unfortunately. I can confirm that fontaine 0.5.0 is installed, but the metrics are causing more CLS than the default. Here are some screenshots comparing the intended Jakarta font, the fontaine Fallback font, and the system UI font.
from fontaine.
Related Issues (20)
- help: Using fontaine with Google Fonts HOT 5
- docs: more precisions in readme HOT 2
- fix: Sourcemap missing? HOT 10
- fix: inherit is also "inherit override" HOT 1
- Error Cannot start nuxt: ENOENT: no such file or directory, HOT 1
- fix: defineNuxtPlugin is not defined HOT 1
- fix: redundant/suboptimal @font-face definitions
- feat: add optional root option for not public fonts HOT 2
- fix: I can't get the same font into the override HOT 1
- fix: module doesn't generate fallback fonts
- Action Required: Fix Renovate Configuration
- fix: Issues with SASS imports and variables
- docs: What is the setup for @nuxtjs/google-fonts? HOT 3
- fix: Fontaine seems to add fallback to sass variables that are commented out
- fix: `tag.innerHTML.replace is not a function` when no module config is provided HOT 3
- Maige Usage
- Font imports from preprocessors seem to be ignored
- fix: Node error HOT 1
- help: Cannot destructure property 'capHeight' of 'font' as it is undefined. HOT 7
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 fontaine.