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;
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>