0

I want to use Poppins of different styles like thin100, medium500...but I'm not able to find it anywhere on docs to do this.

 fontFamily:{
               'poppins' :'Poppins','sans-serif'
            }
this is the import stm- 
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;500&display=swap');

I have used like this but it applies the medium500 style, I think. I do not understand how the default style is selected and how can I differentiate between these styles?

Is there something like:

fontFamily:{
    poppins-100:....
    poppins-500:....
          }

like how we define custom colors.

For the comments provided below:

HTML file

example of font weight usage

CSS file

importing of 900 poppins style

Poornima T
  • 263
  • 1
  • 2
  • 8
  • 2
    use `font-weight: number` to change the font – Sysix Jan 15 '22 at 15:10
  • 1
    When importing the font family, you only have a single font family (i.e. "Poppins") that comes with different font weights. You can simply use the [utility classes to define the different font weights](https://tailwindcss.com/docs/font-weight). – Terry Jan 15 '22 at 15:11
  • I did try the font weights but couldn't see much difference. Like, I had imported black700 style so writing "font-thin" in the class name does not effect it. – Poornima T Jan 16 '22 at 17:13

0 Answers0