Search code examples
htmlcssfontsfigma

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


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;

Solution

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