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