Multiple custom fonts from same family

[cssninjastudio]

Multiple custom fonts from same family

[espensgr]

This worked for me:

custom: {
  families: [{
    name: 'Mainson Neue',
    src: './src/fonts/regular/*',
  },
  {
    name: 'Mainson Neue Extended',
    src: './src/fonts/extended/*',
  }],
},

[belaziv]

OK, That's what I did and I see that the fonts are indeed loaded 👍

custom: {
  families: [{
    name: 'Rubik',
    src: './src/assets/fonts/Rubik/*'
  }],
},

In src/assets/fonts/Rubik/ directory there are a few fonts (Rubik-Medium.ttf / Rubik-Regular.ttf / etc.)
But when I tried to use a specific font, for example fontFamily: 'Rubik-Medium', no Rubik's font was shown, and when I tried fontFamily: 'Rubik' then the Rubik-Regular font is displayed

What is the correct way to use it?
Thanks

[espensgr]

Well i guess you should see a font.css with the @font-face stacked within the family added to your html.
The Medium, Light, Regular and Bold are added as versions of the font, so when you use font-family: "Rubik" it uses the regular version, and if you use <bold>This is bold</bold> it uses the bold version of the font.
This i how @font-face is built, the browser switches between versions based on css og html elements.
This plugin reads the filenames i belive and adds @font-face attributes based on that.
So the Bold gets font-weight: 700;, italic gets font-style:italic; and bold-italic gets both.

Dont know if that made things any better 😆

[stafyniaksacha]

Hi there!

This has been fixed in the v1.0.0

Feel free to reopen the issue if it persists!