text weight issue
in figma and adobe xd it shows proper weight of font but when i design it shows little bolder font
53 Replies
this is html css sample
this is adobe xd sample
Looking at the "E" that is not the same font
it is can i give you ttf file ?
on p you have
font-family: 'Constantine'; yet in css you only imported font-family: 'constantine_regular';good catch
can. you check it again
so what changes i can do ?
the name you define in @font , you use in font-family
okay i made that change still it shows bolder font
the font in codepen doesn't work since the link goes to nowhere
i have added the gdrive link
but anyways can you try here's the font
it shows lighter in adobe and figma too but when i code it doesn't show that much light
because it is times new roman what you are seeing. the pen is not loading the font correctly
are you sure you are using the correct font
yes i'm using that font in vscode
attached it this way
constantine_regular indicates the min weght is gonna be 400 or 500 if you use 100-300 it will still be a 400
yea, but if it is wrong, your browser will still load it correctly because it is installed locally
the font needs to support the lighter weights for it work
you can't just use a font and expect it to work across full range of weights
no
i know that but why it shoes lighter in figma
and then gets little bold when i use it in website
show us that figma file then
let me share
just for me and to prevent confusion. in your @font-face, and everywhere where you use it. Call it something completely else
figma says the font weight is 400
okay let's call it pizzaparty
yes
where did you get that font from?
Here you can see the font is not loaded correctly. the fallback Impact is shown
don't remember the website
it was two days ago
and that is what is being used in figma?
yes
tell me do you see a difference in the images i posted?
see the weight looks to be the same in your figma file and my local env
yes no difference
so you are just seeing things 😄
top codepen, bottom figma
same for me
nahh man i'm saying that figma style is the style i want in html css
but in html css it get's bolder
is you don't believe me then try to make one html css
i did and used your css from codepen
codepen one is slightly bold
did you used font locally ?
different engines redering text. could be rounding. This is the best you can do
i used the html css and the font you posted here
didn't you saw it little bolder ?
and then overlayed both results in figma to show you that there is no difference
maybe your pc is rendering it differently
im done with this, too nitpicky. we're not gonna solve it (if there really is a difference)
there is non Mark 😄
can i dm you the original file then you can really see it
i mean this hello was just an example but my project is different
the result won't be different
it is that's why i came here
let me show you once
problem solved it was an macos thing
mark can relax now