How to Implement 590 Font Wight in CSS Same as Figma Design

Question

I am working on a project and the designer who designed the UI has used 510 and 590 font weights which are not available in CSS. Is there any way to implement the same font weight in CSS? I want to have the same design as figma.

Here is the code figma produced but font-weight doesn't work in the real CSS.

color: var(--white, #FFF);
font-family: SF Pro;
font-size: 25px;
font-style: normal;
font-weight: 590;
line-height: normal;

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight : `In earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts using the Fallback weights system. ` — ATP, Jul 26 '23 at 08:37
`CSS Fonts Level 4 extends the syntax to accept any number between 1 and 1000 and introduces `[Variable fonts](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#variable_fonts)`, which can make use of this much finer-grained range of font weights.` About your font, see this: css-tricks.com/… (you need the font to be installed in order to see the examples) but the idea is the [font-variation-settings](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings) property — ATP, Jul 26 '23 at 08:44
Does this answer your question? [Font weight isn't working with variable fonts?](https://stackoverflow.com/questions/63482767/font-weight-isnt-working-with-variable-fonts) — ATP, Jul 26 '23 at 08:57
@ATP the question how can I implement the font-weight 510 and 590 which is produced by figma. Because CSS has only 500 and 600 font-weight — Sanan Ali, Jul 26 '23 at 09:07
replace `font-weight: 590;` with `font-variation-settings: 'wght' 590;` — ATP, Jul 26 '23 at 09:12
Thanks, Although, this question looks similar to another but because it is mentioned with figma and can be helpful for beginners, I think it shouldn't be deleted. — Sanan Ali, Jul 26 '23 at 11:07

score 1 · Accepted Answer · answered Jul 26 '23 at 11:05

Thanks to ATP for comments. I figured out how this can work in CSS.

You first need to make sure you have the font variations like 300,400,500,600 etc. Without variations, it will not work.

Then you need to add font-variation-settings: 'wght' 590; instead of font-weight:590

Here is a simple example

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200..900');

.font-500 {
  font-family: 'Inter';
  font-variation-settings: 'wght' 500;
}
.font-590 {
  font-family: 'Inter';
  font-variation-settings: 'wght' 590;
}

<span class="font-500">Font 500 </span>
<span class="font-590">Font 590</span>

How to Implement 590 Font Wight in CSS Same as Figma Design

1 Answers1